dockview 0.0.28 → 1.0.0

package/dist/cjs/react/deserializer.js

@@ -1,40 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactPanelDeserialzier = void 0;
-var dockviewGroupPanel_1 = require("../dockview/dockviewGroupPanel");
-var componentFactory_1 = require("../panel/componentFactory");
-var component_api_1 = require("../api/component.api");
-var defaultTab_1 = require("../dockview/components/tab/defaultTab");
-var defaultGroupPanelView_1 = require("../dockview/defaultGroupPanelView");
-var ReactPanelDeserialzier = /** @class */ (function () {
-    function ReactPanelDeserialzier(layout) {
-        this.layout = layout;
-    }
-    ReactPanelDeserialzier.prototype.fromJSON = function (panelData) {
-        var _a, _b, _c;
-        var panelId = panelData.id;
-        var params = panelData.params;
-        var title = panelData.title;
-        var state = panelData.state;
-        var suppressClosable = panelData.suppressClosable;
-        var viewData = panelData.view;
-        var view = new defaultGroupPanelView_1.DefaultGroupPanelView({
-            content: (0, componentFactory_1.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)
-                ? (0, componentFactory_1.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_1.DefaultTab(),
-        });
-        var panel = new dockviewGroupPanel_1.DockviewGroupPanel(panelId, new component_api_1.DockviewApi(this.layout));
-        panel.init({
-            view: view,
-            title: title,
-            suppressClosable: suppressClosable,
-            params: params || {},
-            state: state || {},
-        });
-        return panel;
-    };
-    return ReactPanelDeserialzier;
-}());
-exports.ReactPanelDeserialzier = ReactPanelDeserialzier;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactPanelDeserialzier = void 0;
+var dockviewGroupPanel_1 = require("../dockview/dockviewGroupPanel");
+var componentFactory_1 = require("../panel/componentFactory");
+var component_api_1 = require("../api/component.api");
+var defaultTab_1 = require("../dockview/components/tab/defaultTab");
+var defaultGroupPanelView_1 = require("../dockview/defaultGroupPanelView");
+var ReactPanelDeserialzier = /** @class */ (function () {
+    function ReactPanelDeserialzier(layout) {
+        this.layout = layout;
+    }
+    ReactPanelDeserialzier.prototype.fromJSON = function (panelData) {
+        var _a, _b, _c;
+        var panelId = panelData.id;
+        var params = panelData.params;
+        var title = panelData.title;
+        var state = panelData.state;
+        var suppressClosable = panelData.suppressClosable;
+        var viewData = panelData.view;
+        var view = new defaultGroupPanelView_1.DefaultGroupPanelView({
+            content: (0, componentFactory_1.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)
+                ? (0, componentFactory_1.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_1.DefaultTab(),
+        });
+        var panel = new dockviewGroupPanel_1.DockviewGroupPanel(panelId, new component_api_1.DockviewApi(this.layout));
+        panel.init({
+            view: view,
+            title: title,
+            suppressClosable: suppressClosable,
+            params: params || {},
+            state: state || {},
+        });
+        return panel;
+    };
+    return ReactPanelDeserialzier;
+}());
+exports.ReactPanelDeserialzier = ReactPanelDeserialzier;
 //# sourceMappingURL=deserializer.js.map

package/dist/cjs/react/dockview/components.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-interface WithChildren {
-    children: React.ReactNode;
-}
-export declare const DockviewComponents: {
-    Tab: React.FunctionComponent<WithChildren>;
-    Content: React.FunctionComponent<WithChildren>;
-    Actions: React.FunctionComponent<WithChildren>;
-    Panel: React.FunctionComponent<WithChildren>;
-};
-export {};
+import * as React from 'react';
+interface WithChildren {
+    children: React.ReactNode;
+}
+export declare const DockviewComponents: {
+    Tab: React.FunctionComponent<WithChildren>;
+    Content: React.FunctionComponent<WithChildren>;
+    Actions: React.FunctionComponent<WithChildren>;
+    Panel: React.FunctionComponent<WithChildren>;
+};
+export {};

package/dist/cjs/react/dockview/components.js

@@ -1,77 +1,77 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DockviewComponents = void 0;
-var React = __importStar(require("react"));
-var ReactDOM = __importStar(require("react-dom"));
-var react_1 = require("../react");
-var Tab = function (props) {
-    return React.createElement(React.Fragment, null, props.children);
-};
-var Content = function (props) {
-    return React.createElement(React.Fragment, null, props.children);
-};
-var Actions = function (props) {
-    return React.createElement(React.Fragment, null, props.children);
-};
-function isValidComponent(element) {
-    return [Content, Actions, Tab].find(function (comp) { return element.type === comp; });
-}
-var Panel = function (props) {
-    var context = React.useContext(react_1.ReactPartContext);
-    var sections = React.useMemo(function () {
-        var _a;
-        var childs = ((_a = React.Children.map(props.children, function (_) { return _; })) === null || _a === void 0 ? void 0 : _a.filter(react_1.isReactElement)) || [];
-        var isInvalid = !!childs.find(function (_) { return !isValidComponent(_); });
-        if (isInvalid) {
-            throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
-        }
-        var body = childs.find(function (_) { return _.type === Content; });
-        var actions = childs.find(function (_) { return _.type === Actions; });
-        var tab = childs.find(function (_) { return _.type === Tab; });
-        return { body: body, actions: actions, tab: tab };
-    }, [props.children]);
-    React.useEffect(function () {
-        /**
-         * hide or show the default tab behavior based on whether we want to override
-         * with our own React tab.
-         */
-        if (sections.tab) {
-            context.tabPortalElement.hide();
-        }
-        else {
-            context.tabPortalElement.show();
-        }
-    }, [sections.tab]);
-    return (React.createElement(React.Fragment, null,
-        sections.actions &&
-            ReactDOM.createPortal(sections.actions, context.actionsPortalElement),
-        sections.tab &&
-            ReactDOM.createPortal(sections.tab, context.tabPortalElement.element),
-        sections.body || props.children));
-};
-exports.DockviewComponents = {
-    Tab: Tab,
-    Content: Content,
-    Actions: Actions,
-    Panel: Panel,
-};
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockviewComponents = void 0;
+var React = __importStar(require("react"));
+var ReactDOM = __importStar(require("react-dom"));
+var react_1 = require("../react");
+var Tab = function (props) {
+    return React.createElement(React.Fragment, null, props.children);
+};
+var Content = function (props) {
+    return React.createElement(React.Fragment, null, props.children);
+};
+var Actions = function (props) {
+    return React.createElement(React.Fragment, null, props.children);
+};
+function isValidComponent(element) {
+    return [Content, Actions, Tab].find(function (comp) { return element.type === comp; });
+}
+var Panel = function (props) {
+    var context = React.useContext(react_1.ReactPartContext);
+    var sections = React.useMemo(function () {
+        var _a;
+        var childs = ((_a = React.Children.map(props.children, function (_) { return _; })) === null || _a === void 0 ? void 0 : _a.filter(react_1.isReactElement)) || [];
+        var isInvalid = !!childs.find(function (_) { return !isValidComponent(_); });
+        if (isInvalid) {
+            throw new Error('Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab');
+        }
+        var body = childs.find(function (_) { return _.type === Content; });
+        var actions = childs.find(function (_) { return _.type === Actions; });
+        var tab = childs.find(function (_) { return _.type === Tab; });
+        return { body: body, actions: actions, tab: tab };
+    }, [props.children]);
+    React.useEffect(function () {
+        /**
+         * hide or show the default tab behavior based on whether we want to override
+         * with our own React tab.
+         */
+        if (sections.tab) {
+            context.tabPortalElement.hide();
+        }
+        else {
+            context.tabPortalElement.show();
+        }
+    }, [sections.tab]);
+    return (React.createElement(React.Fragment, null,
+        sections.actions &&
+            ReactDOM.createPortal(sections.actions, context.actionsPortalElement),
+        sections.tab &&
+            ReactDOM.createPortal(sections.tab, context.tabPortalElement.element),
+        sections.body || props.children));
+};
+exports.DockviewComponents = {
+    Tab: Tab,
+    Content: Content,
+    Actions: Actions,
+    Panel: Panel,
+};
 //# sourceMappingURL=components.js.map

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

@@ -1,34 +1,34 @@
-import * as React from 'react';
-import { TabContextMenuEvent } from '../../dockview/options';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
-import { DockviewApi } from '../../api/component.api';
-import { PanelCollection, PanelParameters } from '../types';
-export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
-    api: DockviewPanelApi;
-    containerApi: DockviewApi;
-}
-export interface IDockviewPanelProps<T extends {
-    [index: string]: any;
-} = any> extends 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>;
-    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onReady?: (event: DockviewReadyEvent) => void;
-    debug?: boolean;
-    tabHeight?: number;
-    enableExternalDragEvents?: boolean;
-    onTabContextMenu?: (event: TabContextMenuEvent) => void;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
-}
-export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;
+import * as React from 'react';
+import { TabContextMenuEvent } from '../../dockview/options';
+import { DockviewPanelApi } from '../../api/groupPanelApi';
+import { DockviewApi } from '../../api/component.api';
+import { PanelCollection, PanelParameters } from '../types';
+export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
+    api: DockviewPanelApi;
+    containerApi: DockviewApi;
+}
+export interface IDockviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends 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>;
+    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
+    onReady?: (event: DockviewReadyEvent) => void;
+    debug?: boolean;
+    tabHeight?: number;
+    enableExternalDragEvents?: boolean;
+    onTabContextMenu?: (event: TabContextMenuEvent) => void;
+    hideBorders?: boolean;
+    className?: string;
+    disableAutoResizing?: boolean;
+}
+export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/react/dockview/dockview.js

@@ -1,136 +1,136 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DockviewReact = void 0;
-var React = __importStar(require("react"));
-var dockviewComponent_1 = require("../../dockview/dockviewComponent");
-var reactContentPart_1 = require("./reactContentPart");
-var reactHeaderPart_1 = require("./reactHeaderPart");
-var deserializer_1 = require("../deserializer");
-var react_1 = require("../react");
-var component_api_1 = require("../../api/component.api");
-var reactWatermarkPart_1 = require("./reactWatermarkPart");
-var dom_1 = require("../../dom");
-exports.DockviewReact = React.forwardRef(function (props, ref) {
-    var domRef = React.useRef(null);
-    var dockviewRef = React.useRef();
-    var _a = __read((0, react_1.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
-    React.useImperativeHandle(ref, function () { return domRef.current; }, []);
-    React.useEffect(function () {
-        if (props.disableAutoResizing) {
-            return function () {
-                //
-            };
-        }
-        var watcher = (0, dom_1.watchElementResize)(domRef.current, function (entry) {
-            var _a;
-            var _b = entry.contentRect, width = _b.width, height = _b.height;
-            (_a = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-        });
-        return function () {
-            watcher.dispose();
-        };
-    }, [props.disableAutoResizing]);
-    React.useEffect(function () {
-        var _a;
-        var factory = {
-            content: {
-                createComponent: function (id, componentId, component) {
-                    return new reactContentPart_1.ReactPanelContentPart(componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
-            },
-            tab: {
-                createComponent: function (id, componentId, component) {
-                    return new reactHeaderPart_1.ReactPanelHeaderPart(componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
-            },
-            watermark: {
-                createComponent: function (id, componentId, component) {
-                    return new reactWatermarkPart_1.ReactWatermarkPart(componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
-            },
-        };
-        var element = document.createElement('div');
-        var dockview = new dockviewComponent_1.DockviewComponent(element, {
-            frameworkComponentFactory: factory,
-            frameworkComponents: props.components,
-            frameworkTabComponents: props.tabComponents,
-            tabHeight: props.tabHeight,
-            debug: props.debug,
-            enableExternalDragEvents: props.enableExternalDragEvents,
-            watermarkFrameworkComponent: props.watermarkComponent,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
-        dockview.deserializer = new deserializer_1.ReactPanelDeserialzier(dockview);
-        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
-        dockview.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api: new component_api_1.DockviewApi(dockview) });
-        }
-        dockviewRef.current = dockview;
-        return function () {
-            dockview.dispose();
-        };
-    }, []);
-    React.useEffect(function () {
-        if (!props.onTabContextMenu || !dockviewRef.current) {
-            return function () {
-                //noop
-            };
-        }
-        var disposable = dockviewRef.current.onTabContextMenu(function (event) {
-            if (props.onTabContextMenu) {
-                props.onTabContextMenu(event);
-            }
-        });
-        return function () {
-            disposable.dispose();
-        };
-    }, [props.onTabContextMenu]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-exports.DockviewReact.displayName = 'DockviewComponent';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockviewReact = void 0;
+var React = __importStar(require("react"));
+var dockviewComponent_1 = require("../../dockview/dockviewComponent");
+var reactContentPart_1 = require("./reactContentPart");
+var reactHeaderPart_1 = require("./reactHeaderPart");
+var deserializer_1 = require("../deserializer");
+var react_1 = require("../react");
+var component_api_1 = require("../../api/component.api");
+var reactWatermarkPart_1 = require("./reactWatermarkPart");
+var dom_1 = require("../../dom");
+exports.DockviewReact = React.forwardRef(function (props, ref) {
+    var domRef = React.useRef(null);
+    var dockviewRef = React.useRef();
+    var _a = __read((0, react_1.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
+    React.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    React.useEffect(function () {
+        if (props.disableAutoResizing) {
+            return function () {
+                //
+            };
+        }
+        var watcher = (0, dom_1.watchElementResize)(domRef.current, function (entry) {
+            var _a;
+            var _b = entry.contentRect, width = _b.width, height = _b.height;
+            (_a = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+        });
+        return function () {
+            watcher.dispose();
+        };
+    }, [props.disableAutoResizing]);
+    React.useEffect(function () {
+        var _a;
+        var factory = {
+            content: {
+                createComponent: function (id, componentId, component) {
+                    return new reactContentPart_1.ReactPanelContentPart(componentId, component, {
+                        addPortal: addPortal,
+                    });
+                },
+            },
+            tab: {
+                createComponent: function (id, componentId, component) {
+                    return new reactHeaderPart_1.ReactPanelHeaderPart(componentId, component, {
+                        addPortal: addPortal,
+                    });
+                },
+            },
+            watermark: {
+                createComponent: function (id, componentId, component) {
+                    return new reactWatermarkPart_1.ReactWatermarkPart(componentId, component, {
+                        addPortal: addPortal,
+                    });
+                },
+            },
+        };
+        var element = document.createElement('div');
+        var dockview = new dockviewComponent_1.DockviewComponent(element, {
+            frameworkComponentFactory: factory,
+            frameworkComponents: props.components,
+            frameworkTabComponents: props.tabComponents,
+            tabHeight: props.tabHeight,
+            debug: props.debug,
+            enableExternalDragEvents: props.enableExternalDragEvents,
+            watermarkFrameworkComponent: props.watermarkComponent,
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+        });
+        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
+        dockview.deserializer = new deserializer_1.ReactPanelDeserialzier(dockview);
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        dockview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new component_api_1.DockviewApi(dockview) });
+        }
+        dockviewRef.current = dockview;
+        return function () {
+            dockview.dispose();
+        };
+    }, []);
+    React.useEffect(function () {
+        if (!props.onTabContextMenu || !dockviewRef.current) {
+            return function () {
+                //noop
+            };
+        }
+        var disposable = dockviewRef.current.onTabContextMenu(function (event) {
+            if (props.onTabContextMenu) {
+                props.onTabContextMenu(event);
+            }
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onTabContextMenu]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.DockviewReact.displayName = 'DockviewComponent';
 //# sourceMappingURL=dockview.js.map