dockview 1.5.0 → 1.5.2

package/dist/esm/react/deserializer.js

@@ -1,40 +1,38 @@
-import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { createComponent } from '../panel/componentFactory';
-import { DockviewApi } from '../api/component.api';
-import { DefaultTab } from '../dockview/components/tab/defaultTab';
-import { DefaultGroupPanelView } from '../dockview/defaultGroupPanelView';
-export class ReactPanelDeserialzier {
-    constructor(layout) {
-        this.layout = layout;
-    }
-    fromJSON(panelData, group) {
-        var _a, _b, _c, _d;
-        const panelId = panelData.id;
-        const params = panelData.params;
-        const title = panelData.title;
-        const suppressClosable = panelData.suppressClosable;
-        const viewData = panelData.view;
-        let tab;
-        if ((_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id) {
-            tab = createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
-        }
-        else if (this.layout.options.defaultTabComponent) {
-            tab = createComponent(this.layout.options.defaultTabComponent, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
-        }
-        else {
-            tab = new DefaultTab();
-        }
-        const view = new DefaultGroupPanelView({
-            content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
-            tab,
-        });
-        const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
-        panel.init({
-            view,
-            title,
-            suppressClosable,
-            params: params || {},
-        });
-        return panel;
-    }
-}
+import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
+import { createComponent } from '../panel/componentFactory';
+import { DockviewApi } from '../api/component.api';
+import { DefaultTab } from '../dockview/components/tab/defaultTab';
+import { DefaultGroupPanelView } from '../dockview/defaultGroupPanelView';
+export class ReactPanelDeserialzier {
+    constructor(layout) {
+        this.layout = layout;
+    }
+    fromJSON(panelData, group) {
+        var _a, _b, _c, _d;
+        const panelId = panelData.id;
+        const params = panelData.params;
+        const title = panelData.title;
+        const viewData = panelData.view;
+        let tab;
+        if ((_a = viewData.tab) === null || _a === void 0 ? void 0 : _a.id) {
+            tab = createComponent(viewData.tab.id, viewData.tab.id, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_b = this.layout.options.frameworkComponentFactory) === null || _b === void 0 ? void 0 : _b.tab, () => new DefaultTab());
+        }
+        else if (this.layout.options.defaultTabComponent) {
+            tab = createComponent(this.layout.options.defaultTabComponent, this.layout.options.defaultTabComponent, this.layout.options.tabComponents, this.layout.options.frameworkTabComponents, (_c = this.layout.options.frameworkComponentFactory) === null || _c === void 0 ? void 0 : _c.tab, () => new DefaultTab());
+        }
+        else {
+            tab = new DefaultTab();
+        }
+        const view = new DefaultGroupPanelView({
+            content: createComponent(viewData.content.id, viewData.content.id, this.layout.options.components, this.layout.options.frameworkComponents, (_d = this.layout.options.frameworkComponentFactory) === null || _d === void 0 ? void 0 : _d.content),
+            tab,
+        });
+        const panel = new DockviewGroupPanel(panelId, this.layout, new DockviewApi(this.layout), group);
+        panel.init({
+            view,
+            title,
+            params: params || {},
+        });
+        return panel;
+    }
+}

package/dist/esm/react/dockview/defaultTab.d.ts

@@ -1,4 +1,4 @@
-import { IDockviewPanelHeaderProps } from './dockview';
-import * as React from 'react';
-export declare type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
-export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;
+import { IDockviewPanelHeaderProps } from './dockview';
+import * as React from 'react';
+export declare type IDockviewDefaultTabProps = IDockviewPanelHeaderProps & React.DOMAttributes<HTMLDivElement>;
+export declare const DockviewDefaultTab: React.FunctionComponent<IDockviewDefaultTabProps>;

package/dist/esm/react/dockview/defaultTab.js

@@ -1,34 +1,34 @@
-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 * as React from 'react';
-import { CloseButton } from '../svg';
-export const DockviewDefaultTab = (_a) => {
-    var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
-    const onClose = React.useCallback((event) => {
-        event.stopPropagation();
-        api.close();
-    }, [api]);
-    const onClick = React.useCallback((event) => {
-        api.setActive();
-        if (rest.onClick) {
-            rest.onClick(event);
-        }
-    }, [api, rest.onClick]);
-    const iconClassname = React.useMemo(() => {
-        const cn = ['dockview-react-tab-action'];
-        return cn.join(',');
-    }, [api.suppressClosable]);
-    return (React.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
-        React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
-        React.createElement("div", { className: iconClassname, onClick: onClose },
-            React.createElement(CloseButton, null))));
-};
+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 * as React from 'react';
+import { CloseButton } from '../svg';
+export const DockviewDefaultTab = (_a) => {
+    var { api, containerApi: _containerApi, params: _params } = _a, rest = __rest(_a, ["api", "containerApi", "params"]);
+    const onClose = React.useCallback((event) => {
+        event.stopPropagation();
+        api.close();
+    }, [api]);
+    const onClick = React.useCallback((event) => {
+        api.setActive();
+        if (rest.onClick) {
+            rest.onClick(event);
+        }
+    }, [api, rest.onClick]);
+    const iconClassname = React.useMemo(() => {
+        const cn = ['dockview-react-tab-action'];
+        return cn.join(',');
+    }, []);
+    return (React.createElement("div", Object.assign({}, rest, { onClick: onClick, className: "dockview-react-tab" }),
+        React.createElement("span", { className: "dockview-react-tab-title" }, api.title),
+        React.createElement("div", { className: iconClassname, onClick: onClose },
+            React.createElement(CloseButton, null))));
+};

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

@@ -1,35 +1,34 @@
-import * as React from 'react';
-import { DockviewDropEvent } from '../../dockview/dockviewComponent';
-import { DockviewDndOverlayEvent, TabContextMenuEvent } from '../../dockview/options';
-import { DockviewPanelApi } from '../../api/groupPanelApi';
-import { DockviewApi } from '../../api/component.api';
-import { IWatermarkPanelProps } from './reactWatermarkPart';
-import { PanelCollection, PanelParameters } from '../types';
-import { IDockviewGroupControlProps } from './groupControlsRenderer';
-export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
-    api: DockviewPanelApi;
-    containerApi: DockviewApi;
-}
-export declare type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
-export declare type IDockviewPanelProps<T extends {
-    [index: string]: any;
-} = any> = IGroupPanelBaseProps<T>;
-export interface DockviewReadyEvent {
-    api: DockviewApi;
-}
-export interface IDockviewReactProps {
-    components: PanelCollection<IDockviewPanelProps>;
-    tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
-    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onReady: (event: DockviewReadyEvent) => void;
-    tabHeight?: number;
-    onTabContextMenu?: (event: TabContextMenuEvent) => void;
-    onDidDrop?: (event: DockviewDropEvent) => void;
-    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
-    hideBorders?: boolean;
-    className?: string;
-    disableAutoResizing?: boolean;
-    defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
-    groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
-}
-export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;
+import * as React from 'react';
+import { DockviewDropEvent } from '../../dockview/dockviewComponent';
+import { DockviewDndOverlayEvent } from '../../dockview/options';
+import { DockviewPanelApi } from '../../api/groupPanelApi';
+import { DockviewApi } from '../../api/component.api';
+import { IWatermarkPanelProps } from './reactWatermarkPart';
+import { PanelCollection, PanelParameters } from '../types';
+import { IDockviewGroupControlProps } from './groupControlsRenderer';
+export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
+    api: DockviewPanelApi;
+    containerApi: DockviewApi;
+}
+export declare type IDockviewPanelHeaderProps<T extends {} = Record<string, any>> = IGroupPanelBaseProps<T>;
+export declare type IDockviewPanelProps<T extends {
+    [index: string]: any;
+} = any> = IGroupPanelBaseProps<T>;
+export interface DockviewReadyEvent {
+    api: DockviewApi;
+}
+export interface IDockviewReactProps {
+    components: PanelCollection<IDockviewPanelProps>;
+    tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
+    watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
+    onReady: (event: DockviewReadyEvent) => void;
+    tabHeight?: number;
+    onDidDrop?: (event: DockviewDropEvent) => void;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
+    hideBorders?: boolean;
+    className?: string;
+    disableAutoResizing?: boolean;
+    defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
+    groupControlComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
+}
+export declare const DockviewReact: React.ForwardRefExoticComponent<IDockviewReactProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/react/dockview/dockview.js

@@ -1,172 +1,157 @@
-import * as React from 'react';
-import { DockviewComponent, } from '../../dockview/dockviewComponent';
-import { ReactPanelContentPart } from './reactContentPart';
-import { ReactPanelHeaderPart } from './reactHeaderPart';
-import { ReactPanelDeserialzier } from '../deserializer';
-import { usePortalsLifecycle } from '../react';
-import { DockviewApi } from '../../api/component.api';
-import { ReactWatermarkPart } from './reactWatermarkPart';
-import { watchElementResize } from '../../dom';
-import { ReactGroupControlsRendererPart, } from './groupControlsRenderer';
-import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
-function createGroupControlElement(component, store) {
-    return component
-        ? (groupPanel) => {
-            return new ReactGroupControlsRendererPart(component, store, groupPanel);
-        }
-        : undefined;
-}
-export const DockviewReact = React.forwardRef((props, ref) => {
-    const domRef = React.useRef(null);
-    const dockviewRef = React.useRef();
-    const [portals, addPortal] = usePortalsLifecycle();
-    React.useImperativeHandle(ref, () => domRef.current, []);
-    React.useEffect(() => {
-        if (props.disableAutoResizing) {
-            return () => {
-                //
-            };
-        }
-        const watcher = watchElementResize(domRef.current, (entry) => {
-            var _a;
-            const { width, height } = entry.contentRect;
-            (_a = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
-        });
-        return () => {
-            watcher.dispose();
-        };
-    }, [props.disableAutoResizing]);
-    React.useEffect(() => {
-        var _a;
-        const factory = {
-            content: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactPanelContentPart(componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            tab: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactPanelHeaderPart(componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-            watermark: {
-                createComponent: (_id, componentId, component) => {
-                    return new ReactWatermarkPart(componentId, component, {
-                        addPortal,
-                    });
-                },
-            },
-        };
-        const element = document.createElement('div');
-        const dockview = new DockviewComponent(element, {
-            frameworkComponentFactory: factory,
-            frameworkComponents: props.components,
-            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
-            tabHeight: props.tabHeight,
-            watermarkFrameworkComponent: props.watermarkComponent,
-            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
-            styles: props.hideBorders
-                ? { separatorBorder: 'transparent' }
-                : undefined,
-            showDndOverlay: props.showDndOverlay,
-            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
-        });
-        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
-        dockview.deserializer = new ReactPanelDeserialzier(dockview);
-        const { clientWidth, clientHeight } = domRef.current;
-        dockview.layout(clientWidth, clientHeight);
-        if (props.onReady) {
-            props.onReady({ api: new DockviewApi(dockview) });
-        }
-        dockviewRef.current = dockview;
-        return () => {
-            dockview.dispose();
-            element.remove();
-        };
-    }, []);
-    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;
-        }
-        dockviewRef.current.updateOptions({
-            frameworkComponents: props.components,
-        });
-    }, [props.components]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            watermarkFrameworkComponent: props.watermarkComponent,
-        });
-    }, [props.watermarkComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            showDndOverlay: props.showDndOverlay,
-        });
-    }, [props.showDndOverlay]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            frameworkTabComponents: props.tabComponents,
-        });
-    }, [props.tabComponents]);
-    React.useEffect(() => {
-        if (!props.onTabContextMenu || !dockviewRef.current) {
-            return () => {
-                //noop
-            };
-        }
-        const disposable = dockviewRef.current.onTabContextMenu((event) => {
-            if (props.onTabContextMenu) {
-                props.onTabContextMenu(event);
-            }
-        });
-        return () => {
-            disposable.dispose();
-        };
-    }, [props.onTabContextMenu]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
-            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
-        });
-    }, [props.defaultTabComponent]);
-    React.useEffect(() => {
-        if (!dockviewRef.current) {
-            return;
-        }
-        dockviewRef.current.updateOptions({
-            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
-        });
-    }, [props.groupControlComponent]);
-    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
-});
-DockviewReact.displayName = 'DockviewComponent';
+import * as React from 'react';
+import { DockviewComponent, } from '../../dockview/dockviewComponent';
+import { ReactPanelContentPart } from './reactContentPart';
+import { ReactPanelHeaderPart } from './reactHeaderPart';
+import { ReactPanelDeserialzier } from '../deserializer';
+import { usePortalsLifecycle } from '../react';
+import { DockviewApi } from '../../api/component.api';
+import { ReactWatermarkPart } from './reactWatermarkPart';
+import { watchElementResize } from '../../dom';
+import { ReactGroupControlsRendererPart, } from './groupControlsRenderer';
+import { DEFAULT_TAB_IDENTIFIER } from '../../dockview/components/tab/defaultTab';
+function createGroupControlElement(component, store) {
+    return component
+        ? (groupPanel) => {
+            return new ReactGroupControlsRendererPart(component, store, groupPanel);
+        }
+        : undefined;
+}
+export const DockviewReact = React.forwardRef((props, ref) => {
+    const domRef = React.useRef(null);
+    const dockviewRef = React.useRef();
+    const [portals, addPortal] = usePortalsLifecycle();
+    React.useImperativeHandle(ref, () => domRef.current, []);
+    React.useEffect(() => {
+        if (props.disableAutoResizing) {
+            return () => {
+                //
+            };
+        }
+        const watcher = watchElementResize(domRef.current, (entry) => {
+            var _a;
+            const { width, height } = entry.contentRect;
+            (_a = dockviewRef.current) === null || _a === void 0 ? void 0 : _a.layout(width, height);
+        });
+        return () => {
+            watcher.dispose();
+        };
+    }, [props.disableAutoResizing]);
+    React.useEffect(() => {
+        var _a;
+        const factory = {
+            content: {
+                createComponent: (_id, componentId, component) => {
+                    return new ReactPanelContentPart(componentId, component, {
+                        addPortal,
+                    });
+                },
+            },
+            tab: {
+                createComponent: (_id, componentId, component) => {
+                    return new ReactPanelHeaderPart(componentId, component, {
+                        addPortal,
+                    });
+                },
+            },
+            watermark: {
+                createComponent: (_id, componentId, component) => {
+                    return new ReactWatermarkPart(componentId, component, {
+                        addPortal,
+                    });
+                },
+            },
+        };
+        const element = document.createElement('div');
+        const dockview = new DockviewComponent(element, {
+            frameworkComponentFactory: factory,
+            frameworkComponents: props.components,
+            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+            tabHeight: props.tabHeight,
+            watermarkFrameworkComponent: props.watermarkComponent,
+            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+            styles: props.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
+            showDndOverlay: props.showDndOverlay,
+            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+        });
+        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dockview.element);
+        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        const { clientWidth, clientHeight } = domRef.current;
+        dockview.layout(clientWidth, clientHeight);
+        if (props.onReady) {
+            props.onReady({ api: new DockviewApi(dockview) });
+        }
+        dockviewRef.current = dockview;
+        return () => {
+            dockview.dispose();
+            element.remove();
+        };
+    }, []);
+    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;
+        }
+        dockviewRef.current.updateOptions({
+            frameworkComponents: props.components,
+        });
+    }, [props.components]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            watermarkFrameworkComponent: props.watermarkComponent,
+        });
+    }, [props.watermarkComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            showDndOverlay: props.showDndOverlay,
+        });
+    }, [props.showDndOverlay]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            frameworkTabComponents: props.tabComponents,
+        });
+    }, [props.tabComponents]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            defaultTabComponent: DEFAULT_TAB_IDENTIFIER,
+            frameworkTabComponents: Object.assign(Object.assign({}, (props.tabComponents || {})), { [DEFAULT_TAB_IDENTIFIER]: props.defaultTabComponent }),
+        });
+    }, [props.defaultTabComponent]);
+    React.useEffect(() => {
+        if (!dockviewRef.current) {
+            return;
+        }
+        dockviewRef.current.updateOptions({
+            createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+        });
+    }, [props.groupControlComponent]);
+    return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
+});
+DockviewReact.displayName = 'DockviewComponent';

package/dist/esm/react/dockview/groupControlsRenderer.d.ts

@@ -1,43 +1,43 @@
-import * as React from 'react';
-import { ReactPart, ReactPortalStore } from '../react';
-import { PanelUpdateEvent } from '../../panel/types';
-import { GroupPanel, GroupviewPanelApi } from '../../groupview/groupviewPanel';
-import { DockviewApi } from '../../api/component.api';
-import { IDisposable } from '../../lifecycle';
-import { IDockviewPanel } from '../../groupview/groupPanel';
-export interface IDockviewGroupControlProps {
-    api: GroupviewPanelApi;
-    containerApi: DockviewApi;
-    panels: IDockviewPanel[];
-    activePanel: IDockviewPanel | undefined;
-    isGroupActive: boolean;
-}
-export interface IGroupControlRenderer extends IDisposable {
-    readonly element: HTMLElement;
-    init(params: {
-        containerApi: DockviewApi;
-        api: GroupviewPanelApi;
-    }): void;
-}
-export declare class ReactGroupControlsRendererPart {
-    private readonly component;
-    private readonly reactPortalStore;
-    private readonly _group;
-    private mutableDisposable;
-    private _element;
-    private _part?;
-    get element(): HTMLElement;
-    get part(): ReactPart<IDockviewGroupControlProps> | undefined;
-    get group(): GroupPanel;
-    constructor(component: React.FunctionComponent<IDockviewGroupControlProps>, reactPortalStore: ReactPortalStore, _group: GroupPanel);
-    focus(): void;
-    init(parameters: {
-        containerApi: DockviewApi;
-        api: GroupviewPanelApi;
-    }): void;
-    update(event: PanelUpdateEvent): void;
-    dispose(): void;
-    private updatePanels;
-    private updateActivePanel;
-    private updateGroupActive;
-}
+import * as React from 'react';
+import { ReactPart, ReactPortalStore } from '../react';
+import { PanelUpdateEvent } from '../../panel/types';
+import { GroupPanel, GroupviewPanelApi } from '../../groupview/groupviewPanel';
+import { DockviewApi } from '../../api/component.api';
+import { IDisposable } from '../../lifecycle';
+import { IDockviewPanel } from '../../groupview/groupPanel';
+export interface IDockviewGroupControlProps {
+    api: GroupviewPanelApi;
+    containerApi: DockviewApi;
+    panels: IDockviewPanel[];
+    activePanel: IDockviewPanel | undefined;
+    isGroupActive: boolean;
+}
+export interface IGroupControlRenderer extends IDisposable {
+    readonly element: HTMLElement;
+    init(params: {
+        containerApi: DockviewApi;
+        api: GroupviewPanelApi;
+    }): void;
+}
+export declare class ReactGroupControlsRendererPart {
+    private readonly component;
+    private readonly reactPortalStore;
+    private readonly _group;
+    private mutableDisposable;
+    private _element;
+    private _part?;
+    get element(): HTMLElement;
+    get part(): ReactPart<IDockviewGroupControlProps> | undefined;
+    get group(): GroupPanel;
+    constructor(component: React.FunctionComponent<IDockviewGroupControlProps>, reactPortalStore: ReactPortalStore, _group: GroupPanel);
+    focus(): void;
+    init(parameters: {
+        containerApi: DockviewApi;
+        api: GroupviewPanelApi;
+    }): void;
+    update(event: PanelUpdateEvent): void;
+    dispose(): void;
+    private updatePanels;
+    private updateActivePanel;
+    private updateGroupActive;
+}