dockview-react 6.6.0 → 7.0.2

package/dist/cjs/dockview/defaultTab.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IDockviewPanelHeaderProps } from 'dockview';
+export type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.HtmlHTMLAttributes<HTMLDivElement> & {
+    hideClose?: boolean;
+    closeActionOverride?: () => void;
+};
+export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;

package/dist/cjs/dockview/defaultTab.js

@@ -0,0 +1,99 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (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;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockviewDefaultTab = void 0;
+var react_1 = __importDefault(require("react"));
+var svg_1 = require("../svg");
+function useTitle(api) {
+    var _a = __read(react_1.default.useState(api.title), 2), title = _a[0], setTitle = _a[1];
+    react_1.default.useEffect(function () {
+        var disposable = api.onDidTitleChange(function (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 function () {
+            disposable.dispose();
+        };
+    }, [api]);
+    return title;
+}
+var DockviewDefaultTab = function (_a) {
+    var api = _a.api, _containerApi = _a.containerApi, _params = _a.params, hideClose = _a.hideClose, closeActionOverride = _a.closeActionOverride, onPointerDown = _a.onPointerDown, onPointerUp = _a.onPointerUp, onPointerLeave = _a.onPointerLeave, tabLocation = _a.tabLocation, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride", "onPointerDown", "onPointerUp", "onPointerLeave", "tabLocation"]);
+    var title = useTitle(api);
+    var isMiddleMouseButton = react_1.default.useRef(false);
+    var onClose = react_1.default.useCallback(function (event) {
+        event.preventDefault();
+        if (closeActionOverride) {
+            closeActionOverride();
+        }
+        else {
+            api.close();
+        }
+    }, [api, closeActionOverride]);
+    var onBtnPointerDown = react_1.default.useCallback(function (event) {
+        event.preventDefault();
+    }, []);
+    var _onPointerDown = react_1.default.useCallback(function (event) {
+        isMiddleMouseButton.current = event.button === 1;
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    }, [onPointerDown]);
+    var _onPointerUp = react_1.default.useCallback(function (event) {
+        if (isMiddleMouseButton && event.button === 1 && !hideClose) {
+            isMiddleMouseButton.current = false;
+            onClose(event);
+        }
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+    }, [onPointerUp, onClose, hideClose]);
+    var _onPointerLeave = react_1.default.useCallback(function (event) {
+        isMiddleMouseButton.current = false;
+        onPointerLeave === null || onPointerLeave === void 0 ? void 0 : onPointerLeave(event);
+    }, [onPointerLeave]);
+    return (react_1.default.createElement("div", __assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onPointerDown: _onPointerDown, onPointerUp: _onPointerUp, onPointerLeave: _onPointerLeave, className: "dv-default-tab" }),
+        react_1.default.createElement("span", { className: "dv-default-tab-content" }, title),
+        !hideClose && (react_1.default.createElement("div", { className: "dv-default-tab-action", onPointerDown: onBtnPointerDown, onClick: onClose },
+            react_1.default.createElement(svg_1.CloseButton, null)))));
+};
+exports.DockviewDefaultTab = DockviewDefaultTab;

package/dist/cjs/dockview/dockview.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DockviewWillDropEvent, DockviewDidDropEvent, IWatermarkPanelProps, IDockviewHeaderActionsProps, IDockviewPanelHeaderProps, IDockviewPanelProps, DockviewOptions, DockviewReadyEvent, BuiltInContextMenuItem, BuiltInChipContextMenuItem, ContextMenuItemConfig, GetTabContextMenuItemsParams, GetTabGroupChipContextMenuItemsParams, IContextMenuItemComponentProps } from 'dockview';
+import { IDockviewTabGroupChipProps } from './reactTabGroupChipPart';
+import { IDockviewGroupDragGhostProps } from './reactGroupDragGhostPart';
+export interface ReactContextMenuItemConfig extends Omit<ContextMenuItemConfig, 'component'> {
+    component?: React.FunctionComponent<IContextMenuItemComponentProps>;
+}
+export interface IDockviewReactProps extends DockviewOptions {
+    tabComponents?: Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>;
+    components: Record<string, React.FunctionComponent<IDockviewPanelProps>>;
+    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
+    defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
+    rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
+    leftHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
+    prefixHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
+    getTabContextMenuItems?: (params: GetTabContextMenuItemsParams) => (BuiltInContextMenuItem | ReactContextMenuItemConfig)[];
+    getTabGroupChipContextMenuItems?: (params: GetTabGroupChipContextMenuItemsParams) => (BuiltInChipContextMenuItem | ReactContextMenuItemConfig)[];
+    tabGroupChipComponent?: React.FunctionComponent<IDockviewTabGroupChipProps>;
+    /**
+     * Component rendered as the drag ghost (the small floating chip) while
+     * a group of panels is being dragged. If omitted, the default
+     * `"Multiple Panels (N)"` ghost is used.
+     *
+     * Note: the ghost is captured by the browser at drag start, so the
+     * component must render fast / synchronously enough to be visible
+     * before the browser snapshots it.
+     */
+    groupDragGhostComponent?: React.FunctionComponent<IDockviewGroupDragGhostProps>;
+    onReady: (event: DockviewReadyEvent) => void;
+    onDidDrop?: (event: DockviewDidDropEvent) => void;
+    onWillDrop?: (event: DockviewWillDropEvent) => void;
+}
+export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/dockview/dockview.js

@@ -0,0 +1,285 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockviewReact = void 0;
+var react_1 = __importDefault(require("react"));
+var dockview_1 = require("dockview");
+var reactContentPart_1 = require("./reactContentPart");
+var reactHeaderPart_1 = require("./reactHeaderPart");
+var react_2 = require("../react");
+var reactWatermarkPart_1 = require("./reactWatermarkPart");
+var headerActionsRenderer_1 = require("./headerActionsRenderer");
+var reactContextMenuItemPart_1 = require("./reactContextMenuItemPart");
+var reactTabGroupChipPart_1 = require("./reactTabGroupChipPart");
+var reactGroupDragGhostPart_1 = require("./reactGroupDragGhostPart");
+function createGroupControlElement(component, store) {
+    return component
+        ? function (groupPanel) {
+            return new headerActionsRenderer_1.ReactHeaderActionsRendererPart(component, store, groupPanel);
+        }
+        : undefined;
+}
+var DEFAULT_REACT_TAB = 'props.defaultTabComponent';
+function extractCoreOptions(props) {
+    var coreOptions = dockview_1.PROPERTY_KEYS_DOCKVIEW.reduce(function (obj, key) {
+        if (key in props) {
+            obj[key] = props[key];
+        }
+        return obj;
+    }, {});
+    return coreOptions;
+}
+exports.DockviewReact = react_1.default.forwardRef(function (props, ref) {
+    var domRef = react_1.default.useRef(null);
+    var dockviewRef = react_1.default.useRef(undefined);
+    var _a = __read((0, react_2.usePortalsLifecycle)(), 2), portals = _a[0], addPortal = _a[1];
+    react_1.default.useImperativeHandle(ref, function () { return domRef.current; }, []);
+    var prevProps = react_1.default.useRef({});
+    react_1.default.useEffect(function () {
+        var changes = {};
+        dockview_1.PROPERTY_KEYS_DOCKVIEW.forEach(function (propKey) {
+            var key = propKey;
+            var 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;
+    }, dockview_1.PROPERTY_KEYS_DOCKVIEW.map(function (key) { return props[key]; }));
+    react_1.default.useEffect(function () {
+        var _a;
+        if (!domRef.current) {
+            return;
+        }
+        var frameworkTabComponents = (_a = props.tabComponents) !== null && _a !== void 0 ? _a : {};
+        if (props.defaultTabComponent) {
+            frameworkTabComponents[DEFAULT_REACT_TAB] =
+                props.defaultTabComponent;
+        }
+        var frameworkOptions = {
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
+            createComponent: function (options) {
+                return new reactContentPart_1.ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal: addPortal,
+                });
+            },
+            createTabComponent: function (options) {
+                return new reactHeaderPart_1.ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal: addPortal,
+                });
+            },
+            createWatermarkComponent: props.watermarkComponent
+                ? function () {
+                    return new reactWatermarkPart_1.ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
+            defaultTabComponent: props.defaultTabComponent
+                ? DEFAULT_REACT_TAB
+                : undefined,
+            createContextMenuItemComponent: function (options) {
+                if (!options.component) {
+                    return undefined;
+                }
+                return new reactContextMenuItemPart_1.ReactContextMenuItemPart(options.id, options.component, { addPortal: addPortal });
+            },
+        };
+        var coreOptions = extractCoreOptions(props);
+        if (props.tabGroupChipComponent) {
+            var chipComponent_1 = props.tabGroupChipComponent;
+            coreOptions.createTabGroupChipComponent = function () {
+                return new reactTabGroupChipPart_1.ReactTabGroupChipPart(chipComponent_1, {
+                    addPortal: addPortal,
+                });
+            };
+        }
+        if (props.groupDragGhostComponent) {
+            var ghostComponent_1 = props.groupDragGhostComponent;
+            coreOptions.createGroupDragGhostComponent = function () {
+                return new reactGroupDragGhostPart_1.ReactGroupDragGhostPart(ghostComponent_1, {
+                    addPortal: addPortal,
+                });
+            };
+        }
+        var api = (0, dockview_1.createDockview)(domRef.current, __assign(__assign({}, coreOptions), frameworkOptions));
+        var _b = domRef.current, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
+        api.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: api });
+        }
+        dockviewRef.current = api;
+        return function () {
+            dockviewRef.current = undefined;
+            api.dispose();
+        };
+    }, []);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var disposable = dockviewRef.current.onDidDrop(function (event) {
+            if (props.onDidDrop) {
+                props.onDidDrop(event);
+            }
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onDidDrop]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return function () {
+                // noop
+            };
+        }
+        var disposable = dockviewRef.current.onWillDrop(function (event) {
+            if (props.onWillDrop) {
+                props.onWillDrop(event);
+            }
+        });
+        return function () {
+            disposable.dispose();
+        };
+    }, [props.onWillDrop]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createTabGroupChipComponent: props.tabGroupChipComponent
+                ? function () {
+                    return new reactTabGroupChipPart_1.ReactTabGroupChipPart(props.tabGroupChipComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
+        });
+    }, [props.tabGroupChipComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createGroupDragGhostComponent: props.groupDragGhostComponent
+                ? function () {
+                    return new reactGroupDragGhostPart_1.ReactGroupDragGhostPart(props.groupDragGhostComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
+        });
+    }, [props.groupDragGhostComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createComponent: function (options) {
+                return new reactContentPart_1.ReactPanelContentPart(options.id, props.components[options.name], {
+                    addPortal: addPortal,
+                });
+            },
+        });
+    }, [props.components]);
+    react_1.default.useEffect(function () {
+        var _a;
+        if (!dockviewRef.current) {
+            return;
+        }
+        var 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: function (options) {
+                return new reactHeaderPart_1.ReactPanelHeaderPart(options.id, frameworkTabComponents[options.name], {
+                    addPortal: addPortal,
+                });
+            },
+        });
+    }, [props.tabComponents, props.defaultTabComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createWatermarkComponent: props.watermarkComponent
+                ? function () {
+                    return new reactWatermarkPart_1.ReactWatermarkPart('watermark', props.watermarkComponent, {
+                        addPortal: addPortal,
+                    });
+                }
+                : undefined,
+        });
+    }, [props.watermarkComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal: addPortal }),
+        });
+    }, [props.rightHeaderActionsComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal: addPortal }),
+        });
+    }, [props.leftHeaderActionsComponent]);
+    react_1.default.useEffect(function () {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal: addPortal }),
+        });
+    }, [props.prefixHeaderActionsComponent]);
+    return (react_1.default.createElement("div", { style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+exports.DockviewReact.displayName = 'DockviewComponent';

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ReactPart, ReactPortalStore } from '../react';
+import { DockviewApi, DockviewGroupPanel, DockviewGroupPanelApi, PanelUpdateEvent, IHeaderActionsRenderer, IDockviewHeaderActionsProps } from 'dockview';
+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/cjs/dockview/headerActionsRenderer.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactHeaderActionsRendererPart = void 0;
+var react_1 = require("../react");
+var dockview_1 = require("dockview");
+var ReactHeaderActionsRendererPart = /** @class */ (function () {
+    function ReactHeaderActionsRendererPart(component, reactPortalStore, _group) {
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._group = _group;
+        this.mutableDisposable = new dockview_1.DockviewMutableDisposable();
+        this._element = document.createElement('div');
+        this._element.className = 'dv-react-part';
+        this._element.style.height = '100%';
+        this._element.style.width = '100%';
+    }
+    Object.defineProperty(ReactHeaderActionsRendererPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ReactHeaderActionsRendererPart.prototype, "part", {
+        get: function () {
+            return this._part;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactHeaderActionsRendererPart.prototype.init = function (parameters) {
+        var _this = this;
+        this.mutableDisposable.value = new dockview_1.DockviewCompositeDisposable(this._group.model.onDidAddPanel(function () {
+            _this.updatePanels();
+        }), this._group.model.onDidRemovePanel(function () {
+            _this.updatePanels();
+        }), this._group.model.onDidActivePanelChange(function () {
+            _this.updateActivePanel();
+        }), parameters.api.onDidActiveChange(function () {
+            _this.updateGroupActive();
+        }), parameters.api.onDidLocationChange(function (event) {
+            _this.updateLocation(event.location);
+        }));
+        this._part = new react_1.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,
+        });
+    };
+    ReactHeaderActionsRendererPart.prototype.dispose = function () {
+        var _a;
+        this.mutableDisposable.dispose();
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    ReactHeaderActionsRendererPart.prototype.update = function (event) {
+        var _a;
+        (_a = this._part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+    };
+    ReactHeaderActionsRendererPart.prototype.updatePanels = function () {
+        this.update({ params: { panels: this._group.model.panels } });
+    };
+    ReactHeaderActionsRendererPart.prototype.updateActivePanel = function () {
+        this.update({
+            params: {
+                activePanel: this._group.model.activePanel,
+            },
+        });
+    };
+    ReactHeaderActionsRendererPart.prototype.updateGroupActive = function () {
+        this.update({
+            params: {
+                isGroupActive: this._group.api.isActive,
+            },
+        });
+    };
+    ReactHeaderActionsRendererPart.prototype.updateLocation = function (location) {
+        this.update({ params: { location: location } });
+    };
+    return ReactHeaderActionsRendererPart;
+}());
+exports.ReactHeaderActionsRendererPart = ReactHeaderActionsRendererPart;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { DockviewEvent, PanelUpdateEvent, IContentRenderer, GroupPanelPartInitParameters, IDockviewPanelProps } from 'dockview';
+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/cjs/dockview/reactContentPart.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactPanelContentPart = void 0;
+var react_1 = require("../react");
+var dockview_1 = require("dockview");
+var ReactPanelContentPart = /** @class */ (function () {
+    function ReactPanelContentPart(id, component, reactPortalStore) {
+        this.id = id;
+        this.component = component;
+        this.reactPortalStore = reactPortalStore;
+        this._onDidFocus = new dockview_1.DockviewEmitter();
+        this.onDidFocus = this._onDidFocus.event;
+        this._onDidBlur = new dockview_1.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%';
+    }
+    Object.defineProperty(ReactPanelContentPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactPanelContentPart.prototype.focus = function () {
+        // TODO
+    };
+    ReactPanelContentPart.prototype.init = function (parameters) {
+        this.part = new react_1.ReactPart(this.element, this.reactPortalStore, this.component, {
+            params: parameters.params,
+            api: parameters.api,
+            containerApi: parameters.containerApi,
+        });
+    };
+    ReactPanelContentPart.prototype.update = function (event) {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
+    };
+    ReactPanelContentPart.prototype.layout = function (_width, _height) {
+        // noop
+    };
+    ReactPanelContentPart.prototype.dispose = function () {
+        var _a;
+        this._onDidFocus.dispose();
+        this._onDidBlur.dispose();
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactPanelContentPart;
+}());
+exports.ReactPanelContentPart = ReactPanelContentPart;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactPortalStore } from '../react';
+import { IContextMenuItemRenderer, IContextMenuItemComponentProps } from 'dockview';
+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/cjs/dockview/reactContextMenuItemPart.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactContextMenuItemPart = void 0;
+var react_1 = require("../react");
+var ReactContextMenuItemPart = /** @class */ (function () {
+    function ReactContextMenuItemPart(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%';
+    }
+    Object.defineProperty(ReactContextMenuItemPart.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ReactContextMenuItemPart.prototype.init = function (props) {
+        this.part = new react_1.ReactPart(this._element, this.reactPortalStore, this.component, props);
+    };
+    ReactContextMenuItemPart.prototype.dispose = function () {
+        var _a;
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
+    return ReactContextMenuItemPart;
+}());
+exports.ReactContextMenuItemPart = ReactContextMenuItemPart;