dockview - npm Package Compare versions

Comparing version 0.0.0-experimental-faeb8241-20231002 to 0.0.0-experimental-fd24604-20240219

dist/cjs/dockview/defaultTab.d.ts

@@ -8,2 +8,1 @@ import { IDockviewPanelHeaderProps } from './dockview';
 export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
-//# sourceMappingURL=defaultTab.d.ts.map

dist/cjs/dockview/defaultTab.js

@@ -80,2 +80,1 @@ "use strict";
 exports.DockviewDefaultTab = DockviewDefaultTab;
-//# sourceMappingURL=defaultTab.js.map

dist/cjs/dockview/dockview.d.ts

 import * as React from 'react';
-import { DockviewDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi } from 'dockview-core';
+import { DockviewWillDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi, DockviewPanelRenderer, DroptargetOverlayModel, DockviewDidDropEvent } from 'dockview-core';
 import { IWatermarkPanelProps } from './reactWatermarkPart';
@@ -26,3 +26,4 @@ import { PanelCollection, PanelParameters } from '../types';
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onDidDrop?: (event: DockviewDropEvent) => void;
+    onDidDrop?: (event: DockviewDidDropEvent) => void;
+    onWillDrop?: (event: DockviewWillDropEvent) => void;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
@@ -42,4 +43,8 @@ hideBorders?: boolean;
     };
+    debug?: boolean;
+    defaultRenderer?: DockviewPanelRenderer;
+    rootOverlayModel?: DroptargetOverlayModel;
+    locked?: boolean;
+    disableDnd?: boolean;
 }
 export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=dockview.d.ts.map

dist/cjs/dockview/dockview.js

@@ -64,2 +64,3 @@ "use strict";
     React.useEffect(function () {
+        var _a;
         if (!domRef.current) {
@@ -93,3 +94,3 @@ return function () {
         };
-        var frameworkTabComponents = props.tabComponents || {};
+        var frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
         if (props.defaultTabComponent) {
@@ -103,2 +104,3 @@ frameworkTabComponents[DEFAULT_REACT_TAB] =
             frameworkComponents: props.components,
+            disableAutoResizing: props.disableAutoResizing,
             frameworkTabComponents: frameworkTabComponents,
@@ -119,4 +121,9 @@ watermarkFrameworkComponent: props.watermarkComponent,
             floatingGroupBounds: props.floatingGroupBounds,
+            defaultRenderer: props.defaultRenderer,
+            debug: props.debug,
+            rootOverlayModel: props.rootOverlayModel,
+            locked: props.locked,
+            disableDnd: props.disableDnd,
         });
-        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
         dockview.layout(clientWidth, clientHeight);
@@ -133,2 +140,16 @@ if (props.onReady) {
         if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.locked = !!props.locked;
+    }, [props.locked]);
+    React.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            disableDnd: props.disableDnd,
+        });
+    }, [props.disableDnd]);
+    React.useEffect(function () {
+        if (!dockviewRef.current) {
             return function () {
@@ -149,2 +170,17 @@ // noop
         if (!dockviewRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var disposable = dockviewRef.current.onWillDrop(function (event) {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
+    React.useEffect(function () {
+        if (!dockviewRef.current) {
             return;
@@ -197,6 +233,7 @@ }
     React.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) {
@@ -234,2 +271,10 @@ frameworkTabComponents[DEFAULT_REACT_TAB] =
         dockviewRef.current.updateOptions({
+            rootOverlayModel: props.rootOverlayModel,
+        });
+    }, [props.rootOverlayModel]);
+    React.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
             createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
@@ -241,2 +286,1 @@ });
 exports.DockviewReact.displayName = 'DockviewComponent';
-//# sourceMappingURL=dockview.js.map

dist/cjs/dockview/headerActionsRenderer.d.ts

@@ -34,2 +34,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=headerActionsRenderer.d.ts.map

dist/cjs/dockview/headerActionsRenderer.js

@@ -88,2 +88,1 @@ "use strict";
 exports.ReactHeaderActionsRendererPart = ReactHeaderActionsRendererPart;
-//# sourceMappingURL=headerActionsRenderer.js.map

dist/cjs/dockview/reactContentPart.d.ts

@@ -23,2 +23,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=reactContentPart.d.ts.map

dist/cjs/dockview/reactContentPart.js

@@ -51,2 +51,1 @@ "use strict";
 exports.ReactPanelContentPart = ReactPanelContentPart;
-//# sourceMappingURL=reactContentPart.js.map

dist/cjs/dockview/reactHeaderPart.d.ts

@@ -19,2 +19,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=reactHeaderPart.d.ts.map

dist/cjs/dockview/reactHeaderPart.js

@@ -44,2 +44,1 @@ "use strict";
 exports.ReactPanelHeaderPart = ReactPanelHeaderPart;
-//# sourceMappingURL=reactHeaderPart.js.map

dist/cjs/dockview/reactWatermarkPart.d.ts

@@ -25,2 +25,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=reactWatermarkPart.d.ts.map

dist/cjs/dockview/reactWatermarkPart.js

@@ -35,7 +35,7 @@ "use strict";
     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 : {} });
     };
@@ -55,2 +55,1 @@ ReactWatermarkPart.prototype.layout = function (_width, _height) {
 exports.ReactWatermarkPart = ReactWatermarkPart;
-//# sourceMappingURL=reactWatermarkPart.js.map

dist/cjs/gridview/gridview.d.ts

@@ -23,2 +23,1 @@ import * as React from 'react';
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=gridview.d.ts.map

dist/cjs/gridview/gridview.js

@@ -53,2 +53,3 @@ "use strict";
     React.useEffect(function () {
+        var _a;
         if (!domRef.current) {
@@ -61,6 +62,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 +80,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);
@@ -100,2 +102,1 @@ if (props.onReady) {
 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

@@ -11,2 +11,1 @@ export * from 'dockview-core';
 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

@@ -25,2 +25,1 @@ import * as React from 'react';
 export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=paneview.d.ts.map

dist/cjs/paneview/paneview.js

@@ -71,2 +71,3 @@ "use strict";
             parentElement: domRef.current,
+            disableAutoResizing: props.disableAutoResizing,
             frameworkComponents: props.components,
@@ -141,2 +142,1 @@ components: {},
 exports.PaneviewReact.displayName = 'PaneviewComponent';
-//# sourceMappingURL=paneview.js.map

dist/cjs/paneview/view.d.ts

@@ -20,2 +20,1 @@ import * as React 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

@@ -34,4 +34,3 @@ import * as React from 'react';
 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

@@ -62,3 +62,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isReactElement = exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
+exports.isReactComponent = exports.usePortalsLifecycle = exports.ReactPart = exports.ReactPartContext = void 0;
 var React = __importStar(require("react"));
@@ -130,9 +130,9 @@ var ReactDOM = __importStar(require("react-dom"));
         }
-        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');
         }
@@ -194,7 +194,10 @@ var bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
 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

@@ -23,2 +23,1 @@ import * as React from 'react';
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=splitview.d.ts.map

dist/cjs/splitview/splitview.js

@@ -53,5 +53,7 @@ "use strict";
     React.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 +74,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);
@@ -94,2 +96,1 @@ if (props.onReady) {
 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

 import * as 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

@@ -36,2 +36,1 @@ "use strict";
 exports.ExpandMore = ExpandMore;
-//# sourceMappingURL=svg.js.map

dist/cjs/types.d.ts

@@ -9,2 +9,1 @@ import * as React from 'react';
 }
-//# 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

@@ -8,2 +8,1 @@ import { IDockviewPanelHeaderProps } from './dockview';
 export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
-//# sourceMappingURL=defaultTab.d.ts.map

dist/esm/dockview/defaultTab.js

@@ -42,2 +42,1 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-//# sourceMappingURL=defaultTab.js.map

dist/esm/dockview/dockview.d.ts

 import * as React from 'react';
-import { DockviewDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi } from 'dockview-core';
+import { DockviewWillDropEvent, DockviewDndOverlayEvent, DockviewPanelApi, DockviewApi, DockviewPanelRenderer, DroptargetOverlayModel, DockviewDidDropEvent } from 'dockview-core';
 import { IWatermarkPanelProps } from './reactWatermarkPart';
@@ -26,3 +26,4 @@ import { PanelCollection, PanelParameters } from '../types';
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onDidDrop?: (event: DockviewDropEvent) => void;
+    onDidDrop?: (event: DockviewDidDropEvent) => void;
+    onWillDrop?: (event: DockviewWillDropEvent) => void;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
@@ -42,4 +43,8 @@ hideBorders?: boolean;
     };
+    debug?: boolean;
+    defaultRenderer?: DockviewPanelRenderer;
+    rootOverlayModel?: DroptargetOverlayModel;
+    locked?: boolean;
+    disableDnd?: boolean;
 }
 export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=dockview.d.ts.map

dist/esm/dockview/dockview.js

@@ -22,2 +22,3 @@ import * as React from 'react';
     React.useEffect(() => {
+        var _a;
         if (!domRef.current) {
@@ -51,3 +52,3 @@ return () => {
         };
-        const frameworkTabComponents = props.tabComponents || {};
+        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
         if (props.defaultTabComponent) {
@@ -61,2 +62,3 @@ frameworkTabComponents[DEFAULT_REACT_TAB] =
             frameworkComponents: props.components,
+            disableAutoResizing: props.disableAutoResizing,
             frameworkTabComponents,
@@ -77,2 +79,7 @@ watermarkFrameworkComponent: props.watermarkComponent,
             floatingGroupBounds: props.floatingGroupBounds,
+            defaultRenderer: props.defaultRenderer,
+            debug: props.debug,
+            rootOverlayModel: props.rootOverlayModel,
+            locked: props.locked,
+            disableDnd: props.disableDnd,
         });
@@ -91,2 +98,16 @@ const { clientWidth, clientHeight } = domRef.current;
         if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.locked = !!props.locked;
+    }, [props.locked]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            disableDnd: props.disableDnd,
+        });
+    }, [props.disableDnd]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
             return () => {
@@ -107,2 +128,17 @@ // noop
         if (!dockviewRef.current) {
+            return () => {
+                // noop
+            };
+        }
+        const disposable = dockviewRef.current.onWillDrop((event) => {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
             return;
@@ -155,6 +191,7 @@ }
     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) {
@@ -192,2 +229,10 @@ frameworkTabComponents[DEFAULT_REACT_TAB] =
         dockviewRef.current.updateOptions({
+            rootOverlayModel: props.rootOverlayModel,
+        });
+    }, [props.rootOverlayModel]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
             createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
@@ -199,2 +244,1 @@ });
 DockviewReact.displayName = 'DockviewComponent';
-//# sourceMappingURL=dockview.js.map

dist/esm/dockview/headerActionsRenderer.d.ts

@@ -34,2 +34,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=headerActionsRenderer.d.ts.map

dist/esm/dockview/headerActionsRenderer.js

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

dist/esm/dockview/reactContentPart.d.ts

@@ -23,2 +23,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=reactContentPart.d.ts.map

dist/esm/dockview/reactContentPart.js

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

dist/esm/dockview/reactHeaderPart.d.ts

@@ -19,2 +19,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=reactHeaderPart.d.ts.map

dist/esm/dockview/reactHeaderPart.js

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

dist/esm/dockview/reactWatermarkPart.d.ts

@@ -25,2 +25,1 @@ import * as React from 'react';
 }
-//# sourceMappingURL=reactWatermarkPart.d.ts.map

dist/esm/dockview/reactWatermarkPart.js

@@ -28,7 +28,7 @@ import { ReactPart } from '../react';
     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 : {} });
     }
@@ -46,2 +46,1 @@ layout(_width, _height) {
 }
-//# sourceMappingURL=reactWatermarkPart.js.map

dist/esm/gridview/gridview.d.ts

@@ -23,2 +23,1 @@ import * as React from 'react';
 export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=gridview.d.ts.map

dist/esm/gridview/gridview.js

@@ -11,2 +11,3 @@ import * as React from 'react';
     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

@@ -11,2 +11,1 @@ export * from 'dockview-core';
 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

@@ -25,2 +25,1 @@ import * as React from 'react';
 export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=paneview.d.ts.map

dist/esm/paneview/paneview.js

@@ -16,2 +16,3 @@ import * as React 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

@@ -20,2 +20,1 @@ import * as React 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

@@ -34,4 +34,3 @@ import * as React from 'react';
 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

@@ -66,9 +66,9 @@ import * as React from 'react';
         }
-        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

@@ -23,2 +23,1 @@ import * as React from 'react';
 export declare const SplitviewReact: React.ForwardRefExoticComponent<ISplitviewReactProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=splitview.d.ts.map

dist/esm/splitview/splitview.js

@@ -11,5 +11,7 @@ import * as React 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

 import * as 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

@@ -8,2 +8,1 @@ import * as React from 'react';
 };
-//# sourceMappingURL=svg.js.map

dist/esm/types.d.ts

@@ -9,2 +9,1 @@ import * as React from 'react';
 }
-//# 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",
+    "version": "0.0.0-experimental-fd24604-20240219",
     "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"
-    ],
     "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": "gulp sass",
+        "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-fd24604-20240219"
     }
 }

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

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

11396409

increased by20.61%

Dev dependency count

0

decreased by-100%

Lines of code

66310

increased by21.78%

Number of lines in readme file

57

increased by9.62%

Worsened metrics

Number of package files

89

decreased by-41.83%

Dependency changes

• + Addeddockview-core@0.0.0-experimental-fd24604-20240219(transitive)

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

• Updateddockview-core@0.0.0-experimental-fd24604-20240219