dockview 1.4.0 → 1.4.3

package/dist/esm/gridview/basePanelView.js

@@ -40,7 +40,7 @@ export class BasePanelView extends CompositeDisposable {
     layout(width, height) {
         this._width = width;
         this._height = height;
-        this.api._onDidPanelDimensionChange.fire({ width, height });
+        this.api._onDidDimensionChange.fire({ width, height });
         if (this.part) {
             if (this._params) {
                 this.part.update(this._params.params);

package/dist/esm/gridview/gridviewComponent.d.ts

@@ -37,7 +37,6 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
     addPanel(options: AddComponentOptions): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
-    toggleVisibility(panel: IGridviewPanel): void;
     focus(): void;
     fromJSON(serializedGridview: SerializedGridview): void;
     toJSON(): SerializedGridview;
@@ -70,9 +69,9 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     toJSON(): SerializedGridview;
     setVisible(panel: GridviewPanel, visible: boolean): void;
     setActive(panel: GridviewPanel): void;
-    toggleVisibility(panel: GridviewPanel): void;
     focus(): void;
     fromJSON(serializedGridview: SerializedGridview): void;
+    clear(): void;
     movePanel(panel: GridviewPanel, options: {
         direction: Direction;
         reference: string;

package/dist/esm/gridview/gridviewComponent.js

@@ -3,7 +3,6 @@ import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
 import { CompositeDisposable } from '../lifecycle';
 import { BaseGrid, toTarget, } from './baseComponentGridview';
-import { GridviewApi } from '../api/component.api';
 import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
 export class GridviewComponent extends BaseGrid {
@@ -40,7 +39,7 @@ export class GridviewComponent extends BaseGrid {
     }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
+            this.gridview.orientation !== options.orientation;
         this._options = Object.assign(Object.assign({}, this.options), options);
         if (hasOrientationChanged) {
             this.gridview.orientation = options.orientation;
@@ -71,21 +70,13 @@ export class GridviewComponent extends BaseGrid {
             value.value.setActive(panel === value.value);
         });
     }
-    toggleVisibility(panel) {
-        this.setVisible(panel, !this.isVisible(panel));
-    }
     focus() {
         var _a;
         (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
     }
     fromJSON(serializedGridview) {
+        this.clear();
         const { grid, activePanel } = serializedGridview;
-        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-        for (const group of groups) {
-            group.disposable.dispose();
-            this.doRemoveGroup(group.value, { skipActive: true });
-        }
-        this.gridview.clear();
         const queue = [];
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
@@ -104,9 +95,10 @@ export class GridviewComponent extends BaseGrid {
                     maximumHeight: data.maximumHeight,
                     priority: data.priority,
                     snap: !!data.snap,
-                    containerApi: new GridviewApi(this),
+                    accessor: this,
                     isVisible: node.visible,
                 }));
+                this._onDidAddGroup.fire(view);
                 this.registerPanel(view);
                 return view;
             },
@@ -121,6 +113,18 @@ export class GridviewComponent extends BaseGrid {
         }
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        const hasActiveGroup = this.activeGroup;
+        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+        for (const group of groups) {
+            group.disposable.dispose();
+            this.doRemoveGroup(group.value, { skipActive: true });
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+        this.gridview.clear();
+    }
     movePanel(panel, options) {
         var _a;
         let relativeLocation;
@@ -170,7 +174,7 @@ export class GridviewComponent extends BaseGrid {
             maximumHeight: options.maximumHeight,
             priority: options.priority,
             snap: !!options.snap,
-            containerApi: new GridviewApi(this),
+            accessor: this,
             isVisible: true,
         });
         this.registerPanel(view);

package/dist/esm/gridview/gridviewPanel.d.ts

@@ -1,11 +1,10 @@
 import { PanelInitParameters } from '../panel/types';
-import { IGridPanelComponentView } from './gridviewComponent';
+import { GridviewComponent, IGridPanelComponentView } from './gridviewComponent';
 import { BasePanelView, BasePanelViewExported, BasePanelViewState } from './basePanelView';
 import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { LayoutPriority } from '../splitview/core/splitview';
 import { Event } from '../events';
 import { IViewSize } from './gridview';
-import { GridviewApi } from '../api/component.api';
 export interface GridviewInitParameters extends PanelInitParameters {
     minimumWidth?: number;
     maximumWidth?: number;
@@ -13,7 +12,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
     maximumHeight?: number;
     priority?: LayoutPriority;
     snap?: boolean;
-    containerApi: GridviewApi;
+    accessor: GridviewComponent;
     isVisible?: boolean;
 }
 export interface IGridviewPanel extends BasePanelViewExported<GridviewPanelApiImpl> {

package/dist/esm/gridview/gridviewPanel.js

@@ -17,11 +17,11 @@ export class GridviewPanel extends BasePanelView {
         this.onDidChange = this._onDidChange.event;
         this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
-            const { containerApi } = this._params;
-            containerApi.setVisible(this, isVisible);
+            const { accessor } = this._params;
+            accessor.setVisible(this, isVisible);
         }), this.api.onActiveChange(() => {
-            const { containerApi } = this._params;
-            containerApi.setActive(this);
+            const { accessor } = this._params;
+            accessor.setActive(this);
         }), this.api.onDidConstraintsChangeInternal((event) => {
             if (typeof event.minimumWidth === 'number' ||
                 typeof event.minimumWidth === 'function') {

package/dist/esm/groupview/groupview.d.ts

@@ -1,6 +1,6 @@
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { Position } from '../dnd/droptarget';
-import { IDockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { Event } from '../events';
 import { IGridPanelView } from '../gridview/baseComponentGridview';
 import { IViewSize } from '../gridview/gridview';
@@ -133,7 +133,7 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     get hasWatermark(): boolean;
     get header(): IHeader;
     get isContentFocused(): boolean;
-    constructor(container: HTMLElement, accessor: IDockviewComponent, id: string, options: GroupOptions, parent: GroupPanel);
+    constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, parent: GroupPanel);
     initialize(): void;
     indexOf(panel: IDockviewPanel): number;
     toJSON(): GroupPanelViewState;
@@ -152,7 +152,8 @@ export declare class Groupview extends CompositeDisposable implements IGroupview
     openPanel(panel: IDockviewPanel, options?: {
         index?: number;
         skipFocus?: boolean;
-        skipSetActive?: boolean;
+        skipSetPanelActive?: boolean;
+        skipSetGroupActive?: boolean;
     }): void;
     removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel;
     closeAllPanels(): void;

package/dist/esm/groupview/groupview.js

@@ -210,16 +210,21 @@ export class Groupview extends CompositeDisposable {
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
-        const skipSetActive = !!options.skipSetActive;
+        const skipSetPanelActive = !!options.skipSetPanelActive;
+        const skipSetGroupActive = !!options.skipSetGroupActive;
         // ensure the group is updated before we fire any events
         panel.updateParentGroup(this.parent, true);
-        if (!skipSetActive && this._activePanel === panel) {
-            this.accessor.doSetGroupActive(this.parent);
+        if (this._activePanel === panel) {
+            if (!skipSetGroupActive) {
+                this.accessor.doSetGroupActive(this.parent);
+            }
             return;
         }
-        this.doAddPanel(panel, options.index);
-        if (!skipSetActive) {
+        this.doAddPanel(panel, options.index, skipSetPanelActive);
+        if (!skipSetPanelActive) {
             this.doSetActivePanel(panel);
+        }
+        if (!skipSetGroupActive) {
             this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
         }
         this.updateContainer();
@@ -323,11 +328,13 @@ export class Groupview extends CompositeDisposable {
             panel,
         });
     }
-    doAddPanel(panel, index = this.panels.length) {
+    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
         this.tabsContainer.openPanel(panel, index);
-        this.contentContainer.openPanel(panel);
+        if (!skipSetActive) {
+            this.contentContainer.openPanel(panel);
+        }
         this.tabsContainer.show();
         this.contentContainer.show();
         if (hasExistingPanel) {
@@ -393,7 +400,11 @@ export class Groupview extends CompositeDisposable {
     canDisplayOverlay(event, target) {
         // custom overlay handler
         if (this.accessor.options.showDndOverlay) {
-            return this.accessor.options.showDndOverlay(event, target);
+            return this.accessor.options.showDndOverlay({
+                nativeEvent: event,
+                target,
+                group: this.accessor.getPanel(this.id),
+            });
         }
         return false;
     }

package/dist/esm/groupview/groupviewPanel.d.ts

@@ -1,5 +1,5 @@
 import { IFrameworkPart } from '../panel/types';
-import { IDockviewComponent } from '../dockview/dockviewComponent';
+import { DockviewComponent } from '../dockview/dockviewComponent';
 import { GridviewPanelApi } from '../api/gridviewPanelApi';
 import { Groupview, GroupOptions, IHeader } from './groupview';
 import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
@@ -26,7 +26,7 @@ export declare class GroupPanel extends GridviewPanel implements IGroupviewPanel
     get locked(): boolean;
     set locked(value: boolean);
     get header(): IHeader;
-    constructor(accessor: IDockviewComponent, id: string, options: GroupOptions);
+    constructor(accessor: DockviewComponent, id: string, options: GroupOptions);
     initialize(): void;
     setActive(isActive: boolean): void;
     layout(width: number, height: number): void;

package/dist/esm/groupview/tab.js

@@ -24,6 +24,7 @@ export class Tab extends CompositeDisposable {
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
+        toggleClass(this.element, 'inactive-tab', true);
         this.addDisposables(new (class Handler extends DragHandler {
             constructor() {
                 super(...arguments);

package/dist/esm/groupview/titlebar/tabsContainer.d.ts

@@ -2,7 +2,7 @@ import { IDisposable, CompositeDisposable } from '../../lifecycle';
 import { Event } from '../../events';
 import { ITab } from '../tab';
 import { IDockviewPanel } from '../groupPanel';
-import { IDockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
 import { GroupPanel } from '../groupviewPanel';
 export interface TabDropIndexEvent {
     event: DragEvent;
@@ -37,8 +37,6 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     private readonly voidDropTarget;
     private tabs;
     private selectedIndex;
-    private active;
-    private activePanel;
     private actions;
     private _height;
     private _hidden;
@@ -57,10 +55,10 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     isActive(tab: ITab): boolean;
     at(index: number): ITab;
     indexOf(id: string): number;
-    constructor(accessor: IDockviewComponent, group: GroupPanel, options: {
+    constructor(accessor: DockviewComponent, group: GroupPanel, options: {
         tabHeight?: number;
     });
-    setActive(isGroupActive: boolean): void;
+    setActive(_isGroupActive: boolean): void;
     private addTab;
     delete(id: string): void;
     setActivePanel(panel: IDockviewPanel): void;

package/dist/esm/groupview/titlebar/tabsContainer.js

@@ -12,7 +12,6 @@ export class TabsContainer extends CompositeDisposable {
         this.group = group;
         this.tabs = [];
         this.selectedIndex = -1;
-        this.active = false;
         this._hidden = false;
         this._onDrop = new Emitter();
         this.onDrop = this._onDrop.event;
@@ -116,8 +115,8 @@ export class TabsContainer extends CompositeDisposable {
     indexOf(id) {
         return this.tabs.findIndex((tab) => tab.value.panelId === id);
     }
-    setActive(isGroupActive) {
-        this.active = isGroupActive;
+    setActive(_isGroupActive) {
+        // noop
     }
     addTab(tab, index = this.tabs.length) {
         if (index < 0 || index > this.tabs.length) {
@@ -178,7 +177,6 @@ export class TabsContainer extends CompositeDisposable {
         }));
         const value = { value: tabToAdd, disposable };
         this.addTab(value, index);
-        this.activePanel = panel;
     }
     closePanel(panel) {
         this.delete(panel.id);

package/dist/esm/groupview/types.d.ts

@@ -5,7 +5,6 @@ import { PanelInitParameters, IPanel } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
 import { GroupPanel } from './groupviewPanel';
 import { Event } from '../events';
-import { WrappedTab } from '../dockview/components/tab/defaultTab';
 export interface IRenderable {
     id: string;
     element: HTMLElement;
@@ -21,7 +20,7 @@ export interface GroupPanelPartInitParameters extends PanelInitParameters, Heade
     containerApi: DockviewApi;
 }
 export interface GroupPanelContentPartInitParameters extends GroupPanelPartInitParameters {
-    tab: WrappedTab;
+    tab: ITabRenderer;
 }
 export interface IWatermarkRenderer extends IPanel {
     readonly element: HTMLElement;
@@ -43,7 +42,6 @@ export interface IContentRenderer extends IPanel {
     readonly onDidBlur?: Event<void>;
     updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
     init(parameters: GroupPanelContentPartInitParameters): void;
-    close?(): Promise<boolean>;
 }
 export interface WatermarkPartInitParameters {
     accessor: IDockviewComponent;

package/dist/esm/index.d.ts

@@ -6,6 +6,7 @@ export * from './groupview/groupview';
 export * from './gridview/baseComponentGridview';
 export * from './groupview/panel/content';
 export * from './groupview/tab';
+export * from './groupview/dnd';
 export * from './groupview/types';
 export * from './dockview/options';
 export * from './dockview/dockviewComponent';

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export * from './groupview/groupview';
 export * from './gridview/baseComponentGridview';
 export * from './groupview/panel/content';
 export * from './groupview/tab';
+export * from './groupview/dnd';
 export * from './groupview/types';
 export * from './dockview/options';
 export * from './dockview/dockviewComponent';

package/dist/esm/paneview/defaultPaneviewHeader.js

@@ -1,5 +1,6 @@
 import { addDisposableListener } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
+import { toggleClass } from '../dom';
 export class DefaultHeader extends CompositeDisposable {
     constructor() {
         super();
@@ -9,9 +10,9 @@ export class DefaultHeader extends CompositeDisposable {
         this.element.className = 'default-header';
         this._content = document.createElement('span');
         this._expander = document.createElement('a');
-        this.element.appendChild(this._content);
         this.element.appendChild(this._expander);
-        this.addDisposables(addDisposableListener(this._expander, 'click', () => {
+        this.element.appendChild(this._content);
+        this.addDisposables(addDisposableListener(this._element, 'click', () => {
             var _a;
             (_a = this.apiRef.api) === null || _a === void 0 ? void 0 : _a.setExpanded(!this.apiRef.api.isExpanded);
         }));
@@ -22,9 +23,10 @@ export class DefaultHeader extends CompositeDisposable {
     init(params) {
         this.apiRef.api = params.api;
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '<' : '>';
+        this._expander.textContent = '▼';
+        toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
         this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '<' : '>';
+            toggleClass(this._expander, 'collapsed', !e.isExpanded);
         });
     }
     update(_params) {

package/dist/esm/paneview/paneviewComponent.d.ts

@@ -75,6 +75,7 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    clear(): void;
 }
 export declare class PaneviewComponent extends CompositeDisposable implements IPaneviewComponent {
     private element;
@@ -110,6 +111,7 @@ export declare class PaneviewComponent extends CompositeDisposable implements IP
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
     fromJSON(serializedPaneview: SerializedPaneview): void;
+    clear(): void;
     private doAddPanel;
     private doRemovePanel;
     dispose(): void;

package/dist/esm/paneview/paneviewComponent.js

@@ -170,13 +170,9 @@ export class PaneviewComponent extends CompositeDisposable {
         };
     }
     fromJSON(serializedPaneview) {
+        this.clear();
         const { views, size } = serializedPaneview;
         const queue = [];
-        for (const [_, value] of this._viewDisposables.entries()) {
-            value.dispose();
-        }
-        this._viewDisposables.clear();
-        this.paneview.dispose();
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
             descriptor: {
@@ -235,6 +231,13 @@ export class PaneviewComponent extends CompositeDisposable {
         queue.forEach((f) => f());
         this._onDidLayoutfromJSON.fire();
     }
+    clear() {
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+        this.paneview.dispose();
+    }
     doAddPanel(panel) {
         const disposable = panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { DockviewDropEvent } from '../../dockview/dockviewComponent';
-import { TabContextMenuEvent } from '../../dockview/options';
+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 { DockviewDropTargets } from '../../groupview/dnd';
 export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> extends PanelParameters<T> {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
@@ -25,7 +24,7 @@ export interface IDockviewReactProps {
     tabHeight?: number;
     onTabContextMenu?: (event: TabContextMenuEvent) => void;
     onDidDrop?: (event: DockviewDropEvent) => void;
-    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     hideBorders?: boolean;
     className?: string;
     disableAutoResizing?: boolean;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IContentRenderer, GroupPanelContentPartInitParameters } from '../../groupview/types';
+import { IContentRenderer, GroupPanelContentPartInitParameters, ITabRenderer } from '../../groupview/types';
 import { ReactPortalStore } from '../react';
 import { IDockviewPanelProps } from '../dockview/dockview';
 import { PanelUpdateEvent } from '../../panel/types';
@@ -7,7 +7,6 @@ import { DockviewPanelApi } from '../../api/groupPanelApi';
 import { DockviewApi } from '../../api/component.api';
 import { GroupPanel } from '../../groupview/groupviewPanel';
 import { Event } from '../../events';
-import { WrappedTab } from '../../dockview/components/tab/defaultTab';
 export interface IGroupPanelActionbarProps {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
@@ -16,7 +15,7 @@ export interface ReactContentPartContext {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
     actionsPortalElement: HTMLElement;
-    tabPortalElement: WrappedTab;
+    tabPortalElement: ITabRenderer;
 }
 export declare class ReactPanelContentPart implements IContentRenderer {
     readonly id: string;
@@ -42,6 +41,5 @@ export declare class ReactPanelContentPart implements IContentRenderer {
     update(event: PanelUpdateEvent): void;
     updateParentGroup(group: GroupPanel, _isPanelVisible: boolean): void;
     layout(_width: number, _height: number): void;
-    close(): Promise<boolean>;
     dispose(): void;
 }

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

@@ -51,9 +51,6 @@ export class ReactPanelContentPart {
     layout(_width, _height) {
         // noop
     }
-    close() {
-        return Promise.resolve(true);
-    }
     dispose() {
         var _a, _b;
         this._onDidFocus.dispose();

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

@@ -25,6 +25,5 @@ export declare class ReactContentRenderer implements IContentRenderer {
     update(params: PanelUpdateEvent): void;
     updateParentGroup(group: GroupPanel, _isPanelVisible: boolean): void;
     layout(_width: number, _height: number): void;
-    close(): Promise<boolean>;
     dispose(): void;
 }

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

@@ -62,9 +62,6 @@ export class ReactContentRenderer {
     layout(_width, _height) {
         this._hostedContainer.layout(this.element);
     }
-    close() {
-        return Promise.resolve(true);
-    }
     dispose() {
         var _a;
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();

package/dist/esm/react/gridview/view.js

@@ -1,3 +1,4 @@
+import { GridviewApi } from '../../api/component.api';
 import { GridviewPanel, } from '../../gridview/gridviewPanel';
 import { ReactPart } from '../react';
 export class ReactGridPanelView extends GridviewPanel {
@@ -11,8 +12,7 @@ export class ReactGridPanelView extends GridviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this._params
-                .containerApi,
+            containerApi: new GridviewApi(this._params.accessor),
         });
     }
 }

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

@@ -1,5 +1,4 @@
 export * from './dockview/dockview';
-export * from './dockview/components';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
 export * from './dockview/reactContentPart';

package/dist/esm/react/index.js

@@ -1,5 +1,4 @@
 export * from './dockview/dockview';
-export * from './dockview/components';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
 export * from './dockview/reactContentPart';

package/dist/esm/react/splitview/view.js

@@ -1,3 +1,4 @@
+import { SplitviewApi } from '../../api/component.api';
 import { SplitviewPanel } from '../../splitview/splitviewPanel';
 import { ReactPart } from '../react';
 export class ReactPanelView extends SplitviewPanel {
@@ -11,8 +12,7 @@ export class ReactPanelView extends SplitviewPanel {
         return new ReactPart(this.element, this.reactPortalStore, this.reactComponent, {
             params: ((_a = this._params) === null || _a === void 0 ? void 0 : _a.params) || {},
             api: this.api,
-            containerApi: this._params
-                .containerApi,
+            containerApi: new SplitviewApi(this._params.accessor),
         });
     }
 }

package/dist/esm/splitview/core/options.d.ts

@@ -2,13 +2,13 @@ import { IPanel, PanelInitParameters } from '../../panel/types';
 import { IView, SplitViewOptions, LayoutPriority } from './splitview';
 import { FrameworkFactory } from '../../types';
 import { SplitviewPanel } from '../splitviewPanel';
-import { SplitviewApi } from '../../api/component.api';
+import { SplitviewComponent } from '../splitviewComponent';
 export interface PanelViewInitParameters extends PanelInitParameters {
     minimumSize?: number;
     maximumSize?: number;
     snap?: boolean;
     priority?: LayoutPriority;
-    containerApi: SplitviewApi;
+    accessor: SplitviewComponent;
 }
 export interface ISerializableView extends IView, IPanel {
     init: (params: PanelViewInitParameters) => void;

package/dist/esm/splitview/splitviewComponent.d.ts

@@ -50,10 +50,10 @@ export interface ISplitviewComponent extends IDisposable {
     fromJSON(serializedSplitview: SerializedSplitview): void;
     focus(): void;
     getPanel(id: string): ISplitviewPanel | undefined;
-    setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
+    clear(): void;
 }
 /**
  * A high-level implementation of splitview that works using 'panels'
@@ -96,5 +96,6 @@ export declare class SplitviewComponent extends CompositeDisposable implements I
     private doAddView;
     toJSON(): SerializedSplitview;
     fromJSON(serializedSplitview: SerializedSplitview): void;
+    clear(): void;
     dispose(): void;
 }