dockview 1.6.0 → 1.7.1

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

@@ -1,132 +1,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;
-}
-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 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 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;
-}
+import * as React from 'react';
+import { GridviewPanelApi, Orientation, GridviewApi } from 'dockview-core';
+import { PanelCollection, PanelParameters } from '../types';
+export interface GridviewReadyEvent {
+    api: GridviewApi;
+}
+export interface IGridviewPanelProps<T extends {
+    [index: string]: any;
+} = any> extends PanelParameters<T> {
+    api: GridviewPanelApi;
+    containerApi: GridviewApi;
+}
+export interface IGridviewReactProps {
+    orientation?: Orientation;
+    onReady: (event: GridviewReadyEvent) => void;
+    components: PanelCollection<IGridviewPanelProps>;
+    hideBorders?: boolean;
+    className?: string;
+    proportionalLayout?: boolean;
+    disableAutoResizing?: boolean;
+}
+export declare const GridviewReact: React.ForwardRefExoticComponent<IGridviewReactProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=gridview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gridview.d.ts","sourceRoot":"","sources":["../../../src/gridview/gridview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGH,gBAAgB,EAChB,WAAW,EACX,WAAW,EACd,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IAC/B,GAAG,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS;IAAE,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,GAAG,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC;IAC1B,GAAG,EAAE,gBAAgB,CAAC;IACtB,YAAY,EAAE,WAAW,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,aAAa,4FAyEzB,CAAC"}

package/dist/esm/gridview/gridview.js

@@ -1,423 +1,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);
-        }
-        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;
-        }
-        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,
-        };
-    }
-    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) {
-            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);
-        });
-    }
-    /**
-     * 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);
-    }
-}
+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
+            };
+        }
+        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) });
+        }
+        gridviewRef.current = gridview;
+        return () => {
+            gridview.dispose();
+        };
+    }, []);
+    React.useEffect(() => {
+        if (!gridviewRef.current) {
+            return;
+        }
+        gridviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+GridviewReact.displayName = 'GridviewComponent';
+//# sourceMappingURL=gridview.js.map

package/dist/esm/gridview/gridview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridview.js","sourceRoot":"","sources":["../../../src/gridview/gridview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACH,iBAAiB,EAGjB,WAAW,EACX,WAAW,GACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAuB/C,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,KAA0B,EAAE,GAAuC,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,EAAsB,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,mBAAmB,EAAE,CAAC;IAEnD,KAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAC;IAE1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;YACjB,OAAO,GAAG,EAAE;gBACR,OAAO;YACX,CAAC,CAAC;SACL;QAED,MAAM,QAAQ,GAAG,IAAI,iBAAiB,CAAC;YACnC,aAAa,EAAE,MAAM,CAAC,OAAO;YAC7B,kBAAkB,EACd,OAAO,KAAK,CAAC,kBAAkB,KAAK,SAAS;gBACzC,CAAC,CAAC,KAAK,CAAC,kBAAkB;gBAC1B,CAAC,CAAC,IAAI;YACd,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,WAAW,CAAC,UAAU;YACxD,mBAAmB,EAAE,KAAK,CAAC,UAAU;YACrC,yBAAyB,EAAE;gBACvB,eAAe,EAAE,CAAC,EAAU,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE;oBACpD,OAAO,IAAI,kBAAkB,CACzB,EAAE,EACF,WAAW,EACX,SAAS,EACT;wBACI,SAAS;qBACZ,CACJ,CAAC;gBACN,CAAC;aACJ;YACD,MAAM,EAAE,KAAK,CAAC,WAAW;gBACrB,CAAC,CAAC,EAAE,eAAe,EAAE,aAAa,EAAE;gBACpC,CAAC,CAAC,SAAS;SAClB,CAAC,CAAC;QAEH,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC;QACrD,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;QAE3C,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;SACrD;QAED,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;QAE/B,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,OAAO,EAAE,CAAC;QACvB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACtB,OAAO;SACV;QACD,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC;YAC9B,mBAAmB,EAAE,KAAK,CAAC,UAAU;SACxC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,OAAO,CACH,6BACI,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EACxC,GAAG,EAAE,MAAM,IAEV,OAAO,CACN,CACT,CAAC;AACN,CAAC,CACJ,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,mBAAmB,CAAC"}

package/dist/{cjs/react → esm}/gridview/view.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { GridviewPanel } from '../../gridview/gridviewPanel';
-import { IFrameworkPart } from '../../panel/types';
-import { ReactPortalStore } from '../react';
-import { IGridviewPanelProps } from './gridview';
-export declare class ReactGridPanelView extends GridviewPanel {
-    private readonly reactComponent;
-    private readonly reactPortalStore;
-    constructor(id: string, component: string, reactComponent: React.FunctionComponent<IGridviewPanelProps>, reactPortalStore: ReactPortalStore);
-    getComponent(): IFrameworkPart;
-}
+/// <reference types="react" />
+import { GridviewPanel, IFrameworkPart } from 'dockview-core';
+import { ReactPortalStore } from '../react';
+import { IGridviewPanelProps } from './gridview';
+export declare class ReactGridPanelView extends GridviewPanel {
+    private readonly reactComponent;
+    private readonly reactPortalStore;
+    constructor(id: string, component: string, reactComponent: React.FunctionComponent<IGridviewPanelProps>, reactPortalStore: ReactPortalStore);
+    getComponent(): IFrameworkPart;
+}
+//# sourceMappingURL=view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../src/gridview/view.ts"],"names":[],"mappings":";AAAA,OAAO,EAEH,aAAa,EAEb,cAAc,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAa,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD,qBAAa,kBAAmB,SAAQ,aAAa;IAI7C,OAAO,CAAC,QAAQ,CAAC,cAAc;IAC/B,OAAO,CAAC,QAAQ,CAAC,gBAAgB;gBAHjC,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,MAAM,EACA,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,EAC5D,gBAAgB,EAAE,gBAAgB;IAKvD,YAAY,IAAI,cAAc;CAcjC"}