dockview 1.5.1 → 1.6.0

package/dist/cjs/react/react.js

@@ -1,195 +1,195 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isReactElement = exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
-var React = __importStar(require("react"));
-var ReactDOM = __importStar(require("react-dom"));
-var math_1 = require("../math");
-/**
- * This component is intended to interface between vanilla-js and React hence we need to be
- * creative in how we update props.
- * A ref of the component is exposed with an update method; which when called stores the props
- * as a ref within this component and forcefully triggers a re-render of the component using
- * the ref of props we just set on the renderered component as the props passed to the inner
- * component
- */
-var ReactComponentBridge = function (props, ref) {
-    var _a = __read(React.useState(), 2), _ = _a[0], triggerRender = _a[1];
-    var _props = React.useRef(props.componentProps);
-    React.useImperativeHandle(ref, function () { return ({
-        update: function (componentProps) {
-            _props.current = __assign(__assign({}, _props.current), componentProps);
-            /**
-             * setting a arbitrary piece of state within this component will
-             * trigger a re-render.
-             * we use this rather than updating through a prop since we can
-             * pass a ref into the vanilla-js world.
-             */
-            triggerRender(Date.now());
-        },
-    }); }, []);
-    return React.createElement(props.component, _props.current);
-};
-ReactComponentBridge.displayName = 'DockviewReactJsBridge';
-/**
- * Since we are storing the React.Portal references in a rendered array they
- * require a key property like any other React element rendered in an array
- * to prevent excessive re-rendering
- */
-var uniquePortalKeyGenerator = (0, math_1.sequentialNumberGenerator)();
-exports.ReactPartContext = React.createContext({});
-var ReactPart = /** @class */ (function () {
-    function ReactPart(parent, portalStore, component, parameters, context) {
-        this.parent = parent;
-        this.portalStore = portalStore;
-        this.component = component;
-        this.parameters = parameters;
-        this.context = context;
-        this._initialProps = {};
-        this.disposed = false;
-        this.createPortal();
-    }
-    ReactPart.prototype.update = function (props) {
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        if (!this.componentInstance) {
-            // if the component is yet to be mounted store the props
-            this._initialProps = __assign(__assign({}, this._initialProps), props);
-        }
-        else {
-            this.componentInstance.update(props);
-        }
-    };
-    ReactPart.prototype.createPortal = function () {
-        var _this = this;
-        if (this.disposed) {
-            throw new Error('invalid operation: resource is already disposed');
-        }
-        if (typeof this.component !== 'function') {
-            /**
-             * we know this isn't a React.FunctionComponent so throw an error here.
-             * if we do not intercept this the React library will throw a very obsure error
-             * for the same reason, at least at this point we will emit a sensible stacktrace.
-             */
-            throw new Error('Invalid Operation. dockview only supports React Functional Components.');
-        }
-        var bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
-            component: this
-                .component,
-            componentProps: this.parameters,
-            ref: function (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
-                }
-            },
-        });
-        var node = this.context
-            ? React.createElement(exports.ReactPartContext.Provider, { value: this.context }, bridgeComponent)
-            : bridgeComponent;
-        var portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
-        this.ref = {
-            portal: portal,
-            disposable: this.portalStore.addPortal(portal),
-        };
-    };
-    ReactPart.prototype.dispose = function () {
-        var _a;
-        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
-        this.disposed = true;
-    };
-    return ReactPart;
-}());
-exports.ReactPart = ReactPart;
-/**
- * A React Hook that returns an array of portals to be rendered by the user of this hook
- * and a disposable function to add a portal. Calling dispose removes this portal from the
- * portal array
- */
-var usePortalsLifecycle = function () {
-    var _a = __read(React.useState([]), 2), portals = _a[0], setPortals = _a[1];
-    React.useDebugValue("Portal count: ".concat(portals.length));
-    var addPortal = React.useCallback(function (portal) {
-        setPortals(function (existingPortals) { return __spreadArray(__spreadArray([], __read(existingPortals), false), [portal], false); });
-        var disposed = false;
-        return {
-            dispose: function () {
-                if (disposed) {
-                    throw new Error('invalid operation: resource already disposed');
-                }
-                disposed = true;
-                setPortals(function (existingPortals) {
-                    return existingPortals.filter(function (p) { return p !== portal; });
-                });
-            },
-        };
-    }, []);
-    return [portals, addPortal];
-};
-exports.usePortalsLifecycle = usePortalsLifecycle;
-// it does the job...
-function isReactElement(element) {
-    return element === null || element === void 0 ? void 0 : element.type;
-}
-exports.isReactElement = isReactElement;
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isReactElement = exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
+var React = __importStar(require("react"));
+var ReactDOM = __importStar(require("react-dom"));
+var math_1 = require("../math");
+/**
+ * This component is intended to interface between vanilla-js and React hence we need to be
+ * creative in how we update props.
+ * A ref of the component is exposed with an update method; which when called stores the props
+ * as a ref within this component and forcefully triggers a re-render of the component using
+ * the ref of props we just set on the renderered component as the props passed to the inner
+ * component
+ */
+var ReactComponentBridge = function (props, ref) {
+    var _a = __read(React.useState(), 2), _ = _a[0], triggerRender = _a[1];
+    var _props = React.useRef(props.componentProps);
+    React.useImperativeHandle(ref, function () { return ({
+        update: function (componentProps) {
+            _props.current = __assign(__assign({}, _props.current), componentProps);
+            /**
+             * setting a arbitrary piece of state within this component will
+             * trigger a re-render.
+             * we use this rather than updating through a prop since we can
+             * pass a ref into the vanilla-js world.
+             */
+            triggerRender(Date.now());
+        },
+    }); }, []);
+    return React.createElement(props.component, _props.current);
+};
+ReactComponentBridge.displayName = 'DockviewReactJsBridge';
+/**
+ * Since we are storing the React.Portal references in a rendered array they
+ * require a key property like any other React element rendered in an array
+ * to prevent excessive re-rendering
+ */
+var uniquePortalKeyGenerator = (0, math_1.sequentialNumberGenerator)();
+exports.ReactPartContext = React.createContext({});
+var ReactPart = /** @class */ (function () {
+    function ReactPart(parent, portalStore, component, parameters, context) {
+        this.parent = parent;
+        this.portalStore = portalStore;
+        this.component = component;
+        this.parameters = parameters;
+        this.context = context;
+        this._initialProps = {};
+        this.disposed = false;
+        this.createPortal();
+    }
+    ReactPart.prototype.update = function (props) {
+        if (this.disposed) {
+            throw new Error('invalid operation: resource is already disposed');
+        }
+        if (!this.componentInstance) {
+            // if the component is yet to be mounted store the props
+            this._initialProps = __assign(__assign({}, this._initialProps), props);
+        }
+        else {
+            this.componentInstance.update(props);
+        }
+    };
+    ReactPart.prototype.createPortal = function () {
+        var _this = this;
+        if (this.disposed) {
+            throw new Error('invalid operation: resource is already disposed');
+        }
+        if (typeof this.component !== 'function') {
+            /**
+             * we know this isn't a React.FunctionComponent so throw an error here.
+             * if we do not intercept this the React library will throw a very obsure error
+             * for the same reason, at least at this point we will emit a sensible stacktrace.
+             */
+            throw new Error('Invalid Operation. dockview only supports React Functional Components.');
+        }
+        var bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
+            component: this
+                .component,
+            componentProps: this.parameters,
+            ref: function (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
+                }
+            },
+        });
+        var node = this.context
+            ? React.createElement(exports.ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+            : bridgeComponent;
+        var portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+        this.ref = {
+            portal: portal,
+            disposable: this.portalStore.addPortal(portal),
+        };
+    };
+    ReactPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
+        this.disposed = true;
+    };
+    return ReactPart;
+}());
+exports.ReactPart = ReactPart;
+/**
+ * A React Hook that returns an array of portals to be rendered by the user of this hook
+ * and a disposable function to add a portal. Calling dispose removes this portal from the
+ * portal array
+ */
+var usePortalsLifecycle = function () {
+    var _a = __read(React.useState([]), 2), portals = _a[0], setPortals = _a[1];
+    React.useDebugValue("Portal count: ".concat(portals.length));
+    var addPortal = React.useCallback(function (portal) {
+        setPortals(function (existingPortals) { return __spreadArray(__spreadArray([], __read(existingPortals), false), [portal], false); });
+        var disposed = false;
+        return {
+            dispose: function () {
+                if (disposed) {
+                    throw new Error('invalid operation: resource already disposed');
+                }
+                disposed = true;
+                setPortals(function (existingPortals) {
+                    return existingPortals.filter(function (p) { return p !== portal; });
+                });
+            },
+        };
+    }, []);
+    return [portals, addPortal];
+};
+exports.usePortalsLifecycle = usePortalsLifecycle;
+// it does the job...
+function isReactElement(element) {
+    return element === null || element === void 0 ? void 0 : element.type;
+}
+exports.isReactElement = isReactElement;
 //# sourceMappingURL=react.js.map

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

@@ -1,24 +1,24 @@
-import * as React from 'react';
-import { SplitviewApi } from '../../api/component.api';
-import { SplitviewPanelApi } from '../../api/splitviewPanelApi';
-import { Orientation } from '../../splitview/core/splitview';
-import { PanelCollection, PanelParameters } from '../types';
-export interface SplitviewReadyEvent {
-    api: SplitviewApi;
-}
-export interface ISplitviewPanelProps<T extends {
-    [index: string]: any;
-} = any> extends PanelParameters<T> {
-    api: SplitviewPanelApi;
-    containerApi: SplitviewApi;
-}
-export interface ISplitviewReactProps {
-    orientation?: Orientation;
-    onReady: (event: SplitviewReadyEvent) => void;
-    components: PanelCollection<ISplitviewPanelProps>;
-    proportionalLayout?: boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
-}
-export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
+import * as React from 'react';
+import { SplitviewApi } from '../../api/component.api';
+import { SplitviewPanelApi } from '../../api/splitviewPanelApi';
+import { Orientation } from '../../splitview/core/splitview';
+import { PanelCollection, PanelParameters } from '../types';
+export interface SplitviewReadyEvent {
+    api: SplitviewApi;
+}
+export interface ISplitviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: SplitviewPanelApi;
+    containerApi: SplitviewApi;
+}
+export interface ISplitviewReactProps {
+    orientation?: Orientation;
+    onReady: (event: SplitviewReadyEvent) => void;
+    components: PanelCollection<ISplitviewPanelProps>;
+    proportionalLayout?: boolean;
+    hideBorders?: boolean;
+    className?: string;
+    disableAutoResizing?: boolean;
+}
+export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/react/splitview/splitview.js

@@ -1,109 +1,109 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.SplitviewReact = void 0;
-var React = __importStar(require("react"));
-var component_api_1 = require("../../api/component.api");
-var splitviewComponent_1 = require("../../splitview/splitviewComponent");
-var splitview_1 = require("../../splitview/core/splitview");
-var react_1 = require("../react");
-var view_1 = require("./view");
-var dom_1 = require("../../dom");
-exports.SplitviewReact = React.forwardRef(function (props, ref) {
-    var domRef = React.useRef(null);
-    var splitviewRef = 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 = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-        });
-        return function () {
-            watcher.dispose();
-        };
-    }, [props.disableAutoResizing]);
-    React.useEffect(function () {
-        var splitview = new splitviewComponent_1.SplitviewComponent(domRef.current, {
-            orientation: props.orientation || splitview_1.Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkWrapper: {
-                createComponent: function (id, componentId, component) {
-                    return new view_1.ReactPanelView(id, componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
-            },
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
-        splitview.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api: new component_api_1.SplitviewApi(splitview) });
-        }
-        splitviewRef.current = splitview;
-        return function () {
-            splitview.dispose();
-        };
-    }, []);
-    React.useEffect(function () {
-        if (!splitviewRef.current) {
-            return;
-        }
-        splitviewRef.current.updateOptions({
-            frameworkComponents: props.components,
-        });
-    }, [props.components]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-exports.SplitviewReact.displayName = 'SplitviewComponent';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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.SplitviewReact = void 0;
+var React = __importStar(require("react"));
+var component_api_1 = require("../../api/component.api");
+var splitviewComponent_1 = require("../../splitview/splitviewComponent");
+var splitview_1 = require("../../splitview/core/splitview");
+var react_1 = require("../react");
+var view_1 = require("./view");
+var dom_1 = require("../../dom");
+exports.SplitviewReact = React.forwardRef(function (props, ref) {
+    var domRef = React.useRef(null);
+    var splitviewRef = 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 = splitviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+        });
+        return function () {
+            watcher.dispose();
+        };
+    }, [props.disableAutoResizing]);
+    React.useEffect(function () {
+        var splitview = new splitviewComponent_1.SplitviewComponent(domRef.current, {
+            orientation: props.orientation || splitview_1.Orientation.HORIZONTAL,
+            frameworkComponents: props.components,
+            frameworkWrapper: {
+                createComponent: function (id, componentId, component) {
+                    return new view_1.ReactPanelView(id, componentId, component, {
+                        addPortal: addPortal,
+                    });
+                },
+            },
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+        });
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        splitview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new component_api_1.SplitviewApi(splitview) });
+        }
+        splitviewRef.current = splitview;
+        return function () {
+            splitview.dispose();
+        };
+    }, []);
+    React.useEffect(function () {
+        if (!splitviewRef.current) {
+            return;
+        }
+        splitviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.SplitviewReact.displayName = 'SplitviewComponent';
 //# sourceMappingURL=splitview.js.map