dockview - npm Package Compare versions

Comparing version 2.1.4 to 3.0.0

dist/cjs/dockview/dockview.d.ts

 import React from 'react';
 import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent } from 'dockview-core';
 export interface IDockviewReactProps extends DockviewOptions {
-    className?: string;
     tabComponents?: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>;
@@ -6,0 +5,0 @@ components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;

dist/cjs/dockview/dockview.js

@@ -50,3 +50,3 @@ "use strict";
 function extractCoreOptions(props) {
-    var coreOptions = dockview_core_1.PROPERTY_KEYS.reduce(function (obj, key) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS_DOCKVIEW.reduce(function (obj, key) {
         if (key in props) {
@@ -67,3 +67,3 @@ obj[key] = props[key];
         var changes = {};
-        dockview_core_1.PROPERTY_KEYS.forEach(function (propKey) {
+        dockview_core_1.PROPERTY_KEYS_DOCKVIEW.forEach(function (propKey) {
             var key = propKey;
@@ -82,3 +82,3 @@ var propValue = props[key];
         prevProps.current = props;
-    }, dockview_core_1.PROPERTY_KEYS.map(function (key) { return props[key]; }));
+    }, dockview_core_1.PROPERTY_KEYS_DOCKVIEW.map(function (key) { return props[key]; }));
     react_1.default.useEffect(function () {
@@ -85,0 +85,0 @@ var _a;

dist/cjs/dockview/headerActionsRenderer.js

@@ -13,3 +13,3 @@ "use strict";
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -16,0 +16,0 @@ this._element.style.width = '100%';

dist/cjs/dockview/reactContentPart.js

@@ -16,3 +16,3 @@ "use strict";
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -19,0 +19,0 @@ this._element.style.width = '100%';

dist/cjs/dockview/reactHeaderPart.js

@@ -11,3 +11,3 @@ "use strict";
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -14,0 +14,0 @@ this._element.style.width = '100%';

dist/cjs/dockview/reactWatermarkPart.js

@@ -11,3 +11,3 @@ "use strict";
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -14,0 +14,0 @@ this._element.style.width = '100%';

dist/cjs/gridview/gridview.d.ts

 import React from 'react';
-import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { GridviewPanelApi, GridviewApi, GridviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
@@ -13,11 +13,6 @@ export interface GridviewReadyEvent {
 }
-export interface IGridviewReactProps {
-    orientation?: Orientation;
+export interface IGridviewReactProps extends GridviewOptions {
     onReady: (event: GridviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
-    hideBorders?: boolean;
-    className?: string;
-    proportionalLayout?: boolean;
-    disableAutoResizing?: boolean;
 }
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;

dist/cjs/gridview/gridview.js

 "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) {
@@ -27,2 +38,11 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 var react_2 = require("../react");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_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) {
@@ -33,4 +53,21 @@ var domRef = react_1.default.useRef(null);
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
     react_1.default.useEffect(function () {
-        var _a;
+        var changes = {};
+        dockview_core_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_core_1.PROPERTY_KEYS_GRIDVIEW.map(function (key) { return props[key]; }));
+    react_1.default.useEffect(function () {
         if (!domRef.current) {
@@ -41,21 +78,9 @@ return function () {
         }
-        var api = (0, dockview_core_1.createGridview)(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : dockview_core_1.Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkComponentFactory: {
-                createComponent: function (id, componentId, component) {
-                    return new view_1.ReactGridPanelView(id, componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
+        var frameworkOptions = {
+            createComponent: function (options) {
+                return new view_1.ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
             },
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        };
+        var api = (0, dockview_core_1.createGridview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
         api.layout(clientWidth, clientHeight);
@@ -75,3 +100,5 @@ if (props.onReady) {
         gridviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: function (options) {
+                return new view_1.ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
         });
@@ -78,0 +105,0 @@ }, [props.components]);

dist/cjs/paneview/paneview.d.ts

 import React from 'react';
-import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PaneviewPanelApi, PaneviewApi, PaneviewDropEvent, PaneviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
@@ -14,12 +14,8 @@ export interface PaneviewReadyEvent {
 }
-export interface IPaneviewReactProps {
+export interface IPaneviewReactProps extends PaneviewOptions {
     onReady: (event: PaneviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
     headerComponents?: Record<string, React.FunctionComponent<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>>;

dist/cjs/paneview/paneview.js

@@ -38,2 +38,11 @@ "use strict";
 var view_1 = require("./view");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_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) {
@@ -44,26 +53,38 @@ var domRef = react_1.default.useRef(null);
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
     react_1.default.useEffect(function () {
-        var createComponent = function (id, _componentId, component) {
-            return new view_1.PanePanelSection(id, component, {
-                addPortal: addPortal,
-            });
+        var changes = {};
+        dockview_core_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_core_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_core_1.createPaneview)(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            frameworkComponents: props.components,
-            components: {},
-            headerComponents: {},
-            disableDnd: props.disableDnd,
-            headerframeworkComponents: props.headerComponents,
-            frameworkWrapper: {
-                header: {
-                    createComponent: createComponent,
-                },
-                body: {
-                    createComponent: createComponent,
-                },
-            },
-            showDndOverlay: props.showDndOverlay,
-        });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        var api = (0, dockview_core_1.createPaneview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         api.layout(clientWidth, clientHeight);
@@ -83,11 +104,17 @@ if (props.onReady) {
         paneviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            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({
-            headerframeworkComponents: props.headerComponents,
+            createHeaderComponent: function (options) {
+                return new view_1.PanePanelSection(options.id, headerComponents[options.name], { addPortal: addPortal });
+            },
         });
@@ -98,9 +125,8 @@ }, [props.headerComponents]);
             return function () {
-                //
+                // noop
             };
         }
-        var api = paneviewRef.current;
-        var disposable = api.onDidDrop(function (event) {
+        var disposable = paneviewRef.current.onDidDrop(function (event) {
             if (props.onDidDrop) {
-                props.onDidDrop(__assign(__assign({}, event), { api: api }));
+                props.onDidDrop(event);
             }
@@ -112,12 +138,4 @@ });
     }, [props.onDidDrop]);
-    react_1.default.useEffect(function () {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
-    }, [props.showDndOverlay]);
     return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.PaneviewReact.displayName = 'PaneviewComponent';

dist/cjs/paneview/view.d.ts

 import React from 'react';
-import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
+import { PanelUpdateEvent, IPanePart, PanePanelComponentInitParameter } from 'dockview-core';
 import { ReactPortalStore } from '../react';
 import { IPaneviewPanelProps } from './paneview';
-export declare class PanePanelSection implements IPaneBodyPart {
+export declare class PanePanelSection implements IPanePart {
     readonly id: string;
@@ -7,0 +7,0 @@ private readonly component;

dist/cjs/splitview/splitview.d.ts

 import React from 'react';
-import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
+import { SplitviewApi, SplitviewPanelApi, SplitviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
@@ -13,11 +13,6 @@ export interface SplitviewReadyEvent {
 }
-export interface ISplitviewReactProps {
-    orientation?: Orientation;
+export interface ISplitviewReactProps extends SplitviewOptions {
     onReady: (event: SplitviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
-    proportionalLayout?: boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
 }
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;

dist/cjs/splitview/splitview.js

 "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) {
@@ -27,2 +38,11 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 var view_1 = require("./view");
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS_SPLITVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 exports.SplitviewReact = react_1.default.forwardRef(function (props, ref) {
@@ -33,23 +53,33 @@ var domRef = react_1.default.useRef(null);
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
     react_1.default.useEffect(function () {
-        var _a;
-        var api = (0, dockview_core_1.createSplitview)(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : dockview_core_1.Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkWrapper: {
-                createComponent: function (id, componentId, component) {
-                    return new view_1.ReactPanelView(id, componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
+        var changes = {};
+        dockview_core_1.PROPERTY_KEYS_SPLITVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (splitviewRef.current) {
+            splitviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_core_1.PROPERTY_KEYS_SPLITVIEW.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.ReactPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
             },
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
-        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        };
+        var api = (0, dockview_core_1.createSplitview)(domRef.current, __assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
         api.layout(clientWidth, clientHeight);
@@ -69,3 +99,5 @@ if (props.onReady) {
         splitviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: function (options) {
+                return new view_1.ReactPanelView(options.id, options.name, props.components[options.name], { addPortal: addPortal });
+            },
         });
@@ -72,0 +104,0 @@ }, [props.components]);

dist/esm/dockview/dockview.d.ts

 import React from 'react';
 import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent } from 'dockview-core';
 export interface IDockviewReactProps extends DockviewOptions {
-    className?: string;
     tabComponents?: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>;
@@ -6,0 +5,0 @@ components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;

dist/esm/dockview/dockview.js

 import React from 'react';
-import { PROPERTY_KEYS, createDockview, } from 'dockview-core';
+import { PROPERTY_KEYS_DOCKVIEW, createDockview, } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
@@ -17,3 +17,3 @@ import { ReactPanelHeaderPart } from './reactHeaderPart';
 function extractCoreOptions(props) {
-    const coreOptions = PROPERTY_KEYS.reduce((obj, key) => {
+    const coreOptions = PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
         if (key in props) {
@@ -34,3 +34,3 @@ obj[key] = props[key];
         const changes = {};
-        PROPERTY_KEYS.forEach((propKey) => {
+        PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
             const key = propKey;
@@ -49,3 +49,3 @@ const propValue = props[key];
         prevProps.current = props;
-    }, PROPERTY_KEYS.map((key) => props[key]));
+    }, PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
     React.useEffect(() => {
@@ -52,0 +52,0 @@ var _a;

dist/esm/dockview/headerActionsRenderer.js

@@ -16,3 +16,3 @@ import { ReactPart } from '../react';
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -19,0 +19,0 @@ this._element.style.width = '100%';

dist/esm/dockview/reactContentPart.js

@@ -16,3 +16,3 @@ import { ReactPart } from '../react';
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -19,0 +19,0 @@ this._element.style.width = '100%';

dist/esm/dockview/reactHeaderPart.js

@@ -11,3 +11,3 @@ import { ReactPart } from '../react';
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -14,0 +14,0 @@ this._element.style.width = '100%';

dist/esm/dockview/reactWatermarkPart.js

@@ -11,3 +11,3 @@ import { ReactPart } from '../react';
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
@@ -14,0 +14,0 @@ this._element.style.width = '100%';

dist/esm/gridview/gridview.d.ts

 import React from 'react';
-import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { GridviewPanelApi, GridviewApi, GridviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
@@ -13,11 +13,6 @@ export interface GridviewReadyEvent {
 }
-export interface IGridviewReactProps {
-    orientation?: Orientation;
+export interface IGridviewReactProps extends GridviewOptions {
     onReady: (event: GridviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
-    hideBorders?: boolean;
-    className?: string;
-    proportionalLayout?: boolean;
-    disableAutoResizing?: boolean;
 }
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;

dist/esm/gridview/gridview.js

 import React from 'react';
-import { Orientation, createGridview, } from 'dockview-core';
+import { createGridview, PROPERTY_KEYS_GRIDVIEW, } from 'dockview-core';
 import { ReactGridPanelView } from './view';
 import { usePortalsLifecycle } from '../react';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 export const GridviewReact = React.forwardRef((props, ref) => {
@@ -10,4 +19,21 @@ const domRef = React.useRef(null);
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
     React.useEffect(() => {
-        var _a;
+        const changes = {};
+        PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
+            const key = propKey;
+            const 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;
+    }, PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
+    React.useEffect(() => {
         if (!domRef.current) {
@@ -18,20 +44,8 @@ return () => {
         }
-        const api = createGridview(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkComponentFactory: {
-                createComponent: (id, componentId, component) => {
-                    return new ReactGridPanelView(id, componentId, component, {
-                        addPortal,
-                    });
-                },
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
             },
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
+        };
+        const api = createGridview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
@@ -52,3 +66,5 @@ api.layout(clientWidth, clientHeight);
         gridviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
         });
@@ -55,0 +71,0 @@ }, [props.components]);

dist/esm/paneview/paneview.d.ts

 import React from 'react';
-import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PaneviewPanelApi, PaneviewApi, PaneviewDropEvent, PaneviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
@@ -14,12 +14,8 @@ export interface PaneviewReadyEvent {
 }
-export interface IPaneviewReactProps {
+export interface IPaneviewReactProps extends PaneviewOptions {
     onReady: (event: PaneviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
     headerComponents?: Record<string, React.FunctionComponent<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>>;

dist/esm/paneview/paneview.js

 import React from 'react';
-import { createPaneview, } from 'dockview-core';
+import { createPaneview, PROPERTY_KEYS_PANEVIEW, } from 'dockview-core';
 import { usePortalsLifecycle } from '../react';
 import { PanePanelSection } from './view';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 export const PaneviewReact = React.forwardRef((props, ref) => {
@@ -10,23 +19,37 @@ const domRef = React.useRef(null);
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
     React.useEffect(() => {
-        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
-            addPortal,
+        const changes = {};
+        PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
         });
-        const api = createPaneview(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            frameworkComponents: props.components,
-            components: {},
-            headerComponents: {},
-            disableDnd: props.disableDnd,
-            headerframeworkComponents: props.headerComponents,
-            frameworkWrapper: {
-                header: {
-                    createComponent,
-                },
-                body: {
-                    createComponent,
-                },
+        if (paneviewRef.current) {
+            paneviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        var _a;
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
             },
-            showDndOverlay: props.showDndOverlay,
-        });
+            createHeaderComponent: (options) => {
+                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+            },
+        };
+        const api = createPaneview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
@@ -47,11 +70,17 @@ api.layout(clientWidth, clientHeight);
         paneviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
+            },
         });
     }, [props.components]);
     React.useEffect(() => {
+        var _a;
         if (!paneviewRef.current) {
             return;
         }
+        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
         paneviewRef.current.updateOptions({
-            headerframeworkComponents: props.headerComponents,
+            createHeaderComponent: (options) => {
+                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
+            },
         });
@@ -62,9 +91,8 @@ }, [props.headerComponents]);
             return () => {
-                //
+                // noop
             };
         }
-        const api = paneviewRef.current;
-        const disposable = api.onDidDrop((event) => {
+        const disposable = paneviewRef.current.onDidDrop((event) => {
             if (props.onDidDrop) {
-                props.onDidDrop(Object.assign(Object.assign({}, event), { api }));
+                props.onDidDrop(event);
             }
@@ -76,12 +104,4 @@ });
     }, [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';

dist/esm/paneview/view.d.ts

 import React from 'react';
-import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
+import { PanelUpdateEvent, IPanePart, PanePanelComponentInitParameter } from 'dockview-core';
 import { ReactPortalStore } from '../react';
 import { IPaneviewPanelProps } from './paneview';
-export declare class PanePanelSection implements IPaneBodyPart {
+export declare class PanePanelSection implements IPanePart {
     readonly id: string;
@@ -7,0 +7,0 @@ private readonly component;

dist/esm/splitview/splitview.d.ts

 import React from 'react';
-import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
+import { SplitviewApi, SplitviewPanelApi, SplitviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
@@ -13,11 +13,6 @@ export interface SplitviewReadyEvent {
 }
-export interface ISplitviewReactProps {
-    orientation?: Orientation;
+export interface ISplitviewReactProps extends SplitviewOptions {
     onReady: (event: SplitviewReadyEvent) => void;
     components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
-    proportionalLayout?: boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
 }
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;

dist/esm/splitview/splitview.js

 import React from 'react';
-import { Orientation, createSplitview, } from 'dockview-core';
+import { createSplitview, PROPERTY_KEYS_SPLITVIEW, } from 'dockview-core';
 import { usePortalsLifecycle } from '../react';
 import { ReactPanelView } from './view';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 export const SplitviewReact = React.forwardRef((props, ref) => {
@@ -10,22 +19,32 @@ const domRef = React.useRef(null);
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
     React.useEffect(() => {
-        var _a;
-        const api = createSplitview(domRef.current, {
-            disableAutoResizing: props.disableAutoResizing,
-            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            frameworkComponents: props.components,
-            frameworkWrapper: {
-                createComponent: (id, componentId, component) => {
-                    return new ReactPanelView(id, componentId, component, {
-                        addPortal,
-                    });
-                },
+        const changes = {};
+        PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
+            const key = propKey;
+            const propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (splitviewRef.current) {
+            splitviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
+    React.useEffect(() => {
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const frameworkOptions = {
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
             },
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-        });
+        };
+        const api = createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
@@ -46,3 +65,5 @@ api.layout(clientWidth, clientHeight);
         splitviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
         });
@@ -49,0 +70,0 @@ }, [props.components]);

package.json

 {
   "name": "dockview",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
@@ -57,3 +57,3 @@ "keywords": [
   "dependencies": {
-    "dockview-core": "^2.1.4"
+    "dockview-core": "^3.0.0"
   },
@@ -60,0 +60,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12584389

increased by0.02%

Lines of code

72916

increased by0.51%

Dependency changes

• + Addeddockview-core@3.0.0(transitive)

• - Removeddockview-core@2.1.4(transitive)

• Updateddockview-core@^3.0.0