dockview - npm Package Compare versions

Comparing version 0.0.0-experimental-4ff77d46-20230221 to 0.0.0-experimental-806ff2a9-20230927

dist/cjs/gridview/gridview.d.ts

@@ -1,132 +0,23 @@
-import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/core/splitview';
-import { LeafNode } from './leafNode';
-import { Node } from './types';
-import { Event } from '../events';
-import { IDisposable } from '../lifecycle';
-import { Position } from '../dnd/droptarget';
-export declare function indexInParent(element: HTMLElement): number;
-/**
- * Find the grid location of a specific DOM element by traversing the parent
- * chain and finding each child index on the way.
- *
- * This will break as soon as DOM structures of the Splitview or Gridview change.
- */
-export declare function getGridLocation(element: HTMLElement): number[];
-export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[];
-export declare function getDirectionOrientation(direction: Position): Orientation;
-export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation;
-export interface IViewSize {
-    width?: number;
-    height?: number;
+import * as React from 'react';
+import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface GridviewReadyEvent {
+    api: GridviewApi;
 }
-export interface IGridView {
-    readonly onDidChange: Event<IViewSize | undefined>;
-    readonly element: HTMLElement;
-    readonly minimumWidth: number;
-    readonly maximumWidth: number;
-    readonly minimumHeight: number;
-    readonly maximumHeight: number;
-    priority?: LayoutPriority;
-    layout(width: number, height: number): void;
-    toJSON(): object;
-    fromJSON?(json: object): void;
-    snap?: boolean;
-    setVisible?(visible: boolean): void;
+export interface IGridviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: GridviewPanelApi;
+    containerApi: GridviewApi;
 }
-export declare const orthogonal: (orientation: Orientation) => Orientation;
-export interface GridLeafNode<T extends IGridView> {
-    readonly view: T;
-    readonly cachedVisibleSize: number | undefined;
-    readonly box: {
-        width: number;
-        height: number;
-    };
+export interface IGridviewReactProps {
+    orientation?: Orientation;
+    onReady: (event: GridviewReadyEvent) => void;
+    components: PanelCollection<IGridviewPanelProps>;
+    hideBorders?: boolean;
+    className?: string;
+    proportionalLayout?: boolean;
+    disableAutoResizing?: boolean;
 }
-export interface GridBranchNode<T extends IGridView> {
-    readonly children: GridNode<T>[];
-    readonly box: {
-        width: number;
-        height: number;
-    };
-}
-export type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>;
-export declare function isGridBranchNode<T extends IGridView>(node: GridNode<T>): node is GridBranchNode<T>;
-export interface SerializedGridObject<T> {
-    type: 'leaf' | 'branch';
-    data: T | SerializedGridObject<T>[];
-    size?: number;
-    visible?: boolean;
-}
-export interface ISerializedLeafNode<T = any> {
-    type: 'leaf';
-    data: T;
-    size: number;
-    visible?: boolean;
-}
-export interface ISerializedBranchNode {
-    type: 'branch';
-    data: ISerializedNode[];
-    size: number;
-}
-export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
-export interface INodeDescriptor {
-    node: Node;
-    visible?: boolean;
-}
-export interface IViewDeserializer {
-    fromJSON: (data: ISerializedLeafNode) => IGridView;
-}
-export declare class Gridview implements IDisposable {
-    readonly proportionalLayout: boolean;
-    readonly styles: ISplitviewStyles | undefined;
-    private _root;
-    readonly element: HTMLElement;
-    private disposable;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<{
-        size?: number;
-        orthogonalSize?: number;
-    }>;
-    get length(): number;
-    serialize(): {
-        root: SerializedGridObject<any>;
-        width: number;
-        height: number;
-        orientation: Orientation;
-    };
-    dispose(): void;
-    clear(): void;
-    deserialize(json: any, deserializer: IViewDeserializer): void;
-    private _deserialize;
-    private _deserializeNode;
-    get orientation(): Orientation;
-    set orientation(orientation: Orientation);
-    private get root();
-    private set root(value);
-    /**
-     * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
-     * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
-     */
-    insertOrthogonalSplitviewAtRoot(): void;
-    next(location: number[]): LeafNode;
-    previous(location: number[]): LeafNode;
-    getView(): GridBranchNode<IGridView>;
-    getView(location?: number[]): GridNode<IGridView>;
-    private _getViews;
-    private progmaticSelect;
-    get width(): number;
-    get height(): number;
-    get minimumWidth(): number;
-    get minimumHeight(): number;
-    get maximumWidth(): number;
-    get maximumHeight(): number;
-    constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation);
-    isViewVisible(location: number[]): boolean;
-    setViewVisible(location: number[], visible: boolean): void;
-    moveView(parentLocation: number[], from: number, to: number): void;
-    addView(view: IGridView, size: number | Sizing, location: number[]): void;
-    remove(view: IGridView, sizing?: Sizing): IGridView;
-    removeView(location: number[], sizing?: Sizing): IGridView;
-    layout(width: number, height: number): void;
-    private getNode;
-}
+export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=gridview.d.ts.map

dist/cjs/gridview/gridview.js

 "use strict";
-/*---------------------------------------------------------------------------------------------
- * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
- * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
- *--------------------------------------------------------------------------------------------*/
+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) {
@@ -22,491 +41,58 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gridview = exports.isGridBranchNode = exports.orthogonal = exports.getLocationOrientation = exports.getDirectionOrientation = exports.getRelativeLocation = exports.getGridLocation = exports.indexInParent = void 0;
-var splitview_1 = require("../splitview/core/splitview");
-var array_1 = require("../array");
-var leafNode_1 = require("./leafNode");
-var branchNode_1 = require("./branchNode");
-var events_1 = require("../events");
-var lifecycle_1 = require("../lifecycle");
-function findLeaf(candiateNode, last) {
-    if (candiateNode instanceof leafNode_1.LeafNode) {
-        return candiateNode;
-    }
-    if (candiateNode instanceof branchNode_1.BranchNode) {
-        return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-    }
-    throw new Error('invalid node');
-}
-function flipNode(node, size, orthogonalSize) {
-    if (node instanceof branchNode_1.BranchNode) {
-        var result = new branchNode_1.BranchNode((0, exports.orthogonal)(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
-        var totalSize = 0;
-        for (var i = node.children.length - 1; i >= 0; i--) {
-            var child = node.children[i];
-            var childSize = child instanceof branchNode_1.BranchNode ? child.orthogonalSize : child.size;
-            var newSize = node.size === 0
-                ? 0
-                : Math.round((size * childSize) / node.size);
-            totalSize += newSize;
-            // The last view to add should adjust to rounding errors
-            if (i === 0) {
-                newSize += size - totalSize;
-            }
-            result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true);
+exports.GridviewReact = void 0;
+var React = __importStar(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 () {
+        if (!domRef.current) {
+            return function () {
+                // noop
+            };
         }
-        return result;
-    }
-    else {
-        return new leafNode_1.LeafNode(node.view, (0, exports.orthogonal)(node.orientation), orthogonalSize);
-    }
-}
-function indexInParent(element) {
-    var parentElement = element.parentElement;
-    if (!parentElement) {
-        throw new Error('Invalid grid element');
-    }
-    var el = parentElement.firstElementChild;
-    var index = 0;
-    while (el !== element && el !== parentElement.lastElementChild && el) {
-        el = el.nextElementSibling;
-        index++;
-    }
-    return index;
-}
-exports.indexInParent = indexInParent;
-/**
- * Find the grid location of a specific DOM element by traversing the parent
- * chain and finding each child index on the way.
- *
- * This will break as soon as DOM structures of the Splitview or Gridview change.
- */
-function getGridLocation(element) {
-    var parentElement = element.parentElement;
-    if (!parentElement) {
-        throw new Error('Invalid grid element');
-    }
-    if (/\bgrid-view\b/.test(parentElement.className)) {
-        return [];
-    }
-    var index = indexInParent(parentElement);
-    var ancestor = parentElement.parentElement.parentElement.parentElement;
-    return __spreadArray(__spreadArray([], __read(getGridLocation(ancestor)), false), [index], false);
-}
-exports.getGridLocation = getGridLocation;
-function getRelativeLocation(rootOrientation, location, direction) {
-    var orientation = getLocationOrientation(rootOrientation, location);
-    var directionOrientation = getDirectionOrientation(direction);
-    if (orientation === directionOrientation) {
-        var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], _index = _a[1];
-        var index = _index;
-        if (direction === 'right' || direction === 'bottom') {
-            index += 1;
+        var gridview = new dockview_core_1.GridviewComponent({
+            parentElement: domRef.current,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
+            orientation: props.orientation || dockview_core_1.Orientation.HORIZONTAL,
+            frameworkComponents: props.components,
+            frameworkComponentFactory: {
+                createComponent: function (id, componentId, component) {
+                    return new view_1.ReactGridPanelView(id, componentId, component, {
+                        addPortal: addPortal,
+                    });
+                },
+            },
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+        });
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        gridview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new dockview_core_1.GridviewApi(gridview) });
         }
-        return __spreadArray(__spreadArray([], __read(rest), false), [index], false);
-    }
-    else {
-        var index = direction === 'right' || direction === 'bottom' ? 1 : 0;
-        return __spreadArray(__spreadArray([], __read(location), false), [index], false);
-    }
-}
-exports.getRelativeLocation = getRelativeLocation;
-function getDirectionOrientation(direction) {
-    return direction === 'top' || direction === 'bottom'
-        ? splitview_1.Orientation.VERTICAL
-        : splitview_1.Orientation.HORIZONTAL;
-}
-exports.getDirectionOrientation = getDirectionOrientation;
-function getLocationOrientation(rootOrientation, location) {
-    return location.length % 2 === 0
-        ? (0, exports.orthogonal)(rootOrientation)
-        : rootOrientation;
-}
-exports.getLocationOrientation = getLocationOrientation;
-var orthogonal = function (orientation) {
-    return orientation === splitview_1.Orientation.HORIZONTAL
-        ? splitview_1.Orientation.VERTICAL
-        : splitview_1.Orientation.HORIZONTAL;
-};
-exports.orthogonal = orthogonal;
-function isGridBranchNode(node) {
-    return !!node.children;
-}
-exports.isGridBranchNode = isGridBranchNode;
-var serializeBranchNode = function (node, orientation) {
-    var size = orientation === splitview_1.Orientation.VERTICAL ? node.box.width : node.box.height;
-    if (!isGridBranchNode(node)) {
-        if (typeof node.cachedVisibleSize === 'number') {
-            return {
-                type: 'leaf',
-                data: node.view.toJSON(),
-                size: node.cachedVisibleSize,
-                visible: false,
-            };
-        }
-        return { type: 'leaf', data: node.view.toJSON(), size: size };
-    }
-    return {
-        type: 'branch',
-        data: node.children.map(function (c) {
-            return serializeBranchNode(c, (0, exports.orthogonal)(orientation));
-        }),
-        size: size,
-    };
-};
-var Gridview = /** @class */ (function () {
-    function Gridview(proportionalLayout, styles, orientation) {
-        this.proportionalLayout = proportionalLayout;
-        this.styles = styles;
-        this.disposable = new lifecycle_1.MutableDisposable();
-        this._onDidChange = new events_1.Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.element = document.createElement('div');
-        this.element.className = 'grid-view';
-        this.root = new branchNode_1.BranchNode(orientation, proportionalLayout, styles, 0, 0);
-    }
-    Object.defineProperty(Gridview.prototype, "length", {
-        get: function () {
-            return this._root ? this._root.children.length : 0;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Gridview.prototype.serialize = function () {
-        var root = serializeBranchNode(this.getView(), this.orientation);
-        return {
-            root: root,
-            width: this.width,
-            height: this.height,
-            orientation: this.orientation,
+        gridviewRef.current = gridview;
+        return function () {
+            gridview.dispose();
         };
-    };
-    Gridview.prototype.dispose = function () {
-        this.disposable.dispose();
-        this._onDidChange.dispose();
-        this.root.dispose();
-        this.element.remove();
-    };
-    Gridview.prototype.clear = function () {
-        var orientation = this.root.orientation;
-        this.root = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize);
-    };
-    Gridview.prototype.deserialize = function (json, deserializer) {
-        var orientation = json.orientation;
-        var height = orientation === splitview_1.Orientation.VERTICAL ? json.height : json.width;
-        this._deserialize(json.root, orientation, deserializer, height);
-    };
-    Gridview.prototype._deserialize = function (root, orientation, deserializer, orthogonalSize) {
-        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
-    };
-    Gridview.prototype._deserializeNode = function (node, orientation, deserializer, orthogonalSize, isRoot) {
-        var _this = this;
-        if (isRoot === void 0) { isRoot = false; }
-        var result;
-        if (node.type === 'branch') {
-            var serializedChildren = node.data;
-            var children = serializedChildren.map(function (serializedChild) {
-                return {
-                    node: _this._deserializeNode(serializedChild, (0, exports.orthogonal)(orientation), deserializer, node.size),
-                    visible: serializedChild.visible,
-                };
-            });
-            // HORIZONTAL => height=orthogonalsize width=size
-            // VERTICAL => height=size width=orthogonalsize
-            result = new branchNode_1.BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
-        }
-        else {
-            result = new leafNode_1.LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
-        }
-        return result;
-    };
-    Object.defineProperty(Gridview.prototype, "orientation", {
-        get: function () {
-            return this.root.orientation;
-        },
-        set: function (orientation) {
-            if (this.root.orientation === orientation) {
-                return;
-            }
-            var _a = this.root, size = _a.size, orthogonalSize = _a.orthogonalSize;
-            this.root = flipNode(this.root, orthogonalSize, size);
-            this.root.layout(size, orthogonalSize);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Gridview.prototype, "root", {
-        get: function () {
-            return this._root;
-        },
-        set: function (root) {
-            var _this = this;
-            var oldRoot = this._root;
-            if (oldRoot) {
-                oldRoot.dispose();
-                this.element.removeChild(oldRoot.element);
-            }
-            this._root = root;
-            this.element.appendChild(this._root.element);
-            this.disposable.value = this._root.onDidChange(function (e) {
-                _this._onDidChange.fire(e);
-            });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
-     * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
-     */
-    Gridview.prototype.insertOrthogonalSplitviewAtRoot = function () {
-        var _this = this;
-        if (!this._root) {
+    }, []);
+    React.useEffect(function () {
+        if (!gridviewRef.current) {
             return;
         }
-        var oldRoot = this.root;
-        oldRoot.element.remove();
-        this._root = new branchNode_1.BranchNode((0, exports.orthogonal)(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
-        if (oldRoot.children.length === 1) {
-            // can remove one level of redundant branching if there is only a single child
-            var childReference = oldRoot.children[0];
-            oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
-            oldRoot.dispose();
-            this._root.addChild(childReference, splitview_1.Sizing.Distribute, 0);
-        }
-        else {
-            this._root.addChild(oldRoot, splitview_1.Sizing.Distribute, 0);
-        }
-        this.element.appendChild(this._root.element);
-        this.disposable.value = this._root.onDidChange(function (e) {
-            _this._onDidChange.fire(e);
+        gridviewRef.current.updateOptions({
+            frameworkComponents: props.components,
         });
-    };
-    Gridview.prototype.next = function (location) {
-        return this.progmaticSelect(location);
-    };
-    Gridview.prototype.previous = function (location) {
-        return this.progmaticSelect(location, true);
-    };
-    Gridview.prototype.getView = function (location) {
-        var node = location ? this.getNode(location)[1] : this.root;
-        return this._getViews(node, this.orientation);
-    };
-    Gridview.prototype._getViews = function (node, orientation, cachedVisibleSize) {
-        var box = { height: node.height, width: node.width };
-        if (node instanceof leafNode_1.LeafNode) {
-            return { box: box, view: node.view, cachedVisibleSize: cachedVisibleSize };
-        }
-        var children = [];
-        for (var i = 0; i < node.children.length; i++) {
-            var child = node.children[i];
-            var nodeCachedVisibleSize = node.getChildCachedVisibleSize(i);
-            children.push(this._getViews(child, (0, exports.orthogonal)(orientation), nodeCachedVisibleSize));
-        }
-        return { box: box, children: children };
-    };
-    Gridview.prototype.progmaticSelect = function (location, reverse) {
-        if (reverse === void 0) { reverse = false; }
-        var _a = __read(this.getNode(location), 2), path = _a[0], node = _a[1];
-        if (!(node instanceof leafNode_1.LeafNode)) {
-            throw new Error('invalid location');
-        }
-        for (var i = path.length - 1; i > -1; i--) {
-            var n = path[i];
-            var l = location[i] || 0;
-            var canProgressInCurrentLevel = reverse
-                ? l - 1 > -1
-                : l + 1 < n.children.length;
-            if (canProgressInCurrentLevel) {
-                return findLeaf(n.children[reverse ? l - 1 : l + 1], reverse);
-            }
-        }
-        return findLeaf(this.root, reverse);
-    };
-    Object.defineProperty(Gridview.prototype, "width", {
-        get: function () {
-            return this.root.width;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Gridview.prototype, "height", {
-        get: function () {
-            return this.root.height;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Gridview.prototype, "minimumWidth", {
-        get: function () {
-            return this.root.minimumWidth;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Gridview.prototype, "minimumHeight", {
-        get: function () {
-            return this.root.minimumHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Gridview.prototype, "maximumWidth", {
-        get: function () {
-            return this.root.maximumHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Gridview.prototype, "maximumHeight", {
-        get: function () {
-            return this.root.maximumHeight;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Gridview.prototype.isViewVisible = function (location) {
-        var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
-        var _b = __read(this.getNode(rest), 2), parent = _b[1];
-        if (!(parent instanceof branchNode_1.BranchNode)) {
-            throw new Error('Invalid from location');
-        }
-        return parent.isChildVisible(index);
-    };
-    Gridview.prototype.setViewVisible = function (location, visible) {
-        var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
-        var _b = __read(this.getNode(rest), 2), parent = _b[1];
-        if (!(parent instanceof branchNode_1.BranchNode)) {
-            throw new Error('Invalid from location');
-        }
-        parent.setChildVisible(index, visible);
-    };
-    Gridview.prototype.moveView = function (parentLocation, from, to) {
-        var _a = __read(this.getNode(parentLocation), 2), parent = _a[1];
-        if (!(parent instanceof branchNode_1.BranchNode)) {
-            throw new Error('Invalid location');
-        }
-        parent.moveChild(from, to);
-    };
-    Gridview.prototype.addView = function (view, size, location) {
-        var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
-        var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1];
-        if (parent instanceof branchNode_1.BranchNode) {
-            var node = new leafNode_1.LeafNode(view, (0, exports.orthogonal)(parent.orientation), parent.orthogonalSize);
-            parent.addChild(node, size, index);
-        }
-        else {
-            var _c = __read(__spreadArray([], __read(pathToParent), false).reverse()), grandParent = _c[0], _ = _c.slice(1);
-            var _d = __read(__spreadArray([], __read(rest), false).reverse()), parentIndex = _d[0], __ = _d.slice(1);
-            var newSiblingSize = 0;
-            var newSiblingCachedVisibleSize = grandParent.getChildCachedVisibleSize(parentIndex);
-            if (typeof newSiblingCachedVisibleSize === 'number') {
-                newSiblingSize = splitview_1.Sizing.Invisible(newSiblingCachedVisibleSize);
-            }
-            grandParent.removeChild(parentIndex);
-            var newParent = new branchNode_1.BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
-            grandParent.addChild(newParent, parent.size, parentIndex);
-            var newSibling = new leafNode_1.LeafNode(parent.view, grandParent.orientation, parent.size);
-            newParent.addChild(newSibling, newSiblingSize, 0);
-            if (typeof size !== 'number' && size.type === 'split') {
-                size = { type: 'split', index: 0 };
-            }
-            var node = new leafNode_1.LeafNode(view, grandParent.orientation, parent.size);
-            newParent.addChild(node, size, index);
-        }
-    };
-    Gridview.prototype.remove = function (view, sizing) {
-        var location = getGridLocation(view.element);
-        return this.removeView(location, sizing);
-    };
-    Gridview.prototype.removeView = function (location, sizing) {
-        var _a = __read((0, array_1.tail)(location), 2), rest = _a[0], index = _a[1];
-        var _b = __read(this.getNode(rest), 2), pathToParent = _b[0], parent = _b[1];
-        if (!(parent instanceof branchNode_1.BranchNode)) {
-            throw new Error('Invalid location');
-        }
-        var node = parent.children[index];
-        if (!(node instanceof leafNode_1.LeafNode)) {
-            throw new Error('Invalid location');
-        }
-        parent.removeChild(index, sizing);
-        if (parent.children.length === 0) {
-            return node.view;
-        }
-        if (parent.children.length > 1) {
-            return node.view;
-        }
-        var sibling = parent.children[0];
-        if (pathToParent.length === 0) {
-            // parent is root
-            if (sibling instanceof leafNode_1.LeafNode) {
-                return node.view;
-            }
-            // we must promote sibling to be the new root
-            parent.removeChild(0, sizing);
-            this.root = sibling;
-            return node.view;
-        }
-        var _c = __read(__spreadArray([], __read(pathToParent), false).reverse()), grandParent = _c[0], _ = _c.slice(1);
-        var _d = __read(__spreadArray([], __read(rest), false).reverse()), parentIndex = _d[0], __ = _d.slice(1);
-        var isSiblingVisible = parent.isChildVisible(0);
-        parent.removeChild(0, sizing);
-        var sizes = grandParent.children.map(function (_size, i) {
-            return grandParent.getChildSize(i);
-        });
-        grandParent.removeChild(parentIndex, sizing);
-        if (sibling instanceof branchNode_1.BranchNode) {
-            sizes.splice.apply(sizes, __spreadArray([parentIndex,
-                1], __read(sibling.children.map(function (c) { return c.size; })), false));
-            for (var i = 0; i < sibling.children.length; i++) {
-                var child = sibling.children[i];
-                grandParent.addChild(child, child.size, parentIndex + i);
-            }
-        }
-        else {
-            var newSibling = new leafNode_1.LeafNode(sibling.view, (0, exports.orthogonal)(sibling.orientation), sibling.size);
-            var siblingSizing = isSiblingVisible
-                ? sibling.orthogonalSize
-                : splitview_1.Sizing.Invisible(sibling.orthogonalSize);
-            grandParent.addChild(newSibling, siblingSizing, parentIndex);
-        }
-        for (var i = 0; i < sizes.length; i++) {
-            grandParent.resizeChild(i, sizes[i]);
-        }
-        return node.view;
-    };
-    Gridview.prototype.layout = function (width, height) {
-        var _a = __read(this.root.orientation === splitview_1.Orientation.HORIZONTAL
-            ? [height, width]
-            : [width, height], 2), size = _a[0], orthogonalSize = _a[1];
-        this.root.layout(size, orthogonalSize);
-    };
-    Gridview.prototype.getNode = function (location, node, path) {
-        if (node === void 0) { node = this.root; }
-        if (path === void 0) { path = []; }
-        if (location.length === 0) {
-            return [path, node];
-        }
-        if (!(node instanceof branchNode_1.BranchNode)) {
-            throw new Error('Invalid location');
-        }
-        var _a = __read(location), index = _a[0], rest = _a.slice(1);
-        if (index < 0 || index >= node.children.length) {
-            throw new Error('Invalid location');
-        }
-        var child = node.children[index];
-        path.push(node);
-        return this.getNode(rest, child, path);
-    };
-    return Gridview;
-}());
-exports.Gridview = Gridview;
+    }, [props.components]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.GridviewReact.displayName = 'GridviewComponent';
 //# sourceMappingURL=gridview.js.map

dist/cjs/index.d.ts

@@ -1,30 +0,11 @@
-export * from './dnd/dataTransfer';
-export * from './splitview/core/splitview';
+export * from 'dockview-core';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
+export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
-export * from './gridview/gridview';
-export * from './groupview/groupview';
-export * from './gridview/baseComponentGridview';
-export * from './groupview/panel/content';
-export * from './groupview/tab';
-export * from './groupview/dnd';
-export * from './groupview/types';
-export * from './dockview/options';
-export * from './dockview/dockviewComponent';
-export * from './gridview/gridviewComponent';
-export * from './splitview/splitviewComponent';
-export * from './paneview/paneviewComponent';
-export { PaneviewComponentOptions } from './paneview/options';
-export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
-export * from './paneview/paneviewPanel';
-export * from './groupview/types';
+export * from './types';
 export * from './react';
-export { Event } from './events';
-export { IDisposable } from './lifecycle';
-export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget';
-export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
-export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi';
-export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
-export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi';
-export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
-export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';
+//# sourceMappingURL=index.d.ts.map

dist/cjs/index.js

@@ -17,33 +17,10 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = exports.directionToPosition = exports.positionToDirection = exports.Event = void 0;
-__exportStar(require("./dnd/dataTransfer"), exports);
-__exportStar(require("./splitview/core/splitview"), exports);
+__exportStar(require("dockview-core"), exports);
+__exportStar(require("./dockview/dockview"), exports);
+__exportStar(require("./dockview/defaultTab"), exports);
+__exportStar(require("./splitview/splitview"), exports);
+__exportStar(require("./gridview/gridview"), exports);
 __exportStar(require("./paneview/paneview"), exports);
-__exportStar(require("./gridview/gridview"), exports);
-__exportStar(require("./groupview/groupview"), exports);
-__exportStar(require("./gridview/baseComponentGridview"), exports);
-__exportStar(require("./groupview/panel/content"), exports);
-__exportStar(require("./groupview/tab"), exports);
-__exportStar(require("./groupview/dnd"), exports);
-__exportStar(require("./groupview/types"), exports);
-__exportStar(require("./dockview/options"), exports);
-__exportStar(require("./dockview/dockviewComponent"), exports);
-__exportStar(require("./gridview/gridviewComponent"), exports);
-__exportStar(require("./splitview/splitviewComponent"), exports);
-__exportStar(require("./paneview/paneviewComponent"), exports);
-__exportStar(require("./gridview/gridviewPanel"), exports);
-__exportStar(require("./splitview/splitviewPanel"), exports);
-__exportStar(require("./paneview/paneviewPanel"), exports);
-__exportStar(require("./groupview/types"), exports);
-__exportStar(require("./react"), exports); // TODO: should be conditional on whether user wants the React wrappers
-var events_1 = require("./events");
-Object.defineProperty(exports, "Event", { enumerable: true, get: function () { return events_1.Event; } });
-var droptarget_1 = require("./dnd/droptarget");
-Object.defineProperty(exports, "positionToDirection", { enumerable: true, get: function () { return droptarget_1.positionToDirection; } });
-Object.defineProperty(exports, "directionToPosition", { enumerable: true, get: function () { return droptarget_1.directionToPosition; } });
-var component_api_1 = require("./api/component.api");
-Object.defineProperty(exports, "SplitviewApi", { enumerable: true, get: function () { return component_api_1.SplitviewApi; } });
-Object.defineProperty(exports, "PaneviewApi", { enumerable: true, get: function () { return component_api_1.PaneviewApi; } });
-Object.defineProperty(exports, "GridviewApi", { enumerable: true, get: function () { return component_api_1.GridviewApi; } });
-Object.defineProperty(exports, "DockviewApi", { enumerable: true, get: function () { return component_api_1.DockviewApi; } });
+__exportStar(require("./types"), exports);
+__exportStar(require("./react"), exports);
 //# sourceMappingURL=index.js.map

dist/cjs/paneview/paneview.d.ts

@@ -1,40 +0,25 @@
-import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/core/splitview';
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { Event } from '../events';
-import { PaneviewPanel } from './paneviewPanel';
-interface PaneItem {
-    pane: PaneviewPanel;
-    disposable: IDisposable;
+import * as React from 'react';
+import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface PaneviewReadyEvent {
+    api: PaneviewApi;
 }
-export declare class Paneview extends CompositeDisposable implements IDisposable {
-    private element;
-    private splitview;
-    private paneItems;
-    private _orientation;
-    private animationTimer;
-    private skipAnimation;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<void>;
-    get onDidAddView(): Event<PaneviewPanel>;
-    get onDidRemoveView(): Event<PaneviewPanel>;
-    get minimumSize(): number;
-    get maximumSize(): number;
-    get orientation(): Orientation;
-    get size(): number;
-    get orthogonalSize(): number;
-    constructor(container: HTMLElement, options: {
-        orientation: Orientation;
-        descriptor?: ISplitViewDescriptor;
-    });
-    addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
-    getViewSize(index: number): number;
-    getPanes(): PaneviewPanel[];
-    removePane(index: number, options?: {
-        skipDispose: boolean;
-    }): PaneItem;
-    moveView(from: number, to: number): void;
-    layout(size: number, orthogonalSize: number): void;
-    private setupAnimation;
-    dispose(): void;
+export interface IPaneviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: PaneviewPanelApi;
+    containerApi: PaneviewApi;
+    title: string;
 }
-export {};
+export interface IPaneviewReactProps {
+    onReady: (event: PaneviewReadyEvent) => void;
+    components: PanelCollection<IPaneviewPanelProps>;
+    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    className?: string;
+    disableAutoResizing?: boolean;
+    disableDnd?: boolean;
+    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
+    onDidDrop?(event: PaneviewDropEvent): void;
+}
+export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=paneview.d.ts.map

dist/cjs/paneview/paneview.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
+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 function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+    return __assign.apply(this, arguments);
+};
+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) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paneview = void 0;
-var splitview_1 = require("../splitview/core/splitview");
-var lifecycle_1 = require("../lifecycle");
-var events_1 = require("../events");
-var dom_1 = require("../dom");
-var Paneview = /** @class */ (function (_super) {
-    __extends(Paneview, _super);
-    function Paneview(container, options) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this) || this;
-        _this.paneItems = [];
-        _this.skipAnimation = false;
-        _this._onDidChange = new events_1.Emitter();
-        _this.onDidChange = _this._onDidChange.event;
-        _this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : splitview_1.Orientation.VERTICAL;
-        _this.element = document.createElement('div');
-        _this.element.className = 'pane-container';
-        container.appendChild(_this.element);
-        _this.splitview = new splitview_1.Splitview(_this.element, {
-            orientation: _this._orientation,
-            proportionalLayout: false,
-            descriptor: options.descriptor,
-        });
-        // if we've added views from the descriptor we need to
-        // add the panes to our Pane array and setup animation
-        _this.getPanes().forEach(function (pane) {
-            var disposable = new lifecycle_1.CompositeDisposable(pane.onDidChangeExpansionState(function () {
-                _this.setupAnimation();
-                _this._onDidChange.fire(undefined);
-            }));
-            var paneItem = {
-                pane: pane,
-                disposable: {
-                    dispose: function () {
-                        disposable.dispose();
-                    },
+exports.PaneviewReact = void 0;
+var React = __importStar(require("react"));
+var dockview_core_1 = require("dockview-core");
+var react_1 = 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 () {
+        var createComponent = function (id, _componentId, component) {
+            return new view_1.PanePanelSection(id, component, {
+                addPortal: addPortal,
+            });
+        };
+        var paneview = new dockview_core_1.PaneviewComponent({
+            parentElement: domRef.current,
+            frameworkComponents: props.components,
+            components: {},
+            headerComponents: {},
+            disableDnd: props.disableDnd,
+            headerframeworkComponents: props.headerComponents,
+            frameworkWrapper: {
+                header: {
+                    createComponent: createComponent,
                 },
-            };
-            _this.paneItems.push(paneItem);
-            pane.orthogonalSize = _this.splitview.orthogonalSize;
-        });
-        _this.addDisposables(_this._onDidChange, _this.splitview.onDidSashEnd(function () {
-            _this._onDidChange.fire(undefined);
-        }), _this.splitview.onDidAddView(function () {
-            _this._onDidChange.fire();
-        }), _this.splitview.onDidRemoveView(function () {
-            _this._onDidChange.fire();
-        }));
-        return _this;
-    }
-    Object.defineProperty(Paneview.prototype, "onDidAddView", {
-        get: function () {
-            return this.splitview.onDidAddView;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Paneview.prototype, "onDidRemoveView", {
-        get: function () {
-            return this.splitview.onDidRemoveView;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Paneview.prototype, "minimumSize", {
-        get: function () {
-            return this.splitview.minimumSize;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Paneview.prototype, "maximumSize", {
-        get: function () {
-            return this.splitview.maximumSize;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Paneview.prototype, "orientation", {
-        get: function () {
-            return this.splitview.orientation;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Paneview.prototype, "size", {
-        get: function () {
-            return this.splitview.size;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Paneview.prototype, "orthogonalSize", {
-        get: function () {
-            return this.splitview.orthogonalSize;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Paneview.prototype.addPane = function (pane, size, index, skipLayout) {
-        var _this = this;
-        if (index === void 0) { index = this.splitview.length; }
-        if (skipLayout === void 0) { skipLayout = false; }
-        var disposable = pane.onDidChangeExpansionState(function () {
-            _this.setupAnimation();
-            _this._onDidChange.fire(undefined);
-        });
-        var paneItem = {
-            pane: pane,
-            disposable: {
-                dispose: function () {
-                    disposable.dispose();
+                body: {
+                    createComponent: createComponent,
                 },
             },
+            showDndOverlay: props.showDndOverlay,
+        });
+        var api = new dockview_core_1.PaneviewApi(paneview);
+        var _a = domRef.current, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
+        paneview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: api });
+        }
+        paneviewRef.current = paneview;
+        return function () {
+            paneview.dispose();
         };
-        this.paneItems.splice(index, 0, paneItem);
-        pane.orthogonalSize = this.splitview.orthogonalSize;
-        this.splitview.addView(pane, size, index, skipLayout);
-    };
-    Paneview.prototype.getViewSize = function (index) {
-        return this.splitview.getViewSize(index);
-    };
-    Paneview.prototype.getPanes = function () {
-        return this.splitview.getViews();
-    };
-    Paneview.prototype.removePane = function (index, options) {
-        if (options === void 0) { options = { skipDispose: false }; }
-        var paneItem = this.paneItems.splice(index, 1)[0];
-        this.splitview.removeView(index);
-        if (!options.skipDispose) {
-            paneItem.disposable.dispose();
-            paneItem.pane.dispose();
+    }, []);
+    React.useEffect(function () {
+        if (!paneviewRef.current) {
+            return;
         }
-        return paneItem;
-    };
-    Paneview.prototype.moveView = function (from, to) {
-        if (from === to) {
+        paneviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    React.useEffect(function () {
+        if (!paneviewRef.current) {
             return;
         }
-        var view = this.removePane(from, { skipDispose: true });
-        this.skipAnimation = true;
-        try {
-            this.addPane(view.pane, view.pane.size, to, false);
+        paneviewRef.current.updateOptions({
+            headerframeworkComponents: props.headerComponents,
+        });
+    }, [props.headerComponents]);
+    React.useEffect(function () {
+        if (!paneviewRef.current) {
+            return function () {
+                //
+            };
         }
-        finally {
-            this.skipAnimation = false;
-        }
-    };
-    Paneview.prototype.layout = function (size, orthogonalSize) {
-        this.splitview.layout(size, orthogonalSize);
-    };
-    Paneview.prototype.setupAnimation = function () {
-        var _this = this;
-        if (this.skipAnimation) {
+        var paneview = paneviewRef.current;
+        var disposable = paneview.onDidDrop(function (event) {
+            if (props.onDidDrop) {
+                props.onDidDrop(__assign(__assign({}, event), { api: new dockview_core_1.PaneviewApi(paneview) }));
+            }
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
+    React.useEffect(function () {
+        if (!paneviewRef.current) {
             return;
         }
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-        (0, dom_1.addClasses)(this.element, 'animated');
-        this.animationTimer = setTimeout(function () {
-            _this.animationTimer = undefined;
-            (0, dom_1.removeClasses)(_this.element, 'animated');
-        }, 200);
-    };
-    Paneview.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-        this.paneItems.forEach(function (paneItem) {
-            paneItem.disposable.dispose();
-            paneItem.pane.dispose();
+        paneviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
         });
-        this.paneItems = [];
-        this.splitview.dispose();
-        this.element.remove();
-    };
-    return Paneview;
-}(lifecycle_1.CompositeDisposable));
-exports.Paneview = Paneview;
+    }, [props.showDndOverlay]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.PaneviewReact.displayName = 'PaneviewComponent';
 //# sourceMappingURL=paneview.js.map

dist/cjs/svg.d.ts

@@ -1,3 +0,4 @@
-export declare const createCloseButton: () => SVGSVGElement;
-export declare const createExpandMoreButton: () => SVGSVGElement;
-export declare const createChevronRightButton: () => SVGSVGElement;
+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

 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createChevronRightButton = exports.createExpandMoreButton = exports.createCloseButton = void 0;
-var createSvgElementFromPath = function (params) {
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttributeNS(null, 'height', params.height);
-    svg.setAttributeNS(null, 'width', params.width);
-    svg.setAttributeNS(null, 'viewBox', params.viewbox);
-    svg.setAttributeNS(null, 'aria-hidden', 'false');
-    svg.setAttributeNS(null, 'focusable', 'false');
-    svg.classList.add('dockview-svg');
-    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttributeNS(null, 'd', params.path);
-    svg.appendChild(path);
-    return svg;
+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" }))); };
+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" })));
 };
-var createCloseButton = function () {
-    return createSvgElementFromPath({
-        width: '11',
-        height: '11',
-        viewbox: '0 0 28 28',
-        path: '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.createCloseButton = createCloseButton;
-var createExpandMoreButton = function () {
-    return createSvgElementFromPath({
-        width: '11',
-        height: '11',
-        viewbox: '0 0 24 15',
-        path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
-    });
-};
-exports.createExpandMoreButton = createExpandMoreButton;
-var createChevronRightButton = function () {
-    return createSvgElementFromPath({
-        width: '11',
-        height: '11',
-        viewbox: '0 0 15 25',
-        path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
-    });
-};
-exports.createChevronRightButton = createChevronRightButton;
+exports.ExpandMore = ExpandMore;
 //# sourceMappingURL=svg.js.map

dist/cjs/types.d.ts

@@ -1,8 +0,9 @@
-export interface Constructor<T> {
-    new (): T;
+import * as React from 'react';
+import { Parameters } from 'dockview-core';
+export interface PanelCollection<T extends object> {
+    [name: string]: React.FunctionComponent<T>;
 }
-export interface FrameworkFactory<T> {
-    createComponent: (id: string, componentId: string, component: any) => T;
+export interface PanelParameters<T extends {} = Parameters> {
+    params: T;
 }
-export type FunctionOrValue<T> = (() => T) | T;
-export declare function isBooleanValue(value: any): value is boolean;
+//# sourceMappingURL=types.d.ts.map

dist/cjs/types.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isBooleanValue = void 0;
-function isBooleanValue(value) {
-    return typeof value === 'boolean';
-}
-exports.isBooleanValue = isBooleanValue;
 //# sourceMappingURL=types.js.map

dist/esm/gridview/gridview.d.ts

@@ -1,132 +0,23 @@
-import { ISplitviewStyles, LayoutPriority, Orientation, Sizing } from '../splitview/core/splitview';
-import { LeafNode } from './leafNode';
-import { Node } from './types';
-import { Event } from '../events';
-import { IDisposable } from '../lifecycle';
-import { Position } from '../dnd/droptarget';
-export declare function indexInParent(element: HTMLElement): number;
-/**
- * Find the grid location of a specific DOM element by traversing the parent
- * chain and finding each child index on the way.
- *
- * This will break as soon as DOM structures of the Splitview or Gridview change.
- */
-export declare function getGridLocation(element: HTMLElement): number[];
-export declare function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Position): number[];
-export declare function getDirectionOrientation(direction: Position): Orientation;
-export declare function getLocationOrientation(rootOrientation: Orientation, location: number[]): Orientation;
-export interface IViewSize {
-    width?: number;
-    height?: number;
+import * as React from 'react';
+import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface GridviewReadyEvent {
+    api: GridviewApi;
 }
-export interface IGridView {
-    readonly onDidChange: Event<IViewSize | undefined>;
-    readonly element: HTMLElement;
-    readonly minimumWidth: number;
-    readonly maximumWidth: number;
-    readonly minimumHeight: number;
-    readonly maximumHeight: number;
-    priority?: LayoutPriority;
-    layout(width: number, height: number): void;
-    toJSON(): object;
-    fromJSON?(json: object): void;
-    snap?: boolean;
-    setVisible?(visible: boolean): void;
+export interface IGridviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: GridviewPanelApi;
+    containerApi: GridviewApi;
 }
-export declare const orthogonal: (orientation: Orientation) => Orientation;
-export interface GridLeafNode<T extends IGridView> {
-    readonly view: T;
-    readonly cachedVisibleSize: number | undefined;
-    readonly box: {
-        width: number;
-        height: number;
-    };
+export interface IGridviewReactProps {
+    orientation?: Orientation;
+    onReady: (event: GridviewReadyEvent) => void;
+    components: PanelCollection<IGridviewPanelProps>;
+    hideBorders?: boolean;
+    className?: string;
+    proportionalLayout?: boolean;
+    disableAutoResizing?: boolean;
 }
-export interface GridBranchNode<T extends IGridView> {
-    readonly children: GridNode<T>[];
-    readonly box: {
-        width: number;
-        height: number;
-    };
-}
-export type GridNode<T extends IGridView> = GridLeafNode<T> | GridBranchNode<T>;
-export declare function isGridBranchNode<T extends IGridView>(node: GridNode<T>): node is GridBranchNode<T>;
-export interface SerializedGridObject<T> {
-    type: 'leaf' | 'branch';
-    data: T | SerializedGridObject<T>[];
-    size?: number;
-    visible?: boolean;
-}
-export interface ISerializedLeafNode<T = any> {
-    type: 'leaf';
-    data: T;
-    size: number;
-    visible?: boolean;
-}
-export interface ISerializedBranchNode {
-    type: 'branch';
-    data: ISerializedNode[];
-    size: number;
-}
-export type ISerializedNode = ISerializedLeafNode | ISerializedBranchNode;
-export interface INodeDescriptor {
-    node: Node;
-    visible?: boolean;
-}
-export interface IViewDeserializer {
-    fromJSON: (data: ISerializedLeafNode) => IGridView;
-}
-export declare class Gridview implements IDisposable {
-    readonly proportionalLayout: boolean;
-    readonly styles: ISplitviewStyles | undefined;
-    private _root;
-    readonly element: HTMLElement;
-    private disposable;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<{
-        size?: number;
-        orthogonalSize?: number;
-    }>;
-    get length(): number;
-    serialize(): {
-        root: SerializedGridObject<any>;
-        width: number;
-        height: number;
-        orientation: Orientation;
-    };
-    dispose(): void;
-    clear(): void;
-    deserialize(json: any, deserializer: IViewDeserializer): void;
-    private _deserialize;
-    private _deserializeNode;
-    get orientation(): Orientation;
-    set orientation(orientation: Orientation);
-    private get root();
-    private set root(value);
-    /**
-     * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
-     * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
-     */
-    insertOrthogonalSplitviewAtRoot(): void;
-    next(location: number[]): LeafNode;
-    previous(location: number[]): LeafNode;
-    getView(): GridBranchNode<IGridView>;
-    getView(location?: number[]): GridNode<IGridView>;
-    private _getViews;
-    private progmaticSelect;
-    get width(): number;
-    get height(): number;
-    get minimumWidth(): number;
-    get minimumHeight(): number;
-    get maximumWidth(): number;
-    get maximumHeight(): number;
-    constructor(proportionalLayout: boolean, styles: ISplitviewStyles | undefined, orientation: Orientation);
-    isViewVisible(location: number[]): boolean;
-    setViewVisible(location: number[], visible: boolean): void;
-    moveView(parentLocation: number[], from: number, to: number): void;
-    addView(view: IGridView, size: number | Sizing, location: number[]): void;
-    remove(view: IGridView, sizing?: Sizing): IGridView;
-    removeView(location: number[], sizing?: Sizing): IGridView;
-    layout(width: number, height: number): void;
-    private getNode;
-}
+export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=gridview.d.ts.map

dist/esm/gridview/gridview.js

@@ -1,423 +0,55 @@
-/*---------------------------------------------------------------------------------------------
- * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
- * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid
- *--------------------------------------------------------------------------------------------*/
-import { Orientation, Sizing, } from '../splitview/core/splitview';
-import { tail } from '../array';
-import { LeafNode } from './leafNode';
-import { BranchNode } from './branchNode';
-import { Emitter } from '../events';
-import { MutableDisposable } from '../lifecycle';
-function findLeaf(candiateNode, last) {
-    if (candiateNode instanceof LeafNode) {
-        return candiateNode;
-    }
-    if (candiateNode instanceof BranchNode) {
-        return findLeaf(candiateNode.children[last ? candiateNode.children.length - 1 : 0], last);
-    }
-    throw new Error('invalid node');
-}
-function flipNode(node, size, orthogonalSize) {
-    if (node instanceof BranchNode) {
-        const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize);
-        let totalSize = 0;
-        for (let i = node.children.length - 1; i >= 0; i--) {
-            const child = node.children[i];
-            const childSize = child instanceof BranchNode ? child.orthogonalSize : child.size;
-            let newSize = node.size === 0
-                ? 0
-                : Math.round((size * childSize) / node.size);
-            totalSize += newSize;
-            // The last view to add should adjust to rounding errors
-            if (i === 0) {
-                newSize += size - totalSize;
-            }
-            result.addChild(flipNode(child, orthogonalSize, newSize), newSize, 0, true);
+import * as React from 'react';
+import { GridviewComponent, Orientation, GridviewApi, } from 'dockview-core';
+import { ReactGridPanelView } from './view';
+import { usePortalsLifecycle } from '../react';
+export const GridviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const gridviewRef = React.useRef();
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
+        if (!domRef.current) {
+            return () => {
+                // noop
+            };
         }
-        return result;
-    }
-    else {
-        return new LeafNode(node.view, orthogonal(node.orientation), orthogonalSize);
-    }
-}
-export function indexInParent(element) {
-    const parentElement = element.parentElement;
-    if (!parentElement) {
-        throw new Error('Invalid grid element');
-    }
-    let el = parentElement.firstElementChild;
-    let index = 0;
-    while (el !== element && el !== parentElement.lastElementChild && el) {
-        el = el.nextElementSibling;
-        index++;
-    }
-    return index;
-}
-/**
- * Find the grid location of a specific DOM element by traversing the parent
- * chain and finding each child index on the way.
- *
- * This will break as soon as DOM structures of the Splitview or Gridview change.
- */
-export function getGridLocation(element) {
-    const parentElement = element.parentElement;
-    if (!parentElement) {
-        throw new Error('Invalid grid element');
-    }
-    if (/\bgrid-view\b/.test(parentElement.className)) {
-        return [];
-    }
-    const index = indexInParent(parentElement);
-    const ancestor = parentElement.parentElement.parentElement.parentElement;
-    return [...getGridLocation(ancestor), index];
-}
-export function getRelativeLocation(rootOrientation, location, direction) {
-    const orientation = getLocationOrientation(rootOrientation, location);
-    const directionOrientation = getDirectionOrientation(direction);
-    if (orientation === directionOrientation) {
-        const [rest, _index] = tail(location);
-        let index = _index;
-        if (direction === 'right' || direction === 'bottom') {
-            index += 1;
+        const gridview = new GridviewComponent({
+            parentElement: domRef.current,
+            proportionalLayout: typeof props.proportionalLayout === 'boolean'
+                ? props.proportionalLayout
+                : true,
+            orientation: props.orientation || Orientation.HORIZONTAL,
+            frameworkComponents: props.components,
+            frameworkComponentFactory: {
+                createComponent: (id, componentId, component) => {
+                    return new ReactGridPanelView(id, componentId, component, {
+                        addPortal,
+                    });
+                },
+            },
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+        });
+        const { clientWidth, clientHeight } = domRef.current;
+        gridview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new GridviewApi(gridview) });
         }
-        return [...rest, index];
-    }
-    else {
-        const index = direction === 'right' || direction === 'bottom' ? 1 : 0;
-        return [...location, index];
-    }
-}
-export function getDirectionOrientation(direction) {
-    return direction === 'top' || direction === 'bottom'
-        ? Orientation.VERTICAL
-        : Orientation.HORIZONTAL;
-}
-export function getLocationOrientation(rootOrientation, location) {
-    return location.length % 2 === 0
-        ? orthogonal(rootOrientation)
-        : rootOrientation;
-}
-export const orthogonal = (orientation) => orientation === Orientation.HORIZONTAL
-    ? Orientation.VERTICAL
-    : Orientation.HORIZONTAL;
-export function isGridBranchNode(node) {
-    return !!node.children;
-}
-const serializeBranchNode = (node, orientation) => {
-    const size = orientation === Orientation.VERTICAL ? node.box.width : node.box.height;
-    if (!isGridBranchNode(node)) {
-        if (typeof node.cachedVisibleSize === 'number') {
-            return {
-                type: 'leaf',
-                data: node.view.toJSON(),
-                size: node.cachedVisibleSize,
-                visible: false,
-            };
-        }
-        return { type: 'leaf', data: node.view.toJSON(), size };
-    }
-    return {
-        type: 'branch',
-        data: node.children.map((c) => serializeBranchNode(c, orthogonal(orientation))),
-        size,
-    };
-};
-export class Gridview {
-    get length() {
-        return this._root ? this._root.children.length : 0;
-    }
-    serialize() {
-        const root = serializeBranchNode(this.getView(), this.orientation);
-        return {
-            root,
-            width: this.width,
-            height: this.height,
-            orientation: this.orientation,
+        gridviewRef.current = gridview;
+        return () => {
+            gridview.dispose();
         };
-    }
-    dispose() {
-        this.disposable.dispose();
-        this._onDidChange.dispose();
-        this.root.dispose();
-        this.element.remove();
-    }
-    clear() {
-        const orientation = this.root.orientation;
-        this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize);
-    }
-    deserialize(json, deserializer) {
-        const orientation = json.orientation;
-        const height = orientation === Orientation.VERTICAL ? json.height : json.width;
-        this._deserialize(json.root, orientation, deserializer, height);
-    }
-    _deserialize(root, orientation, deserializer, orthogonalSize) {
-        this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
-    }
-    _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
-        let result;
-        if (node.type === 'branch') {
-            const serializedChildren = node.data;
-            const children = serializedChildren.map((serializedChild) => {
-                return {
-                    node: this._deserializeNode(serializedChild, orthogonal(orientation), deserializer, node.size),
-                    visible: serializedChild.visible,
-                };
-            });
-            // HORIZONTAL => height=orthogonalsize width=size
-            // VERTICAL => height=size width=orthogonalsize
-            result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
-        }
-        else {
-            result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
-        }
-        return result;
-    }
-    get orientation() {
-        return this.root.orientation;
-    }
-    set orientation(orientation) {
-        if (this.root.orientation === orientation) {
+    }, []);
+    React.useEffect(() => {
+        if (!gridviewRef.current) {
             return;
         }
-        const { size, orthogonalSize } = this.root;
-        this.root = flipNode(this.root, orthogonalSize, size);
-        this.root.layout(size, orthogonalSize);
-    }
-    get root() {
-        return this._root;
-    }
-    set root(root) {
-        const oldRoot = this._root;
-        if (oldRoot) {
-            oldRoot.dispose();
-            this.element.removeChild(oldRoot.element);
-        }
-        this._root = root;
-        this.element.appendChild(this._root.element);
-        this.disposable.value = this._root.onDidChange((e) => {
-            this._onDidChange.fire(e);
+        gridviewRef.current.updateOptions({
+            frameworkComponents: props.components,
         });
-    }
-    /**
-     * If the root is orientated as a VERTICAL node then nest the existing root within a new HORIZIONTAL root node
-     * If the root is orientated as a HORIZONTAL node then nest the existing root within a new VERITCAL root node
-     */
-    insertOrthogonalSplitviewAtRoot() {
-        if (!this._root) {
-            return;
-        }
-        const oldRoot = this.root;
-        oldRoot.element.remove();
-        this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size);
-        if (oldRoot.children.length === 1) {
-            // can remove one level of redundant branching if there is only a single child
-            const childReference = oldRoot.children[0];
-            oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
-            oldRoot.dispose();
-            this._root.addChild(childReference, Sizing.Distribute, 0);
-        }
-        else {
-            this._root.addChild(oldRoot, Sizing.Distribute, 0);
-        }
-        this.element.appendChild(this._root.element);
-        this.disposable.value = this._root.onDidChange((e) => {
-            this._onDidChange.fire(e);
-        });
-    }
-    next(location) {
-        return this.progmaticSelect(location);
-    }
-    previous(location) {
-        return this.progmaticSelect(location, true);
-    }
-    getView(location) {
-        const node = location ? this.getNode(location)[1] : this.root;
-        return this._getViews(node, this.orientation);
-    }
-    _getViews(node, orientation, cachedVisibleSize) {
-        const box = { height: node.height, width: node.width };
-        if (node instanceof LeafNode) {
-            return { box, view: node.view, cachedVisibleSize };
-        }
-        const children = [];
-        for (let i = 0; i < node.children.length; i++) {
-            const child = node.children[i];
-            const nodeCachedVisibleSize = node.getChildCachedVisibleSize(i);
-            children.push(this._getViews(child, orthogonal(orientation), nodeCachedVisibleSize));
-        }
-        return { box, children };
-    }
-    progmaticSelect(location, reverse = false) {
-        const [path, node] = this.getNode(location);
-        if (!(node instanceof LeafNode)) {
-            throw new Error('invalid location');
-        }
-        for (let i = path.length - 1; i > -1; i--) {
-            const n = path[i];
-            const l = location[i] || 0;
-            const canProgressInCurrentLevel = reverse
-                ? l - 1 > -1
-                : l + 1 < n.children.length;
-            if (canProgressInCurrentLevel) {
-                return findLeaf(n.children[reverse ? l - 1 : l + 1], reverse);
-            }
-        }
-        return findLeaf(this.root, reverse);
-    }
-    get width() {
-        return this.root.width;
-    }
-    get height() {
-        return this.root.height;
-    }
-    get minimumWidth() {
-        return this.root.minimumWidth;
-    }
-    get minimumHeight() {
-        return this.root.minimumHeight;
-    }
-    get maximumWidth() {
-        return this.root.maximumHeight;
-    }
-    get maximumHeight() {
-        return this.root.maximumHeight;
-    }
-    constructor(proportionalLayout, styles, orientation) {
-        this.proportionalLayout = proportionalLayout;
-        this.styles = styles;
-        this.disposable = new MutableDisposable();
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this.element = document.createElement('div');
-        this.element.className = 'grid-view';
-        this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0);
-    }
-    isViewVisible(location) {
-        const [rest, index] = tail(location);
-        const [, parent] = this.getNode(rest);
-        if (!(parent instanceof BranchNode)) {
-            throw new Error('Invalid from location');
-        }
-        return parent.isChildVisible(index);
-    }
-    setViewVisible(location, visible) {
-        const [rest, index] = tail(location);
-        const [, parent] = this.getNode(rest);
-        if (!(parent instanceof BranchNode)) {
-            throw new Error('Invalid from location');
-        }
-        parent.setChildVisible(index, visible);
-    }
-    moveView(parentLocation, from, to) {
-        const [, parent] = this.getNode(parentLocation);
-        if (!(parent instanceof BranchNode)) {
-            throw new Error('Invalid location');
-        }
-        parent.moveChild(from, to);
-    }
-    addView(view, size, location) {
-        const [rest, index] = tail(location);
-        const [pathToParent, parent] = this.getNode(rest);
-        if (parent instanceof BranchNode) {
-            const node = new LeafNode(view, orthogonal(parent.orientation), parent.orthogonalSize);
-            parent.addChild(node, size, index);
-        }
-        else {
-            const [grandParent, ..._] = [...pathToParent].reverse();
-            const [parentIndex, ...__] = [...rest].reverse();
-            let newSiblingSize = 0;
-            const newSiblingCachedVisibleSize = grandParent.getChildCachedVisibleSize(parentIndex);
-            if (typeof newSiblingCachedVisibleSize === 'number') {
-                newSiblingSize = Sizing.Invisible(newSiblingCachedVisibleSize);
-            }
-            grandParent.removeChild(parentIndex);
-            const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
-            grandParent.addChild(newParent, parent.size, parentIndex);
-            const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
-            newParent.addChild(newSibling, newSiblingSize, 0);
-            if (typeof size !== 'number' && size.type === 'split') {
-                size = { type: 'split', index: 0 };
-            }
-            const node = new LeafNode(view, grandParent.orientation, parent.size);
-            newParent.addChild(node, size, index);
-        }
-    }
-    remove(view, sizing) {
-        const location = getGridLocation(view.element);
-        return this.removeView(location, sizing);
-    }
-    removeView(location, sizing) {
-        const [rest, index] = tail(location);
-        const [pathToParent, parent] = this.getNode(rest);
-        if (!(parent instanceof BranchNode)) {
-            throw new Error('Invalid location');
-        }
-        const node = parent.children[index];
-        if (!(node instanceof LeafNode)) {
-            throw new Error('Invalid location');
-        }
-        parent.removeChild(index, sizing);
-        if (parent.children.length === 0) {
-            return node.view;
-        }
-        if (parent.children.length > 1) {
-            return node.view;
-        }
-        const sibling = parent.children[0];
-        if (pathToParent.length === 0) {
-            // parent is root
-            if (sibling instanceof LeafNode) {
-                return node.view;
-            }
-            // we must promote sibling to be the new root
-            parent.removeChild(0, sizing);
-            this.root = sibling;
-            return node.view;
-        }
-        const [grandParent, ..._] = [...pathToParent].reverse();
-        const [parentIndex, ...__] = [...rest].reverse();
-        const isSiblingVisible = parent.isChildVisible(0);
-        parent.removeChild(0, sizing);
-        const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-        grandParent.removeChild(parentIndex, sizing);
-        if (sibling instanceof BranchNode) {
-            sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
-            for (let i = 0; i < sibling.children.length; i++) {
-                const child = sibling.children[i];
-                grandParent.addChild(child, child.size, parentIndex + i);
-            }
-        }
-        else {
-            const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
-            const siblingSizing = isSiblingVisible
-                ? sibling.orthogonalSize
-                : Sizing.Invisible(sibling.orthogonalSize);
-            grandParent.addChild(newSibling, siblingSizing, parentIndex);
-        }
-        for (let i = 0; i < sizes.length; i++) {
-            grandParent.resizeChild(i, sizes[i]);
-        }
-        return node.view;
-    }
-    layout(width, height) {
-        const [size, orthogonalSize] = this.root.orientation === Orientation.HORIZONTAL
-            ? [height, width]
-            : [width, height];
-        this.root.layout(size, orthogonalSize);
-    }
-    getNode(location, node = this.root, path = []) {
-        if (location.length === 0) {
-            return [path, node];
-        }
-        if (!(node instanceof BranchNode)) {
-            throw new Error('Invalid location');
-        }
-        const [index, ...rest] = location;
-        if (index < 0 || index >= node.children.length) {
-            throw new Error('Invalid location');
-        }
-        const child = node.children[index];
-        path.push(node);
-        return this.getNode(rest, child, path);
-    }
-}
+    }, [props.components]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+GridviewReact.displayName = 'GridviewComponent';
+//# sourceMappingURL=gridview.js.map

dist/esm/index.d.ts

@@ -1,30 +0,11 @@
-export * from './dnd/dataTransfer';
-export * from './splitview/core/splitview';
+export * from 'dockview-core';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
+export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
+export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
-export * from './gridview/gridview';
-export * from './groupview/groupview';
-export * from './gridview/baseComponentGridview';
-export * from './groupview/panel/content';
-export * from './groupview/tab';
-export * from './groupview/dnd';
-export * from './groupview/types';
-export * from './dockview/options';
-export * from './dockview/dockviewComponent';
-export * from './gridview/gridviewComponent';
-export * from './splitview/splitviewComponent';
-export * from './paneview/paneviewComponent';
-export { PaneviewComponentOptions } from './paneview/options';
-export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
-export * from './paneview/paneviewPanel';
-export * from './groupview/types';
+export * from './types';
 export * from './react';
-export { Event } from './events';
-export { IDisposable } from './lifecycle';
-export { Position, positionToDirection, directionToPosition, } from './dnd/droptarget';
-export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
-export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi';
-export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
-export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi';
-export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
-export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';
+//# sourceMappingURL=index.d.ts.map

dist/esm/index.js

@@ -1,23 +0,9 @@
-export * from './dnd/dataTransfer';
-export * from './splitview/core/splitview';
+export * from 'dockview-core';
+export * from './dockview/dockview';
+export * from './dockview/defaultTab';
+export * from './splitview/splitview';
+export * from './gridview/gridview';
 export * from './paneview/paneview';
-export * from './gridview/gridview';
-export * from './groupview/groupview';
-export * from './gridview/baseComponentGridview';
-export * from './groupview/panel/content';
-export * from './groupview/tab';
-export * from './groupview/dnd';
-export * from './groupview/types';
-export * from './dockview/options';
-export * from './dockview/dockviewComponent';
-export * from './gridview/gridviewComponent';
-export * from './splitview/splitviewComponent';
-export * from './paneview/paneviewComponent';
-export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
-export * from './paneview/paneviewPanel';
-export * from './groupview/types';
-export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
-export { Event } from './events';
-export { positionToDirection, directionToPosition, } from './dnd/droptarget';
-export { SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';
+export * from './types';
+export * from './react';
+//# sourceMappingURL=index.js.map

dist/esm/paneview/paneview.d.ts

@@ -1,40 +0,25 @@
-import { Orientation, ISplitViewDescriptor, Sizing } from '../splitview/core/splitview';
-import { CompositeDisposable, IDisposable } from '../lifecycle';
-import { Event } from '../events';
-import { PaneviewPanel } from './paneviewPanel';
-interface PaneItem {
-    pane: PaneviewPanel;
-    disposable: IDisposable;
+import * as React from 'react';
+import { PaneviewPanelApi, PaneviewDndOverlayEvent, PaneviewApi, PaneviewDropEvent } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface PaneviewReadyEvent {
+    api: PaneviewApi;
 }
-export declare class Paneview extends CompositeDisposable implements IDisposable {
-    private element;
-    private splitview;
-    private paneItems;
-    private _orientation;
-    private animationTimer;
-    private skipAnimation;
-    private readonly _onDidChange;
-    readonly onDidChange: Event<void>;
-    get onDidAddView(): Event<PaneviewPanel>;
-    get onDidRemoveView(): Event<PaneviewPanel>;
-    get minimumSize(): number;
-    get maximumSize(): number;
-    get orientation(): Orientation;
-    get size(): number;
-    get orthogonalSize(): number;
-    constructor(container: HTMLElement, options: {
-        orientation: Orientation;
-        descriptor?: ISplitViewDescriptor;
-    });
-    addPane(pane: PaneviewPanel, size?: number | Sizing, index?: number, skipLayout?: boolean): void;
-    getViewSize(index: number): number;
-    getPanes(): PaneviewPanel[];
-    removePane(index: number, options?: {
-        skipDispose: boolean;
-    }): PaneItem;
-    moveView(from: number, to: number): void;
-    layout(size: number, orthogonalSize: number): void;
-    private setupAnimation;
-    dispose(): void;
+export interface IPaneviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: PaneviewPanelApi;
+    containerApi: PaneviewApi;
+    title: string;
 }
-export {};
+export interface IPaneviewReactProps {
+    onReady: (event: PaneviewReadyEvent) => void;
+    components: PanelCollection<IPaneviewPanelProps>;
+    headerComponents?: PanelCollection<IPaneviewPanelProps>;
+    className?: string;
+    disableAutoResizing?: boolean;
+    disableDnd?: boolean;
+    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
+    onDidDrop?(event: PaneviewDropEvent): void;
+}
+export declare const PaneviewReact: React.ForwardRefExoticComponent<IPaneviewReactProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=paneview.d.ts.map

dist/esm/paneview/paneview.js

@@ -1,145 +0,85 @@
-import { Splitview, Orientation, } from '../splitview/core/splitview';
-import { CompositeDisposable } from '../lifecycle';
-import { Emitter } from '../events';
-import { addClasses, removeClasses } from '../dom';
-export class Paneview extends CompositeDisposable {
-    get onDidAddView() {
-        return this.splitview.onDidAddView;
-    }
-    get onDidRemoveView() {
-        return this.splitview.onDidRemoveView;
-    }
-    get minimumSize() {
-        return this.splitview.minimumSize;
-    }
-    get maximumSize() {
-        return this.splitview.maximumSize;
-    }
-    get orientation() {
-        return this.splitview.orientation;
-    }
-    get size() {
-        return this.splitview.size;
-    }
-    get orthogonalSize() {
-        return this.splitview.orthogonalSize;
-    }
-    constructor(container, options) {
-        var _a;
-        super();
-        this.paneItems = [];
-        this.skipAnimation = false;
-        this._onDidChange = new Emitter();
-        this.onDidChange = this._onDidChange.event;
-        this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
-        this.element = document.createElement('div');
-        this.element.className = 'pane-container';
-        container.appendChild(this.element);
-        this.splitview = new Splitview(this.element, {
-            orientation: this._orientation,
-            proportionalLayout: false,
-            descriptor: options.descriptor,
+import * as React from 'react';
+import { PaneviewComponent, PaneviewApi, } from 'dockview-core';
+import { usePortalsLifecycle } from '../react';
+import { PanePanelSection } from './view';
+export const PaneviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const paneviewRef = React.useRef();
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
+        const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
+            addPortal,
         });
-        // if we've added views from the descriptor we need to
-        // add the panes to our Pane array and setup animation
-        this.getPanes().forEach((pane) => {
-            const disposable = new CompositeDisposable(pane.onDidChangeExpansionState(() => {
-                this.setupAnimation();
-                this._onDidChange.fire(undefined);
-            }));
-            const paneItem = {
-                pane,
-                disposable: {
-                    dispose: () => {
-                        disposable.dispose();
-                    },
+        const paneview = new PaneviewComponent({
+            parentElement: domRef.current,
+            frameworkComponents: props.components,
+            components: {},
+            headerComponents: {},
+            disableDnd: props.disableDnd,
+            headerframeworkComponents: props.headerComponents,
+            frameworkWrapper: {
+                header: {
+                    createComponent,
                 },
-            };
-            this.paneItems.push(paneItem);
-            pane.orthogonalSize = this.splitview.orthogonalSize;
-        });
-        this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
-            this._onDidChange.fire(undefined);
-        }), this.splitview.onDidAddView(() => {
-            this._onDidChange.fire();
-        }), this.splitview.onDidRemoveView(() => {
-            this._onDidChange.fire();
-        }));
-    }
-    addPane(pane, size, index = this.splitview.length, skipLayout = false) {
-        const disposable = pane.onDidChangeExpansionState(() => {
-            this.setupAnimation();
-            this._onDidChange.fire(undefined);
-        });
-        const paneItem = {
-            pane,
-            disposable: {
-                dispose: () => {
-                    disposable.dispose();
+                body: {
+                    createComponent,
                 },
             },
+            showDndOverlay: props.showDndOverlay,
+        });
+        const api = new PaneviewApi(paneview);
+        const { clientWidth, clientHeight } = domRef.current;
+        paneview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api });
+        }
+        paneviewRef.current = paneview;
+        return () => {
+            paneview.dispose();
         };
-        this.paneItems.splice(index, 0, paneItem);
-        pane.orthogonalSize = this.splitview.orthogonalSize;
-        this.splitview.addView(pane, size, index, skipLayout);
-    }
-    getViewSize(index) {
-        return this.splitview.getViewSize(index);
-    }
-    getPanes() {
-        return this.splitview.getViews();
-    }
-    removePane(index, options = { skipDispose: false }) {
-        const paneItem = this.paneItems.splice(index, 1)[0];
-        this.splitview.removeView(index);
-        if (!options.skipDispose) {
-            paneItem.disposable.dispose();
-            paneItem.pane.dispose();
+    }, []);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return;
         }
-        return paneItem;
-    }
-    moveView(from, to) {
-        if (from === to) {
+        paneviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
             return;
         }
-        const view = this.removePane(from, { skipDispose: true });
-        this.skipAnimation = true;
-        try {
-            this.addPane(view.pane, view.pane.size, to, false);
+        paneviewRef.current.updateOptions({
+            headerframeworkComponents: props.headerComponents,
+        });
+    }, [props.headerComponents]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
+            return () => {
+                //
+            };
         }
-        finally {
-            this.skipAnimation = false;
-        }
-    }
-    layout(size, orthogonalSize) {
-        this.splitview.layout(size, orthogonalSize);
-    }
-    setupAnimation() {
-        if (this.skipAnimation) {
+        const paneview = paneviewRef.current;
+        const disposable = paneview.onDidDrop((event) => {
+            if (props.onDidDrop) {
+                props.onDidDrop(Object.assign(Object.assign({}, event), { api: new PaneviewApi(paneview) }));
+            }
+        });
+        return () => {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
+    React.useEffect(() => {
+        if (!paneviewRef.current) {
             return;
         }
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-        addClasses(this.element, 'animated');
-        this.animationTimer = setTimeout(() => {
-            this.animationTimer = undefined;
-            removeClasses(this.element, 'animated');
-        }, 200);
-    }
-    dispose() {
-        super.dispose();
-        if (this.animationTimer) {
-            clearTimeout(this.animationTimer);
-            this.animationTimer = undefined;
-        }
-        this.paneItems.forEach((paneItem) => {
-            paneItem.disposable.dispose();
-            paneItem.pane.dispose();
+        paneviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
         });
-        this.paneItems = [];
-        this.splitview.dispose();
-        this.element.remove();
-    }
-}
+    }, [props.showDndOverlay]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+PaneviewReact.displayName = 'PaneviewComponent';
+//# sourceMappingURL=paneview.js.map

dist/esm/svg.d.ts

@@ -1,3 +0,4 @@
-export declare const createCloseButton: () => SVGSVGElement;
-export declare const createExpandMoreButton: () => SVGSVGElement;
-export declare const createChevronRightButton: () => SVGSVGElement;
+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

@@ -1,31 +0,8 @@
-const createSvgElementFromPath = (params) => {
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttributeNS(null, 'height', params.height);
-    svg.setAttributeNS(null, 'width', params.width);
-    svg.setAttributeNS(null, 'viewBox', params.viewbox);
-    svg.setAttributeNS(null, 'aria-hidden', 'false');
-    svg.setAttributeNS(null, 'focusable', 'false');
-    svg.classList.add('dockview-svg');
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttributeNS(null, 'd', params.path);
-    svg.appendChild(path);
-    return svg;
+import * as 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" },
+    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" })));
+export const ExpandMore = () => {
+    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" })));
 };
-export const createCloseButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 28 28',
-    path: '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',
-});
-export const createExpandMoreButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 24 15',
-    path: 'M12 14.15L0 2.15L2.15 0L12 9.9L21.85 0.0499992L24 2.2L12 14.15Z',
-});
-export const createChevronRightButton = () => createSvgElementFromPath({
-    width: '11',
-    height: '11',
-    viewbox: '0 0 15 25',
-    path: 'M2.15 24.1L0 21.95L9.9 12.05L0 2.15L2.15 0L14.2 12.05L2.15 24.1Z',
-});
+//# sourceMappingURL=svg.js.map

dist/esm/types.d.ts

@@ -1,8 +0,9 @@
-export interface Constructor<T> {
-    new (): T;
+import * as React from 'react';
+import { Parameters } from 'dockview-core';
+export interface PanelCollection<T extends object> {
+    [name: string]: React.FunctionComponent<T>;
 }
-export interface FrameworkFactory<T> {
-    createComponent: (id: string, componentId: string, component: any) => T;
+export interface PanelParameters<T extends {} = Parameters> {
+    params: T;
 }
-export type FunctionOrValue<T> = (() => T) | T;
-export declare function isBooleanValue(value: any): value is boolean;
+//# sourceMappingURL=types.d.ts.map

dist/esm/types.js

@@ -1,3 +0,2 @@
-export function isBooleanValue(value) {
-    return typeof value === 'boolean';
-}
+export {};
+//# sourceMappingURL=types.js.map

package.json

 {
     "name": "dockview",
-    "version": "0.0.0-experimental-4ff77d46-20230221",
+    "version": "0.0.0-experimental-806ff2a9-20230927",
     "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
@@ -44,3 +44,8 @@ "main": "./dist/cjs/index.js",
     "license": "MIT",
+    "dependencies": {
+        "dockview-core": "0.0.0-experimental-806ff2a9-20230927"
+    },
     "devDependencies": {
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-terser": "^0.4.0",
         "@rollup/plugin-typescript": "^11.0.0",
@@ -56,6 +61,4 @@ "@testing-library/react": "^13.4.0",
         "rollup": "^3.15.0",
-        "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-terser": "^7.0.2",
-        "typedoc": "^0.23.25"
+        "rollup-plugin-postcss": "^4.0.2"
     }
 }

README.md

 <div align="center">
 <h1>dockview</h1>
 
-<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p>
+<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
 
@@ -20,4 +20,2 @@ </div>
 
-Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
-
 ## Features
@@ -31,9 +29,10 @@
 -   Tabular docking and Drag and Drop support
+-   Floating groups, customized header bars and tab
 -   Documentation and examples
 
-This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
+Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
 
 ## Quick start
 
-Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/).
+Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
 
@@ -40,0 +39,0 @@ ```

Fixed alerts

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

Improved metrics

Total package byte prevSize

9370637

148.86%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

1

Infinity%

Number of package files

153

-62.59%

Lines of code

54123

-24.85%

Number of lines in readme file

52

-1.89%

Dependency changes

• + Added

  dockview-core@0.0.0-experimental-806ff2a9-20230927

• + Added

  dockview-core@0.0.0-experimental-806ff2a9-20230927
  (transitive)