dockview-react 6.6.1 → 7.0.2

package/dist/esm/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/esm/dockview/defaultTab.js

@@ -0,0 +1,65 @@
+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;
+};
+import React from 'react';
+import { CloseButton } from '../svg';
+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;
+}
+export 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)))));
+};

package/dist/esm/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/esm/dockview/dockview.js

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

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

@@ -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/esm/dockview/headerActionsRenderer.js

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

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

@@ -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/esm/dockview/reactContentPart.js

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

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

@@ -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/esm/dockview/reactContextMenuItemPart.js

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

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

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

package/dist/esm/dockview/reactGroupDragGhostPart.js

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

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

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

package/dist/esm/dockview/reactHeaderPart.js

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