dockview-react 6.6.0 → 7.0.2

package/dist/package/main.esm.mjs

@@ -1,7 +1,1033 @@
 /**
  * dockview-react
- * @version 6.6.0
+ * @version 7.0.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';
 export * from 'dockview';
+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();
+    }
+}
+
+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();
+    }
+}
+
+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,
+                });
+            };
+        }
+        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';
+
+/******************************************************************************
+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 };