dockview 6.6.0 → 7.0.2

package/dist/esm/dockview/dockview.js

@@ -1,252 +0,0 @@
-import React from 'react';
-import { PROPERTY_KEYS_DOCKVIEW, createDockview, } from 'dockview-core';
-import { ReactPanelContentPart } from './reactContentPart';
-import { ReactPanelHeaderPart } from './reactHeaderPart';
-import { usePortalsLifecycle } from '../react';
-import { ReactWatermarkPart } from './reactWatermarkPart';
-import { ReactHeaderActionsRendererPart } from './headerActionsRenderer';
-import { ReactContextMenuItemPart } from './reactContextMenuItemPart';
-import { ReactTabGroupChipPart, } from './reactTabGroupChipPart';
-import { ReactGroupDragGhostPart, } from './reactGroupDragGhostPart';
-function createGroupControlElement(component, store) {
-    return component
-        ? (groupPanel) => {
-            return new ReactHeaderActionsRendererPart(component, store, groupPanel);
-        }
-        : undefined;
-}
-const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
-function extractCoreOptions(props) {
-    const coreOptions = PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
-        if (key in props) {
-            obj[key] = props[key];
-        }
-        return obj;
-    }, {});
-    return coreOptions;
-}
-export const DockviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const dockviewRef = React.useRef(undefined);
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    const prevProps = React.useRef({});
-    React.useEffect(() => {
-        const changes = {};
-        PROPERTY_KEYS_DOCKVIEW.forEach((propKey) => {
-            const key = propKey;
-            const propValue = props[key];
-            if (key in props && propValue !== prevProps.current[key]) {
-                changes[key] = propValue;
-            }
-        });
-        if (dockviewRef.current) {
-            dockviewRef.current.updateOptions(changes);
-        }
-        else {
-            // not yet fully initialized
-        }
-        prevProps.current = props;
-    }, PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
-    React.useEffect(() => {
-        var _a;
-        if (!domRef.current) {
-            return;
-        }
-        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        const frameworkOptions = {
-            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-            createComponent: (options) => {
-                return new ReactPanelContentPart(options.id, props.components[options.name], {
-                    addPortal,
-                });
-            },
-            createTabComponent(options) {
-                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
-                    addPortal,
-                });
-            },
-            createWatermarkComponent: props.watermarkComponent
-                ? () => {
-                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-            defaultTabComponent: props.defaultTabComponent
-                ? DEFAULT_REACT_TAB
-                : undefined,
-            createContextMenuItemComponent: (options) => {
-                if (!options.component) {
-                    return undefined;
-                }
-                return new ReactContextMenuItemPart(options.id, options.component, { addPortal });
-            },
-        };
-        const coreOptions = extractCoreOptions(props);
-        if (props.tabGroupChipComponent) {
-            const chipComponent = props.tabGroupChipComponent;
-            coreOptions.createTabGroupChipComponent = () => {
-                return new ReactTabGroupChipPart(chipComponent, {
-                    addPortal,
-                });
-            };
-        }
-        if (props.groupDragGhostComponent) {
-            const ghostComponent = props.groupDragGhostComponent;
-            coreOptions.createGroupDragGhostComponent = () => {
-                return new ReactGroupDragGhostPart(ghostComponent, {
-                    addPortal,
-                });
-            };
-        }
-        const api = createDockview(domRef.current, Object.assign(Object.assign({}, coreOptions), frameworkOptions));
-        const { clientWidth, clientHeight } = domRef.current;
-        api.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api });
-        }
-        dockviewRef.current = api;
-        return () => {
-            dockviewRef.current = undefined;
-            api.dispose();
-        };
-    }, []);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onDidDrop((event) => {
-            if (props.onDidDrop) {
-                props.onDidDrop(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onDidDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return () => {
-                // noop
-            };
-        }
-        const disposable = dockviewRef.current.onWillDrop((event) => {
-            if (props.onWillDrop) {
-                props.onWillDrop(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onWillDrop]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createTabGroupChipComponent: props.tabGroupChipComponent
-                ? () => {
-                    return new ReactTabGroupChipPart(props.tabGroupChipComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.tabGroupChipComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createGroupDragGhostComponent: props.groupDragGhostComponent
-                ? () => {
-                    return new ReactGroupDragGhostPart(props.groupDragGhostComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.groupDragGhostComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createComponent: (options) => {
-                return new ReactPanelContentPart(options.id, props.components[options.name], {
-                    addPortal,
-                });
-            },
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        var _a;
-        if (!dockviewRef.current) {
-            return;
-        }
-        const frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
-        if (props.defaultTabComponent) {
-            frameworkTabComponents[DEFAULT_REACT_TAB] =
-                props.defaultTabComponent;
-        }
-        dockviewRef.current.updateOptions({
-            defaultTabComponent: props.defaultTabComponent
-                ? DEFAULT_REACT_TAB
-                : undefined,
-            createTabComponent(options) {
-                return new ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
-                    addPortal,
-                });
-            },
-        });
-    }, [props.tabComponents, props.defaultTabComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createWatermarkComponent: props.watermarkComponent
-                ? () => {
-                    return new ReactWatermarkPart('watermark', props.watermarkComponent, {
-                        addPortal,
-                    });
-                }
-                : undefined,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.rightHeaderActionsComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.leftHeaderActionsComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
-        });
-    }, [props.prefixHeaderActionsComponent]);
-    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-DockviewReact.displayName = 'DockviewComponent';

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ReactPart, ReactPortalStore } from '../react';
-import { DockviewApi, DockviewGroupPanel, DockviewGroupPanelApi, PanelUpdateEvent, IHeaderActionsRenderer, IDockviewHeaderActionsProps } from 'dockview-core';
-export declare class ReactHeaderActionsRendererPart implements IHeaderActionsRenderer {
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _group;
-    private readonly mutableDisposable;
-    private readonly _element;
-    private _part?;
-    get element(): HTMLElement;
-    get part(): ReactPart<IDockviewHeaderActionsProps> | undefined;
-    constructor(component: React.FunctionComponent<IDockviewHeaderActionsProps>, reactPortalStore: ReactPortalStore, _group: DockviewGroupPanel);
-    init(parameters: {
-        containerApi: DockviewApi;
-        api: DockviewGroupPanelApi;
-    }): void;
-    dispose(): void;
-    update(event: PanelUpdateEvent): void;
-    private updatePanels;
-    private updateActivePanel;
-    private updateGroupActive;
-    private updateLocation;
-}

package/dist/esm/dockview/headerActionsRenderer.js

@@ -1,72 +0,0 @@
-import { ReactPart } from '../react';
-import { DockviewCompositeDisposable, DockviewMutableDisposable, } from 'dockview-core';
-export class ReactHeaderActionsRendererPart {
-    get element() {
-        return this._element;
-    }
-    get part() {
-        return this._part;
-    }
-    constructor(component, reactPortalStore, _group) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._group = _group;
-        this.mutableDisposable = new DockviewMutableDisposable();
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.mutableDisposable.value = new DockviewCompositeDisposable(this._group.model.onDidAddPanel(() => {
-            this.updatePanels();
-        }), this._group.model.onDidRemovePanel(() => {
-            this.updatePanels();
-        }), this._group.model.onDidActivePanelChange(() => {
-            this.updateActivePanel();
-        }), parameters.api.onDidActiveChange(() => {
-            this.updateGroupActive();
-        }), parameters.api.onDidLocationChange((event) => {
-            this.updateLocation(event.location);
-        }));
-        this._part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            panels: this._group.model.panels,
-            activePanel: this._group.model.activePanel,
-            isGroupActive: this._group.api.isActive,
-            group: this._group,
-            headerPosition: this._group.model.headerPosition,
-            location: parameters.api.location,
-        });
-    }
-    dispose() {
-        var _a;
-        this.mutableDisposable.dispose();
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-    update(event) {
-        var _a;
-        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
-    }
-    updatePanels() {
-        this.update({ params: { panels: this._group.model.panels } });
-    }
-    updateActivePanel() {
-        this.update({
-            params: {
-                activePanel: this._group.model.activePanel,
-            },
-        });
-    }
-    updateGroupActive() {
-        this.update({
-            params: {
-                isGroupActive: this._group.api.isActive,
-            },
-        });
-    }
-    updateLocation(location) {
-        this.update({ params: { location } });
-    }
-}

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ReactPortalStore } from '../react';
-import { DockviewEvent, PanelUpdateEvent, IContentRenderer, GroupPanelPartInitParameters, IDockviewPanelProps } from 'dockview-core';
-export declare class ReactPanelContentPart implements IContentRenderer {
-    readonly id: string;
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _element;
-    private part?;
-    private readonly _onDidFocus;
-    readonly onDidFocus: DockviewEvent<void>;
-    private readonly _onDidBlur;
-    readonly onDidBlur: DockviewEvent<void>;
-    get element(): HTMLElement;
-    constructor(id: string, component: React.FunctionComponent<IDockviewPanelProps>, reactPortalStore: ReactPortalStore);
-    focus(): void;
-    init(parameters: GroupPanelPartInitParameters): void;
-    update(event: PanelUpdateEvent): void;
-    layout(_width: number, _height: number): void;
-    dispose(): void;
-}

package/dist/esm/dockview/reactContentPart.js

@@ -1,43 +0,0 @@
-import { ReactPart } from '../react';
-import { DockviewEmitter, } from 'dockview-core';
-export class ReactPanelContentPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._onDidFocus = new DockviewEmitter();
-        this.onDidFocus = this._onDidFocus.event;
-        this._onDidBlur = new DockviewEmitter();
-        this.onDidBlur = this._onDidBlur.event;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    focus() {
-        // TODO
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-        });
-    }
-    update(event) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
-    }
-    layout(_width, _height) {
-        // noop
-    }
-    dispose() {
-        var _a;
-        this._onDidFocus.dispose();
-        this._onDidBlur.dispose();
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}

package/dist/esm/dockview/reactContextMenuItemPart.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ReactPortalStore } from '../react';
-import { IContextMenuItemRenderer, IContextMenuItemComponentProps } from 'dockview-core';
-export declare class ReactContextMenuItemPart implements IContextMenuItemRenderer {
-    readonly id: string;
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _element;
-    private part?;
-    get element(): HTMLElement;
-    constructor(id: string, component: React.FunctionComponent<IContextMenuItemComponentProps>, reactPortalStore: ReactPortalStore);
-    init(props: IContextMenuItemComponentProps): void;
-    dispose(): void;
-}

package/dist/esm/dockview/reactContextMenuItemPart.js

@@ -1,22 +0,0 @@
-import { ReactPart } from '../react';
-export class ReactContextMenuItemPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(props) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, props);
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}

package/dist/esm/dockview/reactGroupDragGhostPart.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ReactPortalStore } from '../react';
-import { IDockviewGroupPanel, IGroupDragGhostRenderer, DockviewApi } from 'dockview-core';
-export interface IDockviewGroupDragGhostProps {
-    group: IDockviewGroupPanel;
-    api: DockviewApi;
-}
-export declare class ReactGroupDragGhostPart implements IGroupDragGhostRenderer {
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _element;
-    private part?;
-    get element(): HTMLElement;
-    constructor(component: React.FunctionComponent<IDockviewGroupDragGhostProps>, reactPortalStore: ReactPortalStore);
-    init(params: {
-        group: IDockviewGroupPanel;
-        api: DockviewApi;
-    }): void;
-    dispose(): void;
-}

package/dist/esm/dockview/reactGroupDragGhostPart.js

@@ -1,23 +0,0 @@
-import { ReactPart } from '../react';
-export class ReactGroupDragGhostPart {
-    get element() {
-        return this._element;
-    }
-    constructor(component, reactPortalStore) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.display = 'inline-flex';
-    }
-    init(params) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
-            group: params.group,
-            api: params.api,
-        });
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import { ReactPortalStore } from '../react';
-import { PanelUpdateEvent, ITabRenderer, TabPartInitParameters, IDockviewPanelHeaderProps } from 'dockview-core';
-export declare class ReactPanelHeaderPart implements ITabRenderer {
-    readonly id: string;
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _element;
-    private part?;
-    get element(): HTMLElement;
-    constructor(id: string, component: React.FunctionComponent<IDockviewPanelHeaderProps>, reactPortalStore: ReactPortalStore);
-    focus(): void;
-    init(parameters: TabPartInitParameters): void;
-    update(event: PanelUpdateEvent): void;
-    layout(_width: number, _height: number): void;
-    dispose(): void;
-}

package/dist/esm/dockview/reactHeaderPart.js

@@ -1,37 +0,0 @@
-import { ReactPart } from '../react';
-export class ReactPanelHeaderPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    focus() {
-        //noop
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-            tabLocation: parameters.tabLocation,
-        });
-    }
-    update(event) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
-    }
-    layout(_width, _height) {
-        // noop - retrieval from api
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}

package/dist/esm/dockview/reactTabGroupChipPart.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { ReactPortalStore } from '../react';
-import { ITabGroupChipRenderer, ITabGroup, DockviewApi } from 'dockview-core';
-export interface IDockviewTabGroupChipProps {
-    tabGroup: ITabGroup;
-    api: DockviewApi;
-}
-export declare class ReactTabGroupChipPart implements ITabGroupChipRenderer {
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _element;
-    private part?;
-    get element(): HTMLElement;
-    constructor(component: React.FunctionComponent<IDockviewTabGroupChipProps>, reactPortalStore: ReactPortalStore);
-    init(params: {
-        tabGroup: ITabGroup;
-        api: DockviewApi;
-    }): void;
-    update(params: {
-        tabGroup: ITabGroup;
-    }): void;
-    dispose(): void;
-}

package/dist/esm/dockview/reactTabGroupChipPart.js

@@ -1,27 +0,0 @@
-import { ReactPart } from '../react';
-export class ReactTabGroupChipPart {
-    get element() {
-        return this._element;
-    }
-    constructor(component, reactPortalStore) {
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.display = 'inline-flex';
-    }
-    init(params) {
-        this.part = new ReactPart(this._element, this.reactPortalStore, this.component, {
-            tabGroup: params.tabGroup,
-            api: params.api,
-        });
-    }
-    update(params) {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ tabGroup: params.tabGroup });
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ReactPortalStore } from '../react';
-import { PanelUpdateEvent, IWatermarkRenderer, WatermarkRendererInitParameters, IWatermarkPanelProps } from 'dockview-core';
-export declare class ReactWatermarkPart implements IWatermarkRenderer {
-    readonly id: string;
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _element;
-    private part?;
-    private readonly parameters;
-    get element(): HTMLElement;
-    constructor(id: string, component: React.FunctionComponent<IWatermarkPanelProps>, reactPortalStore: ReactPortalStore);
-    init(parameters: WatermarkRendererInitParameters): void;
-    focus(): void;
-    update(params: PanelUpdateEvent): void;
-    layout(_width: number, _height: number): void;
-    dispose(): void;
-}

package/dist/esm/dockview/reactWatermarkPart.js

@@ -1,38 +0,0 @@
-import { ReactPart } from '../react';
-export class ReactWatermarkPart {
-    get element() {
-        return this._element;
-    }
-    constructor(id, component, reactPortalStore) {
-        this.id = id;
-        this.component = component;
-        this.reactPortalStore = reactPortalStore;
-        this._element = document.createElement('div');
-        this._element.className = 'dv-react-part';
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-    init(parameters) {
-        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
-            group: parameters.group,
-            containerApi: parameters.containerApi,
-        });
-    }
-    focus() {
-        // noop
-    }
-    update(params) {
-        var _a, _b, _c;
-        if (this.parameters) {
-            this.parameters.params = params.params;
-        }
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: (_c = (_b = this.parameters) === null || _b === void 0 ? void 0 : _b.params) !== null && _c !== void 0 ? _c : {} });
-    }
-    layout(_width, _height) {
-        // noop - retrieval from api
-    }
-    dispose() {
-        var _a;
-        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
-    }
-}