dockview 2.1.4 → 3.0.0

package/dist/esm/dockview/dockview.d.ts

@@ -1,7 +1,6 @@
 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>>;
     components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;

package/dist/esm/dockview/dockview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PROPERTY_KEYS, createDockview, } from 'dockview-core';
+import { PROPERTY_KEYS_DOCKVIEW, createDockview, } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
 import { usePortalsLifecycle } from '../react';
@@ -14,7 +14,7 @@ function createGroupControlElement(component, store) {
 }
 const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
 function extractCoreOptions(props) {
-    const coreOptions = PROPERTY_KEYS.reduce((obj, key) => {
+    const coreOptions = PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
         if (key in props) {
             obj[key] = props[key];
         }
@@ -30,7 +30,7 @@ export const DockviewReact = React.forwardRef((props, ref) => {
     const prevProps = React.useRef({});
     React.useEffect(() => {
         const changes = {};
-        PROPERTY_KEYS.forEach((propKey) => {
+        PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
             const key = propKey;
             const propValue = props[key];
             if (key in props && propValue !== prevProps.current[key]) {
@@ -44,7 +44,7 @@ export const DockviewReact = React.forwardRef((props, ref) => {
             // not yet fully initialized
         }
         prevProps.current = props;
-    }, PROPERTY_KEYS.map((key) => props[key]));
+    }, PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
     React.useEffect(() => {
         var _a;
         if (!domRef.current) {

package/dist/esm/dockview/headerActionsRenderer.js

@@ -13,7 +13,7 @@ export class ReactHeaderActionsRendererPart {
         this._group = _group;
         this.mutableDisposable = new DockviewMutableDisposable();
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/esm/dockview/reactContentPart.js

@@ -13,7 +13,7 @@ export class ReactPanelContentPart {
         this._onDidBlur = new DockviewEmitter();
         this.onDidBlur = this._onDidBlur.event;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/esm/dockview/reactHeaderPart.js

@@ -8,7 +8,7 @@ export class ReactPanelHeaderPart {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

package/dist/esm/dockview/reactWatermarkPart.js

@@ -8,7 +8,7 @@ export class ReactWatermarkPart {
         this.component = component;
         this.reactPortalStore = reactPortalStore;
         this._element = document.createElement('div');
-        this._element.className = 'dockview-react-part';
+        this._element.className = 'dv-react-part';
         this._element.style.height = '100%';
         this._element.style.width = '100%';
     }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { GridviewPanelApi, GridviewApi, GridviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
 export interface GridviewReadyEvent {
     api: GridviewApi;
@@ -10,13 +10,8 @@ export interface IGridviewPanelProps<T extends {
     api: GridviewPanelApi;
     containerApi: GridviewApi;
 }
-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>>;

package/dist/esm/gridview/gridview.js

@@ -1,37 +1,51 @@
 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) => {
     const domRef = React.useRef(null);
     const gridviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
+    React.useEffect(() => {
+        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(() => {
-        var _a;
         if (!domRef.current) {
             return () => {
                 // noop
             };
         }
-        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;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -47,7 +61,9 @@ export const GridviewReact = React.forwardRef((props, ref) => {
             return;
         }
         gridviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
         });
     }, [props.components]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PaneviewPanelApi, PaneviewApi, PaneviewDropEvent, PaneviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
@@ -11,14 +11,10 @@ export interface IPaneviewPanelProps<T extends {
     containerApi: PaneviewApi;
     title: string;
 }
-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>>;

package/dist/esm/paneview/paneview.js

@@ -1,33 +1,56 @@
 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) => {
     const domRef = React.useRef(null);
     const paneviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     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;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -43,41 +66,38 @@ export const PaneviewReact = React.forwardRef((props, ref) => {
             return;
         }
         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 });
+            },
         });
     }, [props.headerComponents]);
     React.useEffect(() => {
         if (!paneviewRef.current) {
             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);
             }
         });
         return () => {
             disposable.dispose();
         };
     }, [props.onDidDrop]);
-    React.useEffect(() => {
-        if (!paneviewRef.current) {
-            return;
-        }
-        paneviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
-    }, [props.showDndOverlay]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 PaneviewReact.displayName = 'PaneviewComponent';

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

@@ -1,8 +1,8 @@
 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;
     private readonly component;
     private readonly reactPortalStore;

package/dist/esm/splitview/splitview.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
+import { SplitviewApi, SplitviewPanelApi, SplitviewOptions } from 'dockview-core';
 import { PanelParameters } from '../types';
 export interface SplitviewReadyEvent {
     api: SplitviewApi;
@@ -10,13 +10,8 @@ export interface ISplitviewPanelProps<T extends {
     api: SplitviewPanelApi;
     containerApi: SplitviewApi;
 }
-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>>;

package/dist/esm/splitview/splitview.js

@@ -1,32 +1,51 @@
 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) => {
     const domRef = React.useRef(null);
     const splitviewRef = React.useRef();
     const [portals, addPortal] = usePortalsLifecycle();
     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,
-                    });
-                },
-            },
-            proportionalLayout: typeof props.proportionalLayout === 'boolean'
-                ? props.proportionalLayout
-                : true,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
+        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 });
+            },
+        };
+        const api = createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
         api.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -42,7 +61,9 @@ export const SplitviewReact = React.forwardRef((props, ref) => {
             return;
         }
         splitviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+            createComponent: (options) => {
+                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
+            },
         });
     }, [props.components]);
     return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",
@@ -54,7 +54,7 @@
     "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
   },
   "dependencies": {
-    "dockview-core": "^2.1.4"
+    "dockview-core": "^3.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"