dockview - npm Package Compare versions

Comparing version 0.0.0-experimental-faeb8241-20231002 to 0.0.0-experimental-fc84942-20240523

dist/cjs/dockview/defaultTab.d.ts

@@ -1,3 +0,3 @@
-import { IDockviewPanelHeaderProps } from './dockview';
-import * as React from 'react';
+import React from 'react';
+import { IDockviewPanelHeaderProps } from 'dockview-core';
 export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement> & {
@@ -8,2 +8,1 @@ hideClose?: boolean;
 export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
-//# sourceMappingURL=defaultTab.d.ts.map

dist/cjs/dockview/defaultTab.js

@@ -13,25 +13,2 @@ "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 __rest = (this && this.__rest) || function (s, e) {
@@ -48,9 +25,12 @@ var t = {};
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewDefaultTab = void 0;
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var svg_1 = require("../svg");
 var DockviewDefaultTab = function (_a) {
     var api = _a.api, _containerApi = _a.containerApi, _params = _a.params, hideClose = _a.hideClose, closeActionOverride = _a.closeActionOverride, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
-    var onClose = React.useCallback(function (event) {
+    var onClose = react_1.default.useCallback(function (event) {
         event.preventDefault();
@@ -64,6 +44,6 @@ if (closeActionOverride) {
     }, [api, closeActionOverride]);
-    var onMouseDown = React.useCallback(function (e) {
+    var onMouseDown = react_1.default.useCallback(function (e) {
         e.preventDefault();
     }, []);
-    var onClick = React.useCallback(function (event) {
+    var onClick = react_1.default.useCallback(function (event) {
         if (event.defaultPrevented) {
@@ -77,8 +57,7 @@ return;
     }, [api, rest.onClick]);
-    return (React.createElement("div", __assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
-        React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-        !hideClose && (React.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
-            React.createElement(svg_1.CloseButton, null)))));
+    return (react_1.default.createElement("div", __assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
+        react_1.default.createElement("span", { className: "dv-default-tab-content" }, api.title),
+        !hideClose && (react_1.default.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
+            react_1.default.createElement(svg_1.CloseButton, null)))));
 };
 exports.DockviewDefaultTab = DockviewDefaultTab;
-//# sourceMappingURL=defaultTab.js.map

dist/cjs/dockview/dockview.d.ts

@@ -1,31 +0,8 @@
-import * as React from 'react';
-import { DockviewDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi } 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>;
+import React from 'react';
+import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewDndOverlayEvent, 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>;
-    onDidDrop?: (event: DockviewDropEvent) => void;
-    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
@@ -35,10 +12,10 @@ rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     prefixHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
-    singleTabMode?: 'fullwidth' | 'default';
-    disableFloatingGroups?: boolean;
-    floatingGroupBounds?: 'boundedWithinViewport' | {
-        minimumHeightWithinViewport?: number;
-        minimumWidthWithinViewport?: number;
-    };
+    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>>;
-//# sourceMappingURL=dockview.d.ts.map

dist/cjs/dockview/dockview.js

 "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 __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);
 };
@@ -41,9 +29,12 @@ var __read = (this && this.__read) || function (o, n) {
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewReact = void 0;
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
 var reactContentPart_1 = require("./reactContentPart");
 var reactHeaderPart_1 = require("./reactHeaderPart");
-var react_1 = require("../react");
+var react_2 = require("../react");
 var reactWatermarkPart_1 = require("./reactWatermarkPart");
@@ -59,62 +50,72 @@ var headerActionsRenderer_1 = require("./headerActionsRenderer");
 var DEFAULT_REACT_TAB = 'props.defaultTabComponent';
-exports.DockviewReact = React.forwardRef(function (props, ref) {
-    var domRef = React.useRef(null);
-    var dockviewRef = React.useRef();
-    var _a = __read((0, react_1.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
-    React.useImperativeHandle(ref, function () { return domRef.current; }, []);
-    React.useEffect(function () {
+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,
-                    });
-                },
+        var frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
+        if (props.defaultTabComponent) {
+            frameworkTabComponents[DEFAULT_REACT_TAB] =
+                props.defaultTabComponent;
+        }
+        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,
+                });
             },
-            tab: {
-                createComponent: function (_id, componentId, component) {
-                    return new reactHeaderPart_1.ReactPanelHeaderPart(componentId, component, {
-                        addPortal: addPortal,
-                    });
-                },
+            createTabComponent: function (options) {
+                return new reactHeaderPart_1.ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal: addPortal,
+                });
             },
-            watermark: {
-                createComponent: function (_id, componentId, component) {
-                    return new reactWatermarkPart_1.ReactWatermarkPart(componentId, component, {
+            createWatermarkComponent: props.watermarkComponent
+                ? function () {
+                    return new reactWatermarkPart_1.ReactWatermarkPart('watermark', props.watermarkComponent, {
                         addPortal: addPortal,
                     });
-                },
-            },
-        };
-        var frameworkTabComponents = props.tabComponents || {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        var dockview = new dockview_core_1.DockviewComponent({
+                }
+                : undefined,
             parentElement: domRef.current,
-            frameworkComponentFactory: factory,
-            frameworkComponents: props.components,
-            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,
-        });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        };
+        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);
@@ -129,3 +130,3 @@ if (props.onReady) {
     }, []);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
@@ -145,43 +146,34 @@ return function () {
     }, [props.onDidDrop]);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
-            return;
+            return function () {
+                // noop
+            };
         }
-        dockviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+        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();
+            }
         });
-    }, [props.components]);
-    React.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            floatingGroupBounds: props.floatingGroupBounds,
-        });
-    }, [props.floatingGroupBounds]);
-    React.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            watermarkFrameworkComponent: props.watermarkComponent,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(function () {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
+        return function () {
+            disposable.dispose();
+        };
     }, [props.showDndOverlay]);
-    React.useEffect(function () {
+    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]);
-    React.useEffect(function () {
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
+    react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
@@ -191,10 +183,15 @@ 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]);
-    React.useEffect(function () {
+    }, [props.components]);
+    react_1.default.useEffect(function () {
+        var _a;
         if (!dockviewRef.current) {
             return;
         }
-        var frameworkTabComponents = props.tabComponents || {};
+        var frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
         if (props.defaultTabComponent) {
@@ -208,6 +205,10 @@ frameworkTabComponents[DEFAULT_REACT_TAB] =
                 : undefined,
-            frameworkTabComponents: frameworkTabComponents,
+            createTabComponent: function (options) {
+                return new reactHeaderPart_1.ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal: addPortal,
+                });
+            },
         });
-    }, [props.defaultTabComponent]);
-    React.useEffect(function () {
+    }, [props.tabComponents, props.defaultTabComponent]);
+    react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
@@ -217,6 +218,20 @@ 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.watermarkComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
+        });
     }, [props.rightHeaderActionsComponent]);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
@@ -226,6 +241,6 @@ return;
         dockviewRef.current.updateOptions({
-            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
         });
     }, [props.leftHeaderActionsComponent]);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!dockviewRef.current) {
@@ -235,8 +250,7 @@ return;
         dockviewRef.current.updateOptions({
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
         });
     }, [props.prefixHeaderActionsComponent]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.DockviewReact.displayName = 'DockviewComponent';
-//# sourceMappingURL=dockview.js.map

dist/cjs/dockview/headerActionsRenderer.d.ts

@@ -1,13 +0,5 @@
-import * as React from 'react';
+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;
@@ -21,5 +13,3 @@ private readonly reactPortalStore;
     get part(): ReactPart<IDockviewHeaderActionsProps> | undefined;
-    get group(): DockviewGroupPanel;
     constructor(component: React.FunctionComponent<IDockviewHeaderActionsProps>, reactPortalStore: ReactPortalStore, _group: DockviewGroupPanel);
-    focus(): void;
     init(parameters: {
@@ -29,4 +19,4 @@ containerApi: DockviewApi;
     }): void;
+    dispose(): void;
     update(event: PanelUpdateEvent): void;
-    dispose(): void;
     private updatePanels;
@@ -36,2 +26,1 @@ private updateActivePanel;
 }
-//# sourceMappingURL=headerActionsRenderer.d.ts.map

dist/cjs/dockview/headerActionsRenderer.js

@@ -14,2 +14,4 @@ "use strict";
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -30,12 +32,2 @@ Object.defineProperty(ReactHeaderActionsRendererPart.prototype, "element", {
     });
-    Object.defineProperty(ReactHeaderActionsRendererPart.prototype, "group", {
-        get: function () {
-            return this._group;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ReactHeaderActionsRendererPart.prototype.focus = function () {
-        // TODO
-    };
     ReactHeaderActionsRendererPart.prototype.init = function (parameters) {
@@ -61,6 +53,2 @@ var _this = this;
     };
-    ReactHeaderActionsRendererPart.prototype.update = function (event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    };
     ReactHeaderActionsRendererPart.prototype.dispose = function () {
@@ -71,2 +59,6 @@ var _a;
     };
+    ReactHeaderActionsRendererPart.prototype.update = function (event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    };
     ReactHeaderActionsRendererPart.prototype.updatePanels = function () {
@@ -92,2 +84,1 @@ this.update({ params: { panels: this._group.model.panels } });
 exports.ReactHeaderActionsRendererPart = ReactHeaderActionsRendererPart;
-//# sourceMappingURL=headerActionsRenderer.js.map

dist/cjs/dockview/reactContentPart.d.ts

@@ -1,5 +0,4 @@
-import * as React from 'react';
+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 {
@@ -18,3 +17,3 @@ readonly id: string;
     focus(): void;
-    init(parameters: GroupPanelContentPartInitParameters): void;
+    init(parameters: GroupPanelPartInitParameters): void;
     update(event: PanelUpdateEvent): void;
@@ -24,2 +23,1 @@ layout(_width: number, _height: number): void;
 }
-//# sourceMappingURL=reactContentPart.d.ts.map

dist/cjs/dockview/reactContentPart.js

@@ -17,2 +17,4 @@ "use strict";
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -38,3 +40,3 @@ Object.defineProperty(ReactPanelContentPart.prototype, "element", {
         var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
     };
@@ -53,2 +55,1 @@ ReactPanelContentPart.prototype.layout = function (_width, _height) {
 exports.ReactPanelContentPart = ReactPanelContentPart;
-//# sourceMappingURL=reactContentPart.js.map

dist/cjs/dockview/reactHeaderPart.d.ts

@@ -1,5 +0,4 @@
-import * as React from 'react';
+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 {
@@ -19,2 +18,1 @@ readonly id: string;
 }
-//# sourceMappingURL=reactHeaderPart.d.ts.map

dist/cjs/dockview/reactHeaderPart.js

@@ -12,2 +12,4 @@ "use strict";
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -33,3 +35,3 @@ Object.defineProperty(ReactPanelHeaderPart.prototype, "element", {
         var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
     };
@@ -46,2 +48,1 @@ ReactPanelHeaderPart.prototype.layout = function (_width, _height) {
 exports.ReactPanelHeaderPart = ReactPanelHeaderPart;
-//# sourceMappingURL=reactHeaderPart.js.map

dist/cjs/dockview/reactWatermarkPart.d.ts

@@ -1,9 +0,4 @@
-import * as React from 'react';
+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 {
@@ -25,2 +20,1 @@ readonly id: string;
 }
-//# sourceMappingURL=reactWatermarkPart.d.ts.map

dist/cjs/dockview/reactWatermarkPart.js

@@ -12,2 +12,4 @@ "use strict";
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -25,7 +27,2 @@ Object.defineProperty(ReactWatermarkPart.prototype, "element", {
             containerApi: parameters.containerApi,
-            close: function () {
-                if (parameters.group) {
-                    parameters.containerApi.removeGroup(parameters.group);
-                }
-            },
         });
@@ -37,7 +34,7 @@ };
     ReactWatermarkPart.prototype.update = function (params) {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.parameters) {
             this.parameters.params = params.params;
         }
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: ((_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) || {} });
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
     };
@@ -57,2 +54,1 @@ ReactWatermarkPart.prototype.layout = function (_width, _height) {
 exports.ReactWatermarkPart = ReactWatermarkPart;
-//# sourceMappingURL=reactWatermarkPart.js.map

dist/cjs/gridview/gridview.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
+import React from 'react';
 import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface GridviewReadyEvent {
@@ -16,3 +16,3 @@ api: GridviewApi;
     onReady: (event: GridviewReadyEvent) => void;
-    components: PanelCollection<IGridviewPanelProps>;
+    components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
     hideBorders?: boolean;
@@ -24,2 +24,1 @@ className?: string;
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=gridview.d.ts.map

dist/cjs/gridview/gridview.js

 "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) {
@@ -41,14 +18,18 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridviewReact = void 0;
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
 var view_1 = require("./view");
-var react_1 = require("../react");
-exports.GridviewReact = React.forwardRef(function (props, ref) {
-    var domRef = React.useRef(null);
-    var gridviewRef = 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 () {
+var react_2 = require("../react");
+exports.GridviewReact = react_1.default.forwardRef(function (props, ref) {
+    var domRef = react_1.default.useRef(null);
+    var gridviewRef = 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; }, []);
+    react_1.default.useEffect(function () {
+        var _a;
         if (!domRef.current) {
@@ -61,6 +42,7 @@ return function () {
             parentElement: domRef.current,
+            disableAutoResizing: props.disableAutoResizing,
             proportionalLayout: typeof props.proportionalLayout === 'boolean'
                 ? props.proportionalLayout
                 : true,
-            orientation: props.orientation || dockview_core_1.Orientation.HORIZONTAL,
+            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : dockview_core_1.Orientation.HORIZONTAL,
             frameworkComponents: props.components,
@@ -78,3 +60,3 @@ frameworkComponentFactory: {
         });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         gridview.layout(clientWidth, clientHeight);
@@ -89,3 +71,3 @@ if (props.onReady) {
     }, []);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!gridviewRef.current) {
@@ -98,5 +80,4 @@ return;
     }, [props.components]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.GridviewReact.displayName = 'GridviewComponent';
-//# sourceMappingURL=gridview.js.map

dist/cjs/gridview/view.d.ts

@@ -11,2 +11,1 @@ /// <reference types="react" />
 }
-//# sourceMappingURL=view.d.ts.map

dist/cjs/gridview/view.js

@@ -30,7 +30,9 @@ "use strict";
     ReactGridPanelView.prototype.getComponent = function () {
-        var _a;
+        var _a, _b;
         return new react_1.ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
             api: this.api,
-            containerApi: new dockview_core_1.GridviewApi(this._params.accessor),
+            // TODO: fix casting hack
+            containerApi: new dockview_core_1.GridviewApi(this._params
+                .accessor),
         });
@@ -41,2 +43,1 @@ };
 exports.ReactGridPanelView = ReactGridPanelView;
-//# sourceMappingURL=view.js.map

dist/cjs/index.d.ts

@@ -6,7 +6,4 @@ export * from 'dockview-core';
 export * from './gridview/gridview';
-export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
-export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
 export * from './types';
 export * from './react';
-//# sourceMappingURL=index.d.ts.map

dist/cjs/index.js

@@ -25,2 +25,1 @@ "use strict";
 __exportStar(require("./react"), exports);
-//# sourceMappingURL=index.js.map

dist/cjs/paneview/paneview.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface PaneviewReadyEvent {
@@ -16,4 +16,4 @@ api: PaneviewApi;
     onReady: (event: PaneviewReadyEvent) => void;
-    components: PanelCollection<IPaneviewPanelProps>;
-    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    headerComponents?: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
     className?: string;
@@ -26,2 +26,1 @@ disableAutoResizing?: boolean;
 export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=paneview.d.ts.map

dist/cjs/paneview/paneview.js

@@ -13,25 +13,2 @@ "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) {
@@ -53,14 +30,17 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaneviewReact = void 0;
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
-var react_1 = require("../react");
+var react_2 = require("../react");
 var view_1 = require("./view");
-exports.PaneviewReact = React.forwardRef(function (props, ref) {
-    var domRef = React.useRef(null);
-    var paneviewRef = 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 () {
+exports.PaneviewReact = react_1.default.forwardRef(function (props, ref) {
+    var domRef = react_1.default.useRef(null);
+    var paneviewRef = 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; }, []);
+    react_1.default.useEffect(function () {
         var createComponent = function (id, _componentId, component) {
@@ -73,2 +53,3 @@ return new view_1.PanePanelSection(id, component, {
             parentElement: domRef.current,
+            disableAutoResizing: props.disableAutoResizing,
             frameworkComponents: props.components,
@@ -100,3 +81,3 @@ components: {},
     }, []);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!paneviewRef.current) {
@@ -109,3 +90,3 @@ return;
     }, [props.components]);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!paneviewRef.current) {
@@ -118,3 +99,3 @@ return;
     }, [props.headerComponents]);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!paneviewRef.current) {
@@ -135,3 +116,3 @@ return function () {
     }, [props.onDidDrop]);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!paneviewRef.current) {
@@ -144,5 +125,4 @@ return;
     }, [props.showDndOverlay]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.PaneviewReact.displayName = 'PaneviewComponent';
-//# sourceMappingURL=paneview.js.map

dist/cjs/paneview/view.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
@@ -20,2 +20,1 @@ import { ReactPortalStore } from '../react';
 }
-//# sourceMappingURL=view.d.ts.map

dist/cjs/paneview/view.js

@@ -45,2 +45,1 @@ "use strict";
 exports.PanePanelSection = PanePanelSection;
-//# sourceMappingURL=view.js.map

dist/cjs/react.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { IFrameworkPart, IDockviewDisposable } from 'dockview-core';
@@ -34,4 +34,3 @@ export interface ReactPortalStore {
 export declare const usePortalsLifecycle: PortalLifecycleHook;
-export declare function isReactElement(element: any | React.ReactElement): element is React.ReactElement;
+export declare function isReactComponent(component: any): boolean;
 export {};
-//# sourceMappingURL=react.d.ts.map

dist/cjs/react.js

@@ -13,25 +13,2 @@ "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) {
@@ -62,6 +39,9 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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"));
+exports.isReactComponent = exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
+var react_1 = __importDefault(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
 /**
@@ -76,5 +56,5 @@ * This component is intended to interface between vanilla-js and React hence we need to be
 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 ({
+    var _a = __read(react_1.default.useState(), 2), _ = _a[0], triggerRender = _a[1];
+    var _props = react_1.default.useRef(props.componentProps);
+    react_1.default.useImperativeHandle(ref, function () { return ({
         update: function (componentProps) {
@@ -91,3 +71,3 @@ _props.current = __assign(__assign({}, _props.current), componentProps);
     }); }, []);
-    return React.createElement(props.component, _props.current);
+    return react_1.default.createElement(props.component, _props.current);
 };
@@ -104,3 +84,3 @@ ReactComponentBridge.displayName = 'DockviewReactJsBridge';
 })();
-exports.ReactPartContext = React.createContext({});
+exports.ReactPartContext = react_1.default.createContext({});
 var ReactPart = /** @class */ (function () {
@@ -134,11 +114,11 @@ function ReactPart(parent, portalStore, component, parameters, context) {
         }
-        if (typeof this.component !== 'function') {
+        if (!isReactComponent(this.component)) {
             /**
              * 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.
+             * if we do not intercept then 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.');
+            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
         }
-        var bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
+        var bridgeComponent = react_1.default.createElement(react_1.default.forwardRef(ReactComponentBridge), {
             component: this
@@ -156,5 +136,5 @@ .component,
         var node = this.context
-            ? React.createElement(exports.ReactPartContext.Provider, { value: this.context }, bridgeComponent)
+            ? react_1.default.createElement(exports.ReactPartContext.Provider, { value: this.context }, bridgeComponent)
             : bridgeComponent;
-        var portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
+        var portal = react_dom_1.default.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
         this.ref = {
@@ -179,5 +159,5 @@ portal: portal,
 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) {
+    var _a = __read(react_1.default.useState([]), 2), portals = _a[0], setPortals = _a[1];
+    react_1.default.useDebugValue("Portal count: ".concat(portals.length));
+    var addPortal = react_1.default.useCallback(function (portal) {
         setPortals(function (existingPortals) { return __spreadArray(__spreadArray([], __read(existingPortals), false), [portal], false); });
@@ -200,7 +180,10 @@ var disposed = false;
 exports.usePortalsLifecycle = usePortalsLifecycle;
-// it does the job...
-function isReactElement(element) {
-    return element === null || element === void 0 ? void 0 : element.type;
+function isReactComponent(component) {
+    /**
+     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
+     * so for now we will check in a rather crude fashion...
+     */
+    return (typeof component === 'function' /** Functional Componnts */ ||
+        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
 }
-exports.isReactElement = isReactElement;
-//# sourceMappingURL=react.js.map
+exports.isReactComponent = isReactComponent;

dist/cjs/splitview/splitview.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
+import React from 'react';
 import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface SplitviewReadyEvent {
@@ -16,3 +16,3 @@ api: SplitviewApi;
     onReady: (event: SplitviewReadyEvent) => void;
-    components: PanelCollection<ISplitviewPanelProps>;
+    components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
     proportionalLayout?: boolean;
@@ -24,2 +24,1 @@ hideBorders?: boolean;
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=splitview.d.ts.map

dist/cjs/splitview/splitview.js

 "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) {
@@ -41,17 +18,22 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitviewReact = void 0;
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var dockview_core_1 = require("dockview-core");
-var react_1 = require("../react");
+var react_2 = require("../react");
 var view_1 = require("./view");
-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 () {
+exports.SplitviewReact = react_1.default.forwardRef(function (props, ref) {
+    var domRef = react_1.default.useRef(null);
+    var splitviewRef = 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; }, []);
+    react_1.default.useEffect(function () {
+        var _a;
         var splitview = new dockview_core_1.SplitviewComponent({
             parentElement: domRef.current,
-            orientation: props.orientation || dockview_core_1.Orientation.HORIZONTAL,
+            disableAutoResizing: props.disableAutoResizing,
+            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : dockview_core_1.Orientation.HORIZONTAL,
             frameworkComponents: props.components,
@@ -72,3 +54,3 @@ frameworkWrapper: {
         });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         splitview.layout(clientWidth, clientHeight);
@@ -83,3 +65,3 @@ if (props.onReady) {
     }, []);
-    React.useEffect(function () {
+    react_1.default.useEffect(function () {
         if (!splitviewRef.current) {
@@ -92,5 +74,4 @@ return;
     }, [props.components]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+    return (react_1.default.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
 });
 exports.SplitviewReact.displayName = 'SplitviewComponent';
-//# sourceMappingURL=splitview.js.map

dist/cjs/splitview/view.d.ts

@@ -11,2 +11,1 @@ /// <reference types="react" />
 }
-//# sourceMappingURL=view.d.ts.map

dist/cjs/splitview/view.js

@@ -30,5 +30,5 @@ "use strict";
     ReactPanelView.prototype.getComponent = function () {
-        var _a;
+        var _a, _b;
         return new react_1.ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
             api: this.api,
@@ -41,2 +41,1 @@ containerApi: new dockview_core_1.SplitviewApi(this._params.accessor),
 exports.ReactPanelView = ReactPanelView;
-//# sourceMappingURL=view.js.map

dist/cjs/svg.d.ts

@@ -1,4 +0,3 @@
-import * as React from 'react';
+import React from 'react';
 export declare const CloseButton: () => React.JSX.Element;
 export declare const ExpandMore: () => React.JSX.Element;
-//# sourceMappingURL=svg.d.ts.map

dist/cjs/svg.js

 "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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandMore = exports.CloseButton = void 0;
-var React = __importStar(require("react"));
-var CloseButton = function () { return (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
-    React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" }))); };
+var react_1 = __importDefault(require("react"));
+var CloseButton = function () { return (react_1.default.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+    react_1.default.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" }))); };
 exports.CloseButton = CloseButton;
 var ExpandMore = function () {
-    return (React.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
-        React.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
+    return (react_1.default.createElement("svg", { width: "11", height: "11", viewBox: "0 0 24 15", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
+        react_1.default.createElement("path", { d: "M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z" })));
 };
 exports.ExpandMore = ExpandMore;
-//# sourceMappingURL=svg.js.map

dist/cjs/types.d.ts

@@ -1,9 +0,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;
 }
-//# sourceMappingURL=types.d.ts.map

dist/cjs/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

dist/esm/dockview/defaultTab.d.ts

@@ -1,3 +0,3 @@
-import { IDockviewPanelHeaderProps } from './dockview';
-import * as React from 'react';
+import React from 'react';
+import { IDockviewPanelHeaderProps } from 'dockview-core';
 export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement> & {
@@ -8,2 +8,1 @@ hideClose?: boolean;
 export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
-//# sourceMappingURL=defaultTab.d.ts.map

dist/esm/dockview/defaultTab.js

@@ -12,3 +12,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import * as React from 'react';
+import React from 'react';
 import { CloseButton } from '../svg';
@@ -38,7 +38,6 @@ export const DockviewDefaultTab = (_a) => {
     }, [api, rest.onClick]);
-    return (React.createElement("div", Object.assign({ "data-testid": "dockview-default-tab" }, rest, { onClick: onClick, className: "dockview-react-tab" }),
-        React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-        !hideClose && (React.createElement("div", { className: "dv-react-tab-close-btn", onMouseDown: onMouseDown, onClick: onClose },
+    return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
+        React.createElement("span", { className: "dv-default-tab-content" }, api.title),
+        !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
             React.createElement(CloseButton, null)))));
 };
-//# sourceMappingURL=defaultTab.js.map

dist/esm/dockview/dockview.d.ts

@@ -1,31 +0,8 @@
-import * as React from 'react';
-import { DockviewDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi } 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>;
+import React from 'react';
+import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewDndOverlayEvent, 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>;
-    onDidDrop?: (event: DockviewDropEvent) => void;
-    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
@@ -35,10 +12,10 @@ rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     prefixHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
-    singleTabMode?: 'fullwidth' | 'default';
-    disableFloatingGroups?: boolean;
-    floatingGroupBounds?: 'boundedWithinViewport' | {
-        minimumHeightWithinViewport?: number;
-        minimumWidthWithinViewport?: number;
-    };
+    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>>;
-//# sourceMappingURL=dockview.d.ts.map

dist/esm/dockview/dockview.js

@@ -1,3 +0,3 @@
-import * as React from 'react';
-import { DockviewComponent, DockviewApi, } from 'dockview-core';
+import React from 'react';
+import { DockviewComponent, DockviewApi, PROPERTY_KEYS, } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
@@ -7,3 +7,3 @@ import { ReactPanelHeaderPart } from './reactHeaderPart';
 import { ReactWatermarkPart } from './reactWatermarkPart';
-import { ReactHeaderActionsRendererPart, } from './headerActionsRenderer';
+import { ReactHeaderActionsRendererPart } from './headerActionsRenderer';
 function createGroupControlElement(component, store) {
@@ -17,2 +17,11 @@ return component
 const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
+function extractCoreOptions(props) {
+    const coreOptions = PROPERTY_KEYS.reduce((obj, key) => {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
 export const DockviewReact = React.forwardRef((props, ref) => {
@@ -23,56 +32,57 @@ const domRef = React.useRef(null);
     React.useImperativeHandle(ref, () => domRef.current, []);
+    const prevProps = React.useRef({});
     React.useEffect(() => {
+        const changes = {};
+        PROPERTY_KEYS.forEach((propKey) => {
+            const key = propKey;
+            const 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;
+    }, PROPERTY_KEYS.map((key) => props[key]));
+    React.useEffect(() => {
+        var _a;
         if (!domRef.current) {
-            return () => {
-                // noop
-            };
+            return;
         }
-        const factory = {
-            content: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactPanelContentPart(componentId, component, {
-                        addPortal,
-                    });
-                },
+        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
+        if (props.defaultTabComponent) {
+            frameworkTabComponents[DEFAULT_REACT_TAB] =
+                props.defaultTabComponent;
+        }
+        const frameworkOptions = {
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+            createComponent: (options) => {
+                return new ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal,
+                });
             },
-            tab: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactPanelHeaderPart(componentId, component, {
-                        addPortal,
-                    });
-                },
+            createTabComponent(options) {
+                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal,
+                });
             },
-            watermark: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactWatermarkPart(componentId, component, {
+            createWatermarkComponent: props.watermarkComponent
+                ? () => {
+                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
                         addPortal,
                     });
-                },
-            },
-        };
-        const frameworkTabComponents = props.tabComponents || {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        const dockview = new DockviewComponent({
+                }
+                : undefined,
             parentElement: domRef.current,
-            frameworkComponentFactory: factory,
-            frameworkComponents: props.components,
-            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 }),
-            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-            singleTabMode: props.singleTabMode,
-            disableFloatingGroups: props.disableFloatingGroups,
-            floatingGroupBounds: props.floatingGroupBounds,
-        });
+        };
+        const dockview = new DockviewComponent(Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
         const { clientWidth, clientHeight } = domRef.current;
@@ -105,40 +115,31 @@ dockview.layout(clientWidth, clientHeight);
         if (!dockviewRef.current) {
-            return;
+            return () => {
+                // noop
+            };
         }
-        dockviewRef.current.updateOptions({
-            frameworkComponents: props.components,
+        const disposable = dockviewRef.current.onUnhandledDragOverEvent((event) => {
+            var _a;
+            if ((_a = props.showDndOverlay) === null || _a === void 0 ? void 0 : _a.call(props, event)) {
+                event.accept();
+            }
         });
-    }, [props.components]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            floatingGroupBounds: props.floatingGroupBounds,
-        });
-    }, [props.floatingGroupBounds]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            watermarkFrameworkComponent: props.watermarkComponent,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
+        return () => {
+            disposable.dispose();
+        };
     }, [props.showDndOverlay]);
     React.useEffect(() => {
         if (!dockviewRef.current) {
-            return;
+            return () => {
+                // noop
+            };
         }
-        dockviewRef.current.updateOptions({
-            frameworkTabComponents: props.tabComponents,
+        const disposable = dockviewRef.current.onWillDrop((event) => {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
         });
-    }, [props.tabComponents]);
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
     React.useEffect(() => {
@@ -149,10 +150,15 @@ if (!dockviewRef.current) {
         dockviewRef.current.updateOptions({
-            disableFloatingGroups: props.disableFloatingGroups,
+            createComponent: (options) => {
+                return new ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal,
+                });
+            },
         });
-    }, [props.disableFloatingGroups]);
+    }, [props.components]);
     React.useEffect(() => {
+        var _a;
         if (!dockviewRef.current) {
             return;
         }
-        const frameworkTabComponents = props.tabComponents || {};
+        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
         if (props.defaultTabComponent) {
@@ -166,5 +172,9 @@ frameworkTabComponents[DEFAULT_REACT_TAB] =
                 : undefined,
-            frameworkTabComponents,
+            createTabComponent(options) {
+                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal,
+                });
+            },
         });
-    }, [props.defaultTabComponent]);
+    }, [props.tabComponents, props.defaultTabComponent]);
     React.useEffect(() => {
@@ -175,4 +185,18 @@ if (!dockviewRef.current) {
         dockviewRef.current.updateOptions({
-            createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+            createWatermarkComponent: props.watermarkComponent
+                ? () => {
+                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal,
+                    });
+                }
+                : undefined,
         });
+    }, [props.watermarkComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+        });
     }, [props.rightHeaderActionsComponent]);
@@ -184,3 +208,3 @@ React.useEffect(() => {
         dockviewRef.current.updateOptions({
-            createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
         });
@@ -193,3 +217,3 @@ }, [props.leftHeaderActionsComponent]);
         dockviewRef.current.updateOptions({
-            createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
         });
@@ -200,2 +224,1 @@ }, [props.prefixHeaderActionsComponent]);
 DockviewReact.displayName = 'DockviewComponent';
-//# sourceMappingURL=dockview.js.map

dist/esm/dockview/headerActionsRenderer.d.ts

@@ -1,13 +0,5 @@
-import * as React from 'react';
+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;
@@ -21,5 +13,3 @@ private readonly reactPortalStore;
     get part(): ReactPart<IDockviewHeaderActionsProps> | undefined;
-    get group(): DockviewGroupPanel;
     constructor(component: React.FunctionComponent<IDockviewHeaderActionsProps>, reactPortalStore: ReactPortalStore, _group: DockviewGroupPanel);
-    focus(): void;
     init(parameters: {
@@ -29,4 +19,4 @@ containerApi: DockviewApi;
     }): void;
+    dispose(): void;
     update(event: PanelUpdateEvent): void;
-    dispose(): void;
     private updatePanels;
@@ -36,2 +26,1 @@ private updateActivePanel;
 }
-//# sourceMappingURL=headerActionsRenderer.d.ts.map

dist/esm/dockview/headerActionsRenderer.js

@@ -10,5 +10,2 @@ import { ReactPart } from '../react';
     }
-    get group() {
-        return this._group;
-    }
     constructor(component, reactPortalStore, _group) {
@@ -21,6 +18,5 @@ this.component = component;
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
-    focus() {
-        // TODO
-    }
     init(parameters) {
@@ -45,6 +41,2 @@ this.mutableDisposable.value = new DockviewCompositeDisposable(this._group.model.onDidAddPanel(() => {
     }
-    update(event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    }
     dispose() {
@@ -55,2 +47,6 @@ var _a;
     }
+    update(event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    }
     updatePanels() {
@@ -74,2 +70,1 @@ this.update({ params: { panels: this._group.model.panels } });
 }
-//# sourceMappingURL=headerActionsRenderer.js.map

dist/esm/dockview/reactContentPart.d.ts

@@ -1,5 +0,4 @@
-import * as React from 'react';
+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 {
@@ -18,3 +17,3 @@ readonly id: string;
     focus(): void;
-    init(parameters: GroupPanelContentPartInitParameters): void;
+    init(parameters: GroupPanelPartInitParameters): void;
     update(event: PanelUpdateEvent): void;
@@ -24,2 +23,1 @@ layout(_width: number, _height: number): void;
 }
-//# sourceMappingURL=reactContentPart.d.ts.map

dist/esm/dockview/reactContentPart.js

@@ -17,2 +17,4 @@ import { ReactPart } from '../react';
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -31,3 +33,3 @@ focus() {
         var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
     }
@@ -44,2 +46,1 @@ layout(_width, _height) {
 }
-//# sourceMappingURL=reactContentPart.js.map

dist/esm/dockview/reactHeaderPart.d.ts

@@ -1,5 +0,4 @@
-import * as React from 'react';
+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 {
@@ -19,2 +18,1 @@ readonly id: string;
 }
-//# sourceMappingURL=reactHeaderPart.d.ts.map

dist/esm/dockview/reactHeaderPart.js

@@ -12,2 +12,4 @@ import { ReactPart } from '../react';
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -26,3 +28,3 @@ focus() {
         var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
     }
@@ -37,2 +39,1 @@ layout(_width, _height) {
 }
-//# sourceMappingURL=reactHeaderPart.js.map

dist/esm/dockview/reactWatermarkPart.d.ts

@@ -1,9 +0,4 @@
-import * as React from 'react';
+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 {
@@ -25,2 +20,1 @@ readonly id: string;
 }
-//# sourceMappingURL=reactWatermarkPart.d.ts.map

dist/esm/dockview/reactWatermarkPart.js

@@ -12,2 +12,4 @@ import { ReactPart } from '../react';
         this._element.className = 'dockview-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
     }
@@ -18,7 +20,2 @@ init(parameters) {
             containerApi: parameters.containerApi,
-            close: () => {
-                if (parameters.group) {
-                    parameters.containerApi.removeGroup(parameters.group);
-                }
-            },
         });
@@ -30,7 +27,7 @@ }
     update(params) {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.parameters) {
             this.parameters.params = params.params;
         }
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: ((_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) || {} });
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
     }
@@ -48,2 +45,1 @@ layout(_width, _height) {
 }
-//# sourceMappingURL=reactWatermarkPart.js.map

dist/esm/gridview/gridview.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
+import React from 'react';
 import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface GridviewReadyEvent {
@@ -16,3 +16,3 @@ api: GridviewApi;
     onReady: (event: GridviewReadyEvent) => void;
-    components: PanelCollection<IGridviewPanelProps>;
+    components: Record<string, React.FunctionComponent<IGridviewPanelProps>>;
     hideBorders?: boolean;
@@ -24,2 +24,1 @@ className?: string;
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=gridview.d.ts.map

dist/esm/gridview/gridview.js

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { GridviewComponent, Orientation, GridviewApi, } from 'dockview-core';
@@ -11,2 +11,3 @@ import { ReactGridPanelView } from './view';
     React.useEffect(() => {
+        var _a;
         if (!domRef.current) {
@@ -19,6 +20,7 @@ return () => {
             parentElement: domRef.current,
+            disableAutoResizing: props.disableAutoResizing,
             proportionalLayout: typeof props.proportionalLayout === 'boolean'
                 ? props.proportionalLayout
                 : true,
-            orientation: props.orientation || Orientation.HORIZONTAL,
+            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
             frameworkComponents: props.components,
@@ -57,2 +59,1 @@ frameworkComponentFactory: {
 GridviewReact.displayName = 'GridviewComponent';
-//# sourceMappingURL=gridview.js.map

dist/esm/gridview/view.d.ts

@@ -11,2 +11,1 @@ /// <reference types="react" />
 }
-//# sourceMappingURL=view.d.ts.map

dist/esm/gridview/view.js

@@ -10,10 +10,11 @@ import { GridviewApi, GridviewPanel, } from 'dockview-core';
     getComponent() {
-        var _a;
+        var _a, _b;
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
             api: this.api,
-            containerApi: new GridviewApi(this._params.accessor),
+            // TODO: fix casting hack
+            containerApi: new GridviewApi(this._params
+                .accessor),
         });
     }
 }
-//# sourceMappingURL=view.js.map

dist/esm/index.d.ts

@@ -6,7 +6,4 @@ export * from 'dockview-core';
 export * from './gridview/gridview';
-export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
-export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
 export * from './types';
 export * from './react';
-//# sourceMappingURL=index.d.ts.map

dist/esm/index.js

@@ -9,2 +9,1 @@ export * from 'dockview-core';
 export * from './react';
-//# sourceMappingURL=index.js.map

dist/esm/paneview/paneview.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface PaneviewReadyEvent {
@@ -16,4 +16,4 @@ api: PaneviewApi;
     onReady: (event: PaneviewReadyEvent) => void;
-    components: PanelCollection<IPaneviewPanelProps>;
-    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    components: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
+    headerComponents?: Record<string, React.FunctionComponent<IPaneviewPanelProps>>;
     className?: string;
@@ -26,2 +26,1 @@ disableAutoResizing?: boolean;
 export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=paneview.d.ts.map

dist/esm/paneview/paneview.js

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { PaneviewComponent, PaneviewApi, } from 'dockview-core';
@@ -16,2 +16,3 @@ import { usePortalsLifecycle } from '../react';
             parentElement: domRef.current,
+            disableAutoResizing: props.disableAutoResizing,
             frameworkComponents: props.components,
@@ -86,2 +87,1 @@ components: {},
 PaneviewReact.displayName = 'PaneviewComponent';
-//# sourceMappingURL=paneview.js.map

dist/esm/paneview/view.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { PanelUpdateEvent, IPaneBodyPart, PanePanelComponentInitParameter } from 'dockview-core';
@@ -20,2 +20,1 @@ import { ReactPortalStore } from '../react';
 }
-//# sourceMappingURL=view.d.ts.map

dist/esm/paneview/view.js

@@ -36,2 +36,1 @@ import { ReactPart } from '../react';
 }
-//# sourceMappingURL=view.js.map

dist/esm/react.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { IFrameworkPart, IDockviewDisposable } from 'dockview-core';
@@ -34,4 +34,3 @@ export interface ReactPortalStore {
 export declare const usePortalsLifecycle: PortalLifecycleHook;
-export declare function isReactElement(element: any | React.ReactElement): element is React.ReactElement;
+export declare function isReactComponent(component: any): boolean;
 export {};
-//# sourceMappingURL=react.d.ts.map

dist/esm/react.js

@@ -1,3 +0,3 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 /**
@@ -66,9 +66,9 @@ * This component is intended to interface between vanilla-js and React hence we need to be
         }
-        if (typeof this.component !== 'function') {
+        if (!isReactComponent(this.component)) {
             /**
              * 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.
+             * if we do not intercept then 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.');
+            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
         }
@@ -125,6 +125,9 @@ const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
 };
-// it does the job...
-export function isReactElement(element) {
-    return element === null || element === void 0 ? void 0 : element.type;
+export function isReactComponent(component) {
+    /**
+     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
+     * so for now we will check in a rather crude fashion...
+     */
+    return (typeof component === 'function' /** Functional Componnts */ ||
+        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
 }
-//# sourceMappingURL=react.js.map

dist/esm/splitview/splitview.d.ts

@@ -1,4 +0,4 @@
-import * as React from 'react';
+import React from 'react';
 import { SplitviewApi, SplitviewPanelApi, Orientation } from 'dockview-core';
-import { PanelCollection, PanelParameters } from '../types';
+import { PanelParameters } from '../types';
 export interface SplitviewReadyEvent {
@@ -16,3 +16,3 @@ api: SplitviewApi;
     onReady: (event: SplitviewReadyEvent) => void;
-    components: PanelCollection<ISplitviewPanelProps>;
+    components: Record<string, React.FunctionComponent<ISplitviewPanelProps>>;
     proportionalLayout?: boolean;
@@ -24,2 +24,1 @@ hideBorders?: boolean;
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=splitview.d.ts.map

dist/esm/splitview/splitview.js

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import { SplitviewApi, SplitviewComponent, Orientation, } from 'dockview-core';
@@ -11,5 +11,7 @@ import { usePortalsLifecycle } from '../react';
     React.useEffect(() => {
+        var _a;
         const splitview = new SplitviewComponent({
             parentElement: domRef.current,
-            orientation: props.orientation || Orientation.HORIZONTAL,
+            disableAutoResizing: props.disableAutoResizing,
+            orientation: (_a = props.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
             frameworkComponents: props.components,
@@ -51,2 +53,1 @@ frameworkWrapper: {
 SplitviewReact.displayName = 'SplitviewComponent';
-//# sourceMappingURL=splitview.js.map

dist/esm/splitview/view.d.ts

@@ -11,2 +11,1 @@ /// <reference types="react" />
 }
-//# sourceMappingURL=view.d.ts.map

dist/esm/splitview/view.js

@@ -10,5 +10,5 @@ import { SplitviewApi, SplitviewPanel, } from 'dockview-core';
     getComponent() {
-        var _a;
+        var _a, _b;
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
-            params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
+            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
             api: this.api,
@@ -19,2 +19,1 @@ containerApi: new SplitviewApi(this._params.accessor),
 }
-//# sourceMappingURL=view.js.map

dist/esm/svg.d.ts

@@ -1,4 +0,3 @@
-import * as React from 'react';
+import React from 'react';
 export declare const CloseButton: () => React.JSX.Element;
 export declare const ExpandMore: () => React.JSX.Element;
-//# sourceMappingURL=svg.d.ts.map

dist/esm/svg.js

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 export const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
@@ -8,2 +8,1 @@ React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
 };
-//# sourceMappingURL=svg.js.map

dist/esm/types.d.ts

@@ -1,9 +0,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;
 }
-//# sourceMappingURL=types.d.ts.map

dist/esm/types.js

 export {};
-//# sourceMappingURL=types.js.map

package.json

 {
     "name": "dockview",
-    "version": "0.0.0-experimental-faeb8241-20231002",
-    "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
-    "main": "./dist/cjs/index.js",
-    "types": "./dist/cjs/index.d.ts",
-    "module": "./dist/esm/index.js",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/mathuo/dockview.git"
-    },
-    "bugs": {
-        "url": "https://github.com/mathuo/dockview/issues"
-    },
-    "homepage": "https://github.com/mathuo/dockview",
-    "scripts": {},
-    "files": [
-        "dist",
-        "README.md"
-    ],
+    "version": "0.0.0-experimental-fc84942-20240523",
+    "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
     "keywords": [
@@ -42,22 +26,35 @@ "splitview",
     ],
+    "homepage": "https://github.com/mathuo/dockview",
+    "bugs": {
+        "url": "https://github.com/mathuo/dockview/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mathuo/dockview.git"
+    },
+    "license": "MIT",
     "author": "https://github.com/mathuo",
-    "license": "MIT",
+    "main": "./dist/cjs/index.js",
+    "module": "./dist/esm/index.js",
+    "types": "./dist/cjs/index.d.ts",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "npm run build:package && npm run build:bundles",
+        "build:bundles": "rollup -c",
+        "build:cjs": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
+        "build:css": "node scripts/copy-css.js",
+        "build:esm": "cross-env ../../node_modules/.bin/tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
+        "build:package": "npm run build:cjs && npm run build:esm && npm run build:css",
+        "clean": "rimraf dist/ .build/ .rollup.cache/",
+        "prepublishOnly": "npm run rebuild && npm run test",
+        "rebuild": "npm run clean && npm run build",
+        "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
+        "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
+    },
     "dependencies": {
-        "dockview-core": "0.0.0-experimental-faeb8241-20231002"
-    },
-    "devDependencies": {
-        "@rollup/plugin-node-resolve": "^15.0.1",
-        "@rollup/plugin-terser": "^0.4.0",
-        "@rollup/plugin-typescript": "^11.0.0",
-        "@testing-library/react": "^13.4.0",
-        "@types/react": "^18.0.28",
-        "@types/react-dom": "^18.0.11",
-        "cross-env": "^7.0.3",
-        "postcss": "^8.4.21",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "rimraf": "^4.1.2",
-        "rollup": "^3.15.0",
-        "rollup-plugin-postcss": "^4.0.2"
+        "dockview-core": "0.0.0-experimental-fc84942-20240523"
     }
 }

README.md

@@ -11,2 +11,3 @@ <div align="center">
 [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview)
+[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview)
 [![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
@@ -23,12 +24,16 @@ [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
 
--   Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
-    dockable and tabular views
--   Extensive API support at the component level and view level
--   Themable and customizable
--   Serialization / deserialization support
--   Tabular docking and Drag and Drop support
--   Floating groups, customized header bars and tab
--   Documentation and examples
+-   Serialization / deserialization with full layout management
+-   Support for split-views, grid-views and 'dockable' views
+-   Themeable and customizable
+-   Tab and Group docking / Drag n' Drop
+-   Popout Windows
+-   Floating Groups
+-   Extensive API
+-   Supports Shadow DOMs
+-   High test coverage
+-   Documentation website with live examples
+-   Transparent builds and Code Analysis
+-   Security at mind - verifed publishing and builds through GitHub Actions
 
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
+Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
 
@@ -35,0 +40,0 @@ ## Quick start

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

11761790

increased by24.48%

Dev dependency count

0

decreased by-100%

Lines of code

68346

increased by25.52%

Number of lines in readme file

57

increased by9.62%

Worsened metrics

Number of package files

89

decreased by-41.83%

Number of low supply chain risk alerts

5

increased byInfinity%

Dependency changes

• + Addeddockview-core@0.0.0-experimental-fc84942-20240523(transitive)

• - Removeddockview-core@0.0.0-experimental-faeb8241-20231002(transitive)

• Updateddockview-core@0.0.0-experimental-fc84942-20240523