dockview/dist/package/main.esm.mjs

React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels

/**
 * dockview
 * @version 6.2.2
 * @link https://github.com/mathuo/dockview
 * @license MIT
 */
import { DockviewDisposable, DockviewEmitter, DockviewMutableDisposable, DockviewCompositeDisposable, PROPERTY_KEYS_DOCKVIEW, createDockview, SplitviewPanel, SplitviewApi, PROPERTY_KEYS_SPLITVIEW, createSplitview, GridviewPanel, GridviewApi, PROPERTY_KEYS_GRIDVIEW, createGridview, PROPERTY_KEYS_PANEVIEW, createPaneview } from 'dockview-core';
export * from 'dockview-core';
import React from 'react';
import ReactDOM from 'react-dom';

/**
 * This component is intended to interface between vanilla-js and React hence we need to be
 * creative in how we update props.
 * A ref of the component is exposed with an update method; which when called stores the props
 * as a ref within this component and forcefully triggers a re-render of the component using
 * the ref of props we just set on the renderered component as the props passed to the inner
 * component
 */
const ReactComponentBridge = (props, ref) => {
    const [, triggerRender] = React.useState(0);
    const _props = React.useRef(props.componentProps);
    React.useImperativeHandle(ref, () => ({
        update: (componentProps) => {
            _props.current = Object.assign(Object.assign({}, _props.current), componentProps);
            /**
             * setting a arbitrary piece of state within this component will
             * trigger a re-render.
             * we use this rather than updating through a prop since we can
             * pass a ref into the vanilla-js world.
             *
             * Use a monotonic counter rather than `Date.now()` so two
             * updates within the same millisecond still produce distinct
             * state values and avoid React's bailout.
             */
            triggerRender((n) => n + 1);
        },
    }), []);
    return React.createElement(props.component, _props.current);
};
ReactComponentBridge.displayName = 'DockviewReactJsBridge';
/**
 * Since we are storing the React.Portal references in a rendered array they
 * require a key property like any other React element rendered in an array
 * to prevent excessive re-rendering
 */
const uniquePortalKeyGenerator = (() => {
    let value = 1;
    return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
})();
const ReactPartContext = React.createContext({});
class ReactPart {
    constructor(parent, portalStore, component, parameters, context) {
        this.parent = parent;
        this.portalStore = portalStore;
        this.component = component;
        this.parameters = parameters;
        this.context = context;
        this._initialProps = {};
        this.disposed = false;
        this.createPortal();
    }
    update(props) {
        if (this.disposed) {
            throw new Error('invalid operation: resource is already disposed');
        }
        if (!this.componentInstance) {
            // if the component is yet to be mounted store the props
            this._initialProps = Object.assign(Object.assign({}, this._initialProps), props);
        }
        else {
            this.componentInstance.update(props);
        }
    }
    createPortal() {
        if (this.disposed) {
            throw new Error('invalid operation: resource is already disposed');
        }
        if (!isReactComponent(this.component)) {
            /**
             * we know this isn't a React.FunctionComponent so throw an error here.
             * if we do not intercept then React library will throw a very obsure error
             * for the same reason... at least at this point we will emit a sensible stacktrace.
             */
            throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
        }
        const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
            component: this
                .component,
            componentProps: this.parameters,
            ref: (element) => {
                this.componentInstance = element;
                if (Object.keys(this._initialProps).length > 0) {
                    this.componentInstance.update(this._initialProps);
                    this._initialProps = {}; // don't keep a reference to the users object once no longer required
                }
            },
        });
        const node = this.context
            ? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
            : bridgeComponent;
        const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
        this.ref = {
            portal,
            disposable: this.portalStore.addPortal(portal),
        };
    }
    dispose() {
        var _a;
        (_a = this.ref) === null || _a === void 0 ? void 0 : _a.disposable.dispose();
        this.disposed = true;
    }
}
/**
 * A React Hook that returns an array of portals to be rendered by the user of this hook
 * and a disposable function to add a portal. Calling dispose removes this portal from the
 * portal array
 */
const usePortalsLifecycle = () => {
    const [portals, setPortals] = React.useState([]);
    React.useDebugValue(`Portal count: ${portals.length}`);
    const addPortal = React.useCallback((portal) => {
        setPortals((existingPortals) => [...existingPortals, portal]);
        let disposed = false;
        return DockviewDisposable.from(() => {
            if (disposed) {
                throw new Error('invalid operation: resource already disposed');
            }
            disposed = true;
            setPortals((existingPortals) => existingPortals.filter((p) => p !== portal));
        });
    }, []);
    return [portals, addPortal];
};
function isReactComponent(component) {
    /**
     * Yes, we could use "react-is" but that would introduce an unwanted peer dependency
     * so for now we will check in a rather crude fashion...
     */
    return (typeof component === 'function' /** Functional Componnts */ ||
        !!(component === null || component === void 0 ? void 0 : component.$$typeof) /** React.memo(...) Components */);
}

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();
    }
}

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();
    }
}

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();
    }
}

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 } });
    }
}

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();
    }
}

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();
    }
}

function createGroupControlElement(component, store) {
    return component
        ? (groupPanel) => {
            return new ReactHeaderActionsRendererPart(component, store, groupPanel);
        }
        : undefined;
}
const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
function extractCoreOptions$3(props) {
    const coreOptions = PROPERTY_KEYS_DOCKVIEW.reduce((obj, key) => {
        if (key in props) {
            obj[key] = props[key];
        }
        return obj;
    }, {});
    return coreOptions;
}
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);
        }
        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$3(props);
        if (props.tabGroupChipComponent) {
            const chipComponent = props.tabGroupChipComponent;
            coreOptions.createTabGroupChipComponent = () => {
                return new ReactTabGroupChipPart(chipComponent, {
                    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({
            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';

/******************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */


function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
    var e = new Error(message);
    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};

const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dv-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" })));

function useTitle(api) {
    const [title, setTitle] = React.useState(api.title);
    React.useEffect(() => {
        const disposable = api.onDidTitleChange((event) => {
            setTitle(event.title);
        });
        // Depending on the order in which React effects are run, the title may already be out of sync (cf. issue #1003).
        if (title !== api.title) {
            setTitle(api.title);
        }
        return () => {
            disposable.dispose();
        };
    }, [api]);
    return title;
}
const DockviewDefaultTab = (_a) => {
    var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride, onPointerDown, onPointerUp, onPointerLeave, tabLocation } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave", "tabLocation"]);
    const title = useTitle(api);
    const isMiddleMouseButton = React.useRef(false);
    const onClose = React.useCallback((event) => {
        event.preventDefault();
        if (closeActionOverride) {
            closeActionOverride();
        }
        else {
            api.close();
        }
    }, [api, closeActionOverride]);
    const onBtnPointerDown = React.useCallback((event) => {
        event.preventDefault();
    }, []);
    const _onPointerDown = React.useCallback((event) => {
        isMiddleMouseButton.current = event.button === 1;
        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
    }, [onPointerDown]);
    const _onPointerUp = React.useCallback((event) => {
        if (isMiddleMouseButton && event.button === 1 && !hideClose) {
            isMiddleMouseButton.current = false;
            onClose(event);
        }
        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
    }, [onPointerUp, onClose, hideClose]);
    const _onPointerLeave = React.useCallback((event) => {
        isMiddleMouseButton.current = false;
        onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(event);
    }, [onPointerLeave]);
    return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
        React.createElement("span", { className: "dv-default-tab-content" }, title),
        !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
            React.createElement(CloseButton, null)))));
};

class ReactPanelView extends SplitviewPanel {
    constructor(id, component, reactComponent, reactPortalStore) {
        super(id, component);
        this.reactComponent = reactComponent;
        this.reactPortalStore = reactPortalStore;
    }
    getComponent() {
        var _a, _b;
        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
            api: this.api,
            containerApi: new SplitviewApi(this._params.accessor),
        });
    }
}

function extractCoreOptions$2(props) {
    const coreOptions = PROPERTY_KEYS_SPLITVIEW.reduce((obj, key) => {
        if (key in props) {
            obj[key] = props[key];
        }
        return obj;
    }, {});
    return coreOptions;
}
const SplitviewReact = React.forwardRef((props, ref) => {
    const domRef = React.useRef(null);
    const splitviewRef = React.useRef(undefined);
    const [portals, addPortal] = usePortalsLifecycle();
    React.useImperativeHandle(ref, () => domRef.current, []);
    const prevProps = React.useRef({});
    React.useEffect(() => {
        const changes = {};
        PROPERTY_KEYS_SPLITVIEW.forEach((propKey) => {
            const key = propKey;
            const propValue = props[key];
            if (key in props && propValue !== prevProps.current[key]) {
                changes[key] = propValue;
            }
        });
        if (splitviewRef.current) {
            splitviewRef.current.updateOptions(changes);
        }
        prevProps.current = props;
    }, PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
    React.useEffect(() => {
        if (!domRef.current) {
            return () => {
                // noop
            };
        }
        const frameworkOptions = {
            createComponent: (options) => {
                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
            },
        };
        const api = createSplitview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$2(props)), frameworkOptions));
        const { clientWidth, clientHeight } = domRef.current;
        api.layout(clientWidth, clientHeight);
        if (props.onReady) {
            props.onReady({ api });
        }
        splitviewRef.current = api;
        return () => {
            splitviewRef.current = undefined;
            api.dispose();
        };
    }, []);
    React.useEffect(() => {
        if (!splitviewRef.current) {
            return;
        }
        splitviewRef.current.updateOptions({
            createComponent: (options) => {
                return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
            },
        });
    }, [props.components]);
    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
});
SplitviewReact.displayName = 'SplitviewComponent';

class ReactGridPanelView extends GridviewPanel {
    constructor(id, component, reactComponent, reactPortalStore) {
        super(id, component);
        this.reactComponent = reactComponent;
        this.reactPortalStore = reactPortalStore;
    }
    getComponent() {
        var _a, _b;
        return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
            params: (_b = (_a = this._params) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {},
            api: this.api,
            // TODO: fix casting hack
            containerApi: new GridviewApi(this._params
                .accessor),
        });
    }
}

function extractCoreOptions$1(props) {
    const coreOptions = PROPERTY_KEYS_GRIDVIEW.reduce((obj, key) => {
        if (key in props) {
            obj[key] = props[key];
        }
        return obj;
    }, {});
    return coreOptions;
}
const GridviewReact = React.forwardRef((props, ref) => {
    const domRef = React.useRef(null);
    const gridviewRef = React.useRef(undefined);
    const [portals, addPortal] = usePortalsLifecycle();
    React.useImperativeHandle(ref, () => domRef.current, []);
    const prevProps = React.useRef({});
    React.useEffect(() => {
        const changes = {};
        PROPERTY_KEYS_GRIDVIEW.forEach((propKey) => {
            const key = propKey;
            const propValue = props[key];
            if (key in props && propValue !== prevProps.current[key]) {
                changes[key] = propValue;
            }
        });
        if (gridviewRef.current) {
            gridviewRef.current.updateOptions(changes);
        }
        prevProps.current = props;
    }, PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
    React.useEffect(() => {
        if (!domRef.current) {
            return () => {
                // noop
            };
        }
        const frameworkOptions = {
            createComponent: (options) => {
                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
            },
        };
        const api = createGridview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions$1(props)), frameworkOptions));
        const { clientWidth, clientHeight } = domRef.current;
        api.layout(clientWidth, clientHeight);
        if (props.onReady) {
            props.onReady({ api });
        }
        gridviewRef.current = api;
        return () => {
            gridviewRef.current = undefined;
            api.dispose();
        };
    }, []);
    React.useEffect(() => {
        if (!gridviewRef.current) {
            return;
        }
        gridviewRef.current.updateOptions({
            createComponent: (options) => {
                return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
            },
        });
    }, [props.components]);
    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
});
GridviewReact.displayName = 'GridviewComponent';

class PanePanelSection {
    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.style.height = '100%';
        this._element.style.width = '100%';
    }
    init(parameters) {
        this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
            params: parameters.params,
            api: parameters.api,
            title: parameters.title,
            containerApi: parameters.containerApi,
        });
    }
    toJSON() {
        return {
            id: this.id,
        };
    }
    update(params) {
        var _a;
        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(params.params);
    }
    dispose() {
        var _a;
        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
    }
}

function extractCoreOptions(props) {
    const coreOptions = PROPERTY_KEYS_PANEVIEW.reduce((obj, key) => {
        if (key in props) {
            obj[key] = props[key];
        }
        return obj;
    }, {});
    return coreOptions;
}
const PaneviewReact = React.forwardRef((props, ref) => {
    const domRef = React.useRef(null);
    const paneviewRef = React.useRef(undefined);
    const [portals, addPortal] = usePortalsLifecycle();
    React.useImperativeHandle(ref, () => domRef.current, []);
    const prevProps = React.useRef({});
    React.useEffect(() => {
        const changes = {};
        PROPERTY_KEYS_PANEVIEW.forEach((propKey) => {
            const key = propKey;
            const propValue = props[key];
            if (key in props && propValue !== prevProps.current[key]) {
                changes[key] = propValue;
            }
        });
        if (paneviewRef.current) {
            paneviewRef.current.updateOptions(changes);
        }
        prevProps.current = props;
    }, PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
    React.useEffect(() => {
        var _a;
        if (!domRef.current) {
            return () => {
                // noop
            };
        }
        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
        const frameworkOptions = {
            createComponent: (options) => {
                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
            },
            createHeaderComponent: (options) => {
                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
            },
        };
        const api = createPaneview(domRef.current, Object.assign(Object.assign({}, extractCoreOptions(props)), frameworkOptions));
        const { clientWidth, clientHeight } = domRef.current;
        api.layout(clientWidth, clientHeight);
        if (props.onReady) {
            props.onReady({ api });
        }
        paneviewRef.current = api;
        return () => {
            paneviewRef.current = undefined;
            api.dispose();
        };
    }, []);
    React.useEffect(() => {
        if (!paneviewRef.current) {
            return;
        }
        paneviewRef.current.updateOptions({
            createComponent: (options) => {
                return new PanePanelSection(options.id, props.components[options.name], { addPortal });
            },
        });
    }, [props.components]);
    React.useEffect(() => {
        var _a;
        if (!paneviewRef.current) {
            return;
        }
        const headerComponents = (_a = props.headerComponents) !== null && _a !== void 0 ? _a : {};
        paneviewRef.current.updateOptions({
            createHeaderComponent: (options) => {
                return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
            },
        });
    }, [props.headerComponents]);
    React.useEffect(() => {
        if (!paneviewRef.current) {
            return () => {
                // noop
            };
        }
        const disposable = paneviewRef.current.onDidDrop((event) => {
            if (props.onDidDrop) {
                props.onDidDrop(event);
            }
        });
        return () => {
            disposable.dispose();
        };
    }, [props.onDidDrop]);
    return (React.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
});
PaneviewReact.displayName = 'PaneviewComponent';

export { DockviewDefaultTab, DockviewReact, GridviewReact, PaneviewReact, ReactPart, ReactPartContext, SplitviewReact, isReactComponent, usePortalsLifecycle };