dockview 1.12.0 → 1.13.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IDockviewPanelHeaderProps } from './dockview';
+import { IDockviewPanelHeaderProps } from 'dockview-core';
 export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement> & {
     hideClose?: boolean;
     closeActionOverride?: () => void;

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

@@ -1,48 +1,20 @@
 import React from 'react';
-import { DockviewWillDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi, DockviewPanelRenderer, DroptargetOverlayModel, DockviewDidDropEvent } from 'dockview-core';
-import { IWatermarkPanelProps } from './reactWatermarkPart';
-import { PanelCollection, PanelParameters } from '../types';
-import { IDockviewHeaderActionsProps } from './headerActionsRenderer';
-export interface IGroupPanelBaseProps<T extends {
-    [index: string]: any;
-} = any> extends PanelParameters<T> {
-    api: DockviewPanelApi;
-    containerApi: DockviewApi;
-}
-export type IDockviewPanelHeaderProps<T extends {
-    [index: string]: any;
-} = any> = IGroupPanelBaseProps<T>;
-export type IDockviewPanelProps<T extends {
-    [index: string]: any;
-} = any> = IGroupPanelBaseProps<T>;
-export interface DockviewReadyEvent {
-    api: DockviewApi;
-}
-export interface IDockviewReactProps {
-    onReady: (event: DockviewReadyEvent) => void;
-    components: PanelCollection<IDockviewPanelProps>;
-    tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
-    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onDidDrop?: (event: DockviewDidDropEvent) => void;
-    onWillDrop?: (event: DockviewWillDropEvent) => void;
-    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
-    hideBorders?: boolean;
+import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewDndOverlayEvent, DockviewReadyEvent } from 'dockview-core';
+export interface IDockviewReactProps extends DockviewOptions {
     className?: string;
-    disableAutoResizing?: boolean;
+    tabComponents?: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>;
+    components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;
+    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
     rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     leftHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     prefixHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
-    singleTabMode?: 'fullwidth' | 'default';
-    disableFloatingGroups?: boolean;
-    floatingGroupBounds?: 'boundedWithinViewport' | {
-        minimumHeightWithinViewport?: number;
-        minimumWidthWithinViewport?: number;
-    };
-    debug?: boolean;
-    defaultRenderer?: DockviewPanelRenderer;
-    rootOverlayModel?: DroptargetOverlayModel;
-    locked?: boolean;
-    disableDnd?: boolean;
+    onReady: (event: DockviewReadyEvent) => void;
+    onDidDrop?: (event: DockviewDidDropEvent) => void;
+    onWillDrop?: (event: DockviewWillDropEvent) => void;
+    /**
+     * @deprecated use `api.onUnhandledDragOverEvent` instead. This will be removed in the next release.
+     */
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
 }
 export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/dockview/dockview.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -35,72 +46,75 @@ function createGroupControlElement(component, store) {
         : undefined;
 }
 var DEFAULT_REACT_TAB = 'props.defaultTabComponent';
+function extractCoreOptions(props) {
+    var coreOptions = dockview_core_1.PROPERTY_KEYS.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
     var domRef = react_1.default.useRef(null);
     var dockviewRef = react_1.default.useRef();
     var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
     react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
+    react_1.default.useEffect(function () {
+        var changes = {};
+        dockview_core_1.PROPERTY_KEYS.forEach(function (propKey) {
+            var key = propKey;
+            var propValue = props[key];
+            if (key in props && propValue !== prevProps.current[key]) {
+                changes[key] = propValue;
+            }
+        });
+        if (dockviewRef.current) {
+            dockviewRef.current.updateOptions(changes);
+        }
+        else {
+            // not yet fully initialized
+        }
+        prevProps.current = props;
+    }, dockview_core_1.PROPERTY_KEYS.map(function (key) { return props[key]; }));
     react_1.default.useEffect(function () {
         var _a;
         if (!domRef.current) {
-            return function () {
-                // noop
-            };
+            return;
         }
-        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 frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
         if (props.defaultTabComponent) {
             frameworkTabComponents[DEFAULT_REACT_TAB] =
                 props.defaultTabComponent;
         }
-        var dockview = new dockview_core_1.DockviewComponent({
+        var frameworkOptions = {
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
+            createComponent: function (options) {
+                return new reactContentPart_1.ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal: addPortal,
+                });
+            },
+            createTabComponent: function (options) {
+                return new reactHeaderPart_1.ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal: addPortal,
+                });
+            },
+            createWatermarkComponent: props.watermarkComponent
+                ? function () {
+                    return new reactWatermarkPart_1.ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
             parentElement: domRef.current,
-            frameworkComponentFactory: factory,
-            frameworkComponents: props.components,
-            disableAutoResizing: props.disableAutoResizing,
-            frameworkTabComponents: frameworkTabComponents,
-            watermarkFrameworkComponent: props.watermarkComponent,
             defaultTabComponent: props.defaultTabComponent
                 ? DEFAULT_REACT_TAB
                 : undefined,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-            showDndOverlay: props.showDndOverlay,
-            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
-            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
-            singleTabMode: props.singleTabMode,
-            disableFloatingGroups: props.disableFloatingGroups,
-            floatingGroupBounds: props.floatingGroupBounds,
-            defaultRenderer: props.defaultRenderer,
-            debug: props.debug,
-            rootOverlayModel: props.rootOverlayModel,
-            locked: props.locked,
-            disableDnd: props.disableDnd,
-        });
+        };
+        var dockview = new dockview_core_1.DockviewComponent(__assign(__assign({}, extractCoreOptions(props)), frameworkOptions));
         var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         dockview.layout(clientWidth, clientHeight);
         if (props.onReady) {
@@ -111,20 +125,6 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
             dockview.dispose();
         };
     }, []);
-    react_1.default.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.locked = !!props.locked;
-    }, [props.locked]);
-    react_1.default.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            disableDnd: props.disableDnd,
-        });
-    }, [props.disableDnd]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return function () {
@@ -146,63 +146,43 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
                 // noop
             };
         }
-        var disposable = dockviewRef.current.onWillDrop(function (event) {
-            if (props.onWillDrop) {
-                props.onWillDrop(event);
+        var disposable = dockviewRef.current.onUnhandledDragOverEvent(function (event) {
+            var _a;
+            if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
+                event.accept();
             }
         });
         return function () {
             disposable.dispose();
         };
-    }, [props.onWillDrop]);
-    react_1.default.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            frameworkComponents: props.components,
-        });
-    }, [props.components]);
-    react_1.default.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            floatingGroupBounds: props.floatingGroupBounds,
-        });
-    }, [props.floatingGroupBounds]);
-    react_1.default.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            watermarkFrameworkComponent: props.watermarkComponent,
-        });
-    }, [props.watermarkComponent]);
-    react_1.default.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
     }, [props.showDndOverlay]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
-            return;
+            return function () {
+                // noop
+            };
         }
-        dockviewRef.current.updateOptions({
-            frameworkTabComponents: props.tabComponents,
+        var disposable = dockviewRef.current.onWillDrop(function (event) {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
         });
-    }, [props.tabComponents]);
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            disableFloatingGroups: props.disableFloatingGroups,
+            createComponent: function (options) {
+                return new reactContentPart_1.ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal: addPortal,
+                });
+            },
         });
-    }, [props.disableFloatingGroups]);
+    }, [props.components]);
     react_1.default.useEffect(function () {
         var _a;
         if (!dockviewRef.current) {
@@ -217,39 +197,49 @@ exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
             defaultTabComponent: props.defaultTabComponent
                 ? DEFAULT_REACT_TAB
                 : undefined,
-            frameworkTabComponents: frameworkTabComponents,
+            createTabComponent: function (options) {
+                return new reactHeaderPart_1.ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal: addPortal,
+                });
+            },
         });
-    }, [props.defaultTabComponent]);
+    }, [props.tabComponents, props.defaultTabComponent]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
+            createWatermarkComponent: props.watermarkComponent
+                ? function () {
+                    return new reactWatermarkPart_1.ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
         });
-    }, [props.rightHeaderActionsComponent]);
+    }, [props.watermarkComponent]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
         });
-    }, [props.leftHeaderActionsComponent]);
+    }, [props.rightHeaderActionsComponent]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            rootOverlayModel: props.rootOverlayModel,
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
         });
-    }, [props.rootOverlayModel]);
+    }, [props.leftHeaderActionsComponent]);
     react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
             return;
         }
         dockviewRef.current.updateOptions({
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
         });
     }, [props.prefixHeaderActionsComponent]);
     return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));

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

@@ -1,15 +1,7 @@
 import React from 'react';
 import { ReactPart, ReactPortalStore } from '../react';
-import { IDockviewPanel, DockviewApi, DockviewGroupPanel, DockviewGroupPanelApi, PanelUpdateEvent } from 'dockview-core';
-export interface IDockviewHeaderActionsProps {
-    api: DockviewGroupPanelApi;
-    containerApi: DockviewApi;
-    panels: IDockviewPanel[];
-    activePanel: IDockviewPanel | undefined;
-    isGroupActive: boolean;
-    group: DockviewGroupPanel;
-}
-export declare class ReactHeaderActionsRendererPart {
+import { DockviewApi, DockviewGroupPanel, DockviewGroupPanelApi, PanelUpdateEvent, IHeaderActionsRenderer, IDockviewHeaderActionsProps } from 'dockview-core';
+export declare class ReactHeaderActionsRendererPart implements IHeaderActionsRenderer {
     private readonly component;
     private readonly reactPortalStore;
     private readonly _group;
@@ -18,15 +10,13 @@ export declare class ReactHeaderActionsRendererPart {
     private _part?;
     get element(): HTMLElement;
     get part(): ReactPart<IDockviewHeaderActionsProps> | undefined;
-    get group(): DockviewGroupPanel;
     constructor(component: React.FunctionComponent<IDockviewHeaderActionsProps>, reactPortalStore: ReactPortalStore, _group: DockviewGroupPanel);
-    focus(): void;
     init(parameters: {
         containerApi: DockviewApi;
         api: DockviewGroupPanelApi;
     }): void;
-    update(event: PanelUpdateEvent): void;
     dispose(): void;
+    update(event: PanelUpdateEvent): void;
     private updatePanels;
     private updateActivePanel;
     private updateGroupActive;

package/dist/cjs/dockview/headerActionsRenderer.js

@@ -28,16 +28,6 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(ReactHeaderActionsRendererPart.prototype, "group", {
-        get: function () {
-            return this._group;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ReactHeaderActionsRendererPart.prototype.focus = function () {
-        // TODO
-    };
     ReactHeaderActionsRendererPart.prototype.init = function (parameters) {
         var _this = this;
         this.mutableDisposable.value = new dockview_core_1.DockviewCompositeDisposable(this._group.model.onDidAddPanel(function () {
@@ -58,15 +48,15 @@ var ReactHeaderActionsRendererPart = /** @class */ (function () {
             group: this._group,
         });
     };
-    ReactHeaderActionsRendererPart.prototype.update = function (event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    };
     ReactHeaderActionsRendererPart.prototype.dispose = function () {
         var _a;
         this.mutableDisposable.dispose();
         (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
     };
+    ReactHeaderActionsRendererPart.prototype.update = function (event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    };
     ReactHeaderActionsRendererPart.prototype.updatePanels = function () {
         this.update({ params: { panels: this._group.model.panels } });
     };

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ReactPortalStore } from '../react';
-import { IDockviewPanelProps } from '../dockview/dockview';
-import { DockviewEvent, PanelUpdateEvent, IContentRenderer, GroupPanelContentPartInitParameters } from 'dockview-core';
+import { DockviewEvent, PanelUpdateEvent, IContentRenderer, GroupPanelPartInitParameters, IDockviewPanelProps } from 'dockview-core';
 export declare class ReactPanelContentPart implements IContentRenderer {
     readonly id: string;
     private readonly component;
@@ -15,7 +14,7 @@ export declare class ReactPanelContentPart implements IContentRenderer {
     get element(): HTMLElement;
     constructor(id: string, component: React.FunctionComponent<IDockviewPanelProps>, reactPortalStore: ReactPortalStore);
     focus(): void;
-    init(parameters: GroupPanelContentPartInitParameters): void;
+    init(parameters: GroupPanelPartInitParameters): void;
     update(event: PanelUpdateEvent): void;
     layout(_width: number, _height: number): void;
     dispose(): void;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ReactPortalStore } from '../react';
-import { IGroupPanelBaseProps } from './dockview';
-import { PanelUpdateEvent, ITabRenderer, GroupPanelPartInitParameters } from 'dockview-core';
+import { PanelUpdateEvent, ITabRenderer, GroupPanelPartInitParameters, IGroupPanelBaseProps } from 'dockview-core';
 export declare class ReactPanelHeaderPart implements ITabRenderer {
     readonly id: string;
     private readonly component;

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

@@ -1,11 +1,6 @@
 import React from 'react';
 import { ReactPortalStore } from '../react';
-import { PanelUpdateEvent, DockviewGroupPanel, IWatermarkRenderer, WatermarkRendererInitParameters, DockviewApi, IDockviewGroupPanel } from 'dockview-core';
-export interface IWatermarkPanelProps {
-    containerApi: DockviewApi;
-    group?: IDockviewGroupPanel;
-    close: () => void;
-}
+import { PanelUpdateEvent, DockviewGroupPanel, IWatermarkRenderer, WatermarkRendererInitParameters, IWatermarkPanelProps } from 'dockview-core';
 export declare class ReactWatermarkPart implements IWatermarkRenderer {
     readonly id: string;
     private readonly component;

package/dist/cjs/dockview/reactWatermarkPart.js

@@ -23,11 +23,6 @@ var ReactWatermarkPart = /** @class */ (function () {
         this.part = new react_1.ReactPart(this.element, this.reactPortalStore, this.component, {
             group: parameters.group,
             containerApi: parameters.containerApi,
-            close: function () {
-                if (parameters.group) {
-                    parameters.containerApi.removeGroup(parameters.group);
-                }
-            },
         });
     };
     ReactWatermarkPart.prototype.focus = function () {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface GridviewReadyEvent {
     api: GridviewApi;
 }
@@ -13,7 +13,7 @@ export interface IGridviewPanelProps<T extends {
 export interface IGridviewReactProps {
     orientation?: Orientation;
     onReady: (event: GridviewReadyEvent) => void;
-    components: PanelCollection<IGridviewPanelProps>;
+    components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
     hideBorders?: boolean;
     className?: string;
     proportionalLayout?: boolean;

package/dist/cjs/index.d.ts

@@ -3,8 +3,6 @@ export * from './dockview/dockview';
 export * from './dockview/defaultTab';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
-export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
-export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
 export * from './types';
 export * from './react';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface PaneviewReadyEvent {
     api: PaneviewApi;
 }
@@ -13,8 +13,8 @@ export interface IPaneviewPanelProps<T extends {
 }
 export interface IPaneviewReactProps {
     onReady: (event: PaneviewReadyEvent) => void;
-    components: PanelCollection<IPaneviewPanelProps>;
-    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    headerComponents?: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
     className?: string;
     disableAutoResizing?: boolean;
     disableDnd?: boolean;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface SplitviewReadyEvent {
     api: SplitviewApi;
 }
@@ -13,7 +13,7 @@ export interface ISplitviewPanelProps<T extends {
 export interface ISplitviewReactProps {
     orientation?: Orientation;
     onReady: (event: SplitviewReadyEvent) => void;
-    components: PanelCollection<ISplitviewPanelProps>;
+    components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
     proportionalLayout?: boolean;
     hideBorders?: boolean;
     className?: string;

package/dist/cjs/types.d.ts

@@ -1,8 +1,4 @@
-import * as React from 'react';
 import { Parameters } from 'dockview-core';
-export interface PanelCollection<T extends object> {
-    [name: string]: React.FunctionComponent<T>;
-}
 export interface PanelParameters<T extends {} = Parameters> {
     params: T;
 }