Merge branch 'master' of https://github.com/mathuo/dockview into 689-docs-demos-for-vanilla-js-support

packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts

@@ -11,12 +11,13 @@ export class DockviewPanelModelMock implements IDockviewPanelModel {
     constructor(
         readonly contentComponent: string,
         readonly content: IContentRenderer,
-        readonly tabComponent?: string,
+        readonly tabComponent: string,
-        readonly tab?: ITabRenderer
+        readonly tab: ITabRenderer
     ) {
         //
     }
 
+
     init(params: GroupPanelPartInitParameters): void {
         //
     }

packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts

@@ -1,4 +1,4 @@
-import { fromPartial } from "@total-typescript/shoehorn";
+import { fromPartial } from '@total-typescript/shoehorn';
 
 export function setupMockWindow() {
     const listeners: Record<string, (() => void)[]> = {};
@@ -16,6 +16,14 @@ export function setupMockWindow() {
                 listener();
             }
         },
+        removeEventListener: (type: string, listener: () => void) => {
+            if (listeners[type]) {
+                const index = listeners[type].indexOf(listener);
+                if (index > -1) {
+                    listeners[type].splice(index, 1);
+                }
+            }
+        },
         dispatchEvent: (event: Event) => {
             const items = listeners[event.type];
             if (!items) {
@@ -24,7 +32,9 @@ export function setupMockWindow() {
             items.forEach((item) => item());
         },
         document: document,
-        close: jest.fn(),
+        close: () => {
+            listeners['beforeunload']?.forEach((f) => f());
+        },
         get innerWidth() {
             return width++;
         },

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types';
 import { Orientation } from '../../splitview/splitview';
 import { CompositeDisposable } from '../../lifecycle';
 import { Emitter } from '../../events';
-import { IDockviewPanel } from '../../dockview/dockviewPanel';
+import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
 import { fireEvent, queryByTestId } from '@testing-library/dom';
 import { getPanelData } from '../../dnd/dataTransfer';
@@ -116,8 +116,6 @@ describe('dockviewComponent', () => {
                 }
             },
         });
-
-        window.open = jest.fn();
     });
 
     test('update className', () => {
@@ -4886,6 +4884,150 @@ describe('dockviewComponent', () => {
             ]);
         });
 
+        test('popout / floating layouts', async () => {
+            jest.useRealTimers();
+            const container = document.createElement('div');
+
+            window.open = () => setupMockWindow();
+
+            const dockview = new DockviewComponent(container, {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            });
+
+            dockview.layout(1000, 500);
+
+            let panel1 = dockview.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            let panel2 = dockview.addPanel({
+                id: 'panel_2',
+                component: 'default',
+            });
+
+            let panel3 = dockview.addPanel({
+                id: 'panel_3',
+                component: 'default',
+            });
+
+            let panel4 = dockview.addPanel({
+                id: 'panel_4',
+                component: 'default',
+            });
+
+            expect(panel1.api.location.type).toBe('grid');
+            expect(panel2.api.location.type).toBe('grid');
+            expect(panel3.api.location.type).toBe('grid');
+            expect(panel4.api.location.type).toBe('grid');
+
+            dockview.addFloatingGroup(panel2);
+            dockview.addFloatingGroup(panel3);
+
+            expect(panel1.api.location.type).toBe('grid');
+            expect(panel2.api.location.type).toBe('floating');
+            expect(panel3.api.location.type).toBe('floating');
+            expect(panel4.api.location.type).toBe('grid');
+
+            await dockview.addPopoutGroup(panel2);
+            await dockview.addPopoutGroup(panel4);
+
+            expect(panel1.api.location.type).toBe('grid');
+            expect(panel2.api.location.type).toBe('popout');
+            expect(panel3.api.location.type).toBe('floating');
+            expect(panel4.api.location.type).toBe('popout');
+
+            const state = dockview.toJSON();
+            dockview.fromJSON(state);
+
+            /**
+             * exhaust task queue since popout group completion is async but not awaited in `fromJSON(...)`
+             */
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            expect(dockview.panels.length).toBe(4);
+
+            panel1 = dockview.api.getPanel('panel_1') as DockviewPanel;
+            panel2 = dockview.api.getPanel('panel_2') as DockviewPanel;
+            panel3 = dockview.api.getPanel('panel_3') as DockviewPanel;
+            panel4 = dockview.api.getPanel('panel_4') as DockviewPanel;
+
+            expect(panel1.api.location.type).toBe('grid');
+            expect(panel2.api.location.type).toBe('popout');
+            expect(panel3.api.location.type).toBe('floating');
+            expect(panel4.api.location.type).toBe('popout');
+
+            dockview.clear();
+            expect(dockview.groups.length).toBe(0);
+            expect(dockview.panels.length).toBe(0);
+        });
+
+        test('close popout window object', async () => {
+            const container = document.createElement('div');
+
+            const mockWindow = setupMockWindow();
+            window.open = () => mockWindow;
+
+            const dockview = new DockviewComponent(container, {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            });
+
+            dockview.layout(1000, 500);
+
+            let panel1 = dockview.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            let panel2 = dockview.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: { referencePanel: panel1, direction: 'within' },
+            });
+
+            let panel3 = dockview.addPanel({
+                id: 'panel_3',
+                component: 'default',
+            });
+
+            dockview.addFloatingGroup(panel2);
+            await dockview.addPopoutGroup(panel2);
+
+            expect(panel1.group.api.location.type).toBe('grid');
+            expect(panel2.group.api.location.type).toBe('popout');
+            expect(panel3.group.api.location.type).toBe('grid');
+
+            mockWindow.close();
+
+            expect(panel1.group.api.location.type).toBe('grid');
+            expect(panel2.group.api.location.type).toBe('grid');
+            expect(panel3.group.api.location.type).toBe('grid');
+
+            dockview.clear();
+            expect(dockview.groups.length).toBe(0);
+            expect(dockview.panels.length).toBe(0);
+        });
+
         test('remove all panels from popout group', async () => {
             const container = document.createElement('div');
 
@@ -5378,6 +5520,101 @@ describe('dockviewComponent', () => {
     });
 
     describe('addPanel', () => {
+        test('that can add panel to index with referencePanel', () => {
+            const container = document.createElement('div');
+
+            const dockview = new DockviewComponent(container, {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            });
+            const api = new DockviewApi(dockview);
+
+            dockview.layout(1000, 1000);
+
+            const panel1 = api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            const panel2 = api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: {
+                    referencePanel: panel1,
+                },
+            });
+
+            const panel3 = api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                position: {
+                    referencePanel: panel1,
+                    index: 1,
+                },
+            });
+
+            expect(panel1.api.group.panels).toEqual([panel1, panel3, panel2]);
+        });
+
+        test('that can add panel to index with referenceGroup', () => {
+            const container = document.createElement('div');
+
+            const dockview = new DockviewComponent(container, {
+                createComponent(options) {
+                    switch (options.name) {
+                        case 'default':
+                            return new PanelContentPartTest(
+                                options.id,
+                                options.name
+                            );
+                        default:
+                            throw new Error(`unsupported`);
+                    }
+                },
+            });
+            const api = new DockviewApi(dockview);
+
+            dockview.layout(1000, 1000);
+
+            const panel1 = api.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            const panel2 = api.addPanel({
+                id: 'panel_2',
+                component: 'default',
+                position: {
+                    referencePanel: panel1,
+                    index: 1,
+                },
+            });
+
+            const panel3 = api.addPanel({
+                id: 'panel_3',
+                component: 'default',
+                position: {
+                    referenceGroup: panel1.api.group,
+                    index: 1,
+                },
+            });
+
+            expect(panel1.api.group.panels).toEqual([panel1, panel3, panel2]);
+
+            panel1.api.moveTo({ index: 1 });
+
+            expect(panel1.api.group.panels).toEqual([panel3, panel1, panel2]);
+        });
+
         test('that can add panel', () => {
             const container = document.createElement('div');
 

packages/dockview-core/src/__tests__/dockview/dockviewGroupPanel.spec.ts

@@ -0,0 +1,141 @@
+import { DockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
+import { GroupOptions } from '../../dockview/dockviewGroupPanelModel';
+import { DockviewPanel } from '../../dockview/dockviewPanel';
+import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelModel';
+import { IContentRenderer, ITabRenderer } from '../../dockview/types';
+import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
+
+describe('dockviewGroupPanel', () => {
+    test('default minimum/maximium width/height', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            onDidActivePanelChange: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            options: {},
+        });
+        const options = fromPartial<GroupOptions>({});
+        const cut = new DockviewGroupPanel(accessor, 'test_id', options);
+
+        expect(cut.minimumWidth).toBe(100);
+        expect(cut.minimumHeight).toBe(100);
+        expect(cut.maximumHeight).toBe(Number.MAX_SAFE_INTEGER);
+        expect(cut.maximumWidth).toBe(Number.MAX_SAFE_INTEGER);
+    });
+
+    test('group constraints', () => {
+        const accessor = fromPartial<DockviewComponent>({
+            onDidActivePanelChange: jest.fn(),
+            onDidAddPanel: jest.fn(),
+            onDidRemovePanel: jest.fn(),
+            doSetGroupActive: jest.fn(),
+            overlayRenderContainer: fromPartial<OverlayRenderContainer>({
+                attach: jest.fn(),
+                detatch: jest.fn(),
+            }),
+            options: {},
+        });
+        const options = fromPartial<GroupOptions>({});
+        const cut = new DockviewGroupPanel(accessor, 'test_id', options);
+
+        cut.api.setConstraints({
+            minimumHeight: 10,
+            maximumHeight: 100,
+            minimumWidth: 20,
+            maximumWidth: 200,
+        });
+
+        // initial constraints
+
+        expect(cut.minimumWidth).toBe(20);
+        expect(cut.minimumHeight).toBe(10);
+        expect(cut.maximumHeight).toBe(100);
+        expect(cut.maximumWidth).toBe(200);
+
+        const panelModel = new DockviewPanelModelMock(
+            'content_component',
+            fromPartial<IContentRenderer>({
+                element: document.createElement('div'),
+            }),
+            'tab_component',
+            fromPartial<ITabRenderer>({
+                element: document.createElement('div'),
+            })
+        );
+
+        const panel = new DockviewPanel(
+            'panel_id',
+            'component_id',
+            undefined,
+            accessor,
+            accessor.api,
+            cut,
+            panelModel,
+            {
+                renderer: 'onlyWhenVisible',
+                minimumWidth: 21,
+                minimumHeight: 11,
+                maximumHeight: 101,
+                maximumWidth: 201,
+            }
+        );
+
+        cut.model.openPanel(panel);
+
+        // active panel constraints
+
+        expect(cut.minimumWidth).toBe(21);
+        expect(cut.minimumHeight).toBe(11);
+        expect(cut.maximumHeight).toBe(101);
+        expect(cut.maximumWidth).toBe(201);
+
+        const panel2 = new DockviewPanel(
+            'panel_id',
+            'component_id',
+            undefined,
+            accessor,
+            accessor.api,
+            cut,
+            panelModel,
+            {
+                renderer: 'onlyWhenVisible',
+                minimumWidth: 22,
+                minimumHeight: 12,
+                maximumHeight: 102,
+                maximumWidth: 202,
+            }
+        );
+
+        cut.model.openPanel(panel2);
+
+        // active panel constraints
+
+        expect(cut.minimumWidth).toBe(22);
+        expect(cut.minimumHeight).toBe(12);
+        expect(cut.maximumHeight).toBe(102);
+        expect(cut.maximumWidth).toBe(202);
+
+        const panel3 = new DockviewPanel(
+            'panel_id',
+            'component_id',
+            undefined,
+            accessor,
+            accessor.api,
+            cut,
+            panelModel,
+            {
+                renderer: 'onlyWhenVisible',
+            }
+        );
+
+        cut.model.openPanel(panel3);
+
+        // active panel without specified constraints so falls back to group constraints
+
+        expect(cut.minimumWidth).toBe(20);
+        expect(cut.minimumHeight).toBe(10);
+        expect(cut.maximumHeight).toBe(100);
+        expect(cut.maximumWidth).toBe(200);
+    });
+});

packages/dockview-core/src/api/dockviewGroupPanelApi.ts

@@ -9,6 +9,15 @@ import { Emitter, Event } from '../events';
 import { MutableDisposable } from '../lifecycle';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
 
+export interface DockviewGroupMoveParams {
+    group?: DockviewGroupPanel;
+    position?: Position;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
+}
+
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
@@ -17,7 +26,7 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      * If you require the Window object
      */
     getWindow(): Window;
-    moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void;
+    moveTo(options: DockviewGroupMoveParams): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -28,7 +37,8 @@ export interface DockviewGroupPanelFloatingChangeEvent {
     readonly location: DockviewGroupLocation;
 }
 
-const NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized';
+const NOT_INITIALIZED_MESSAGE =
+    'dockview: DockviewGroupPanelApiImpl not initialized';
 
 export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private readonly _mutableDisposable = new MutableDisposable();
@@ -74,7 +84,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
             : window;
     }
 
-    moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void {
+    moveTo(options: DockviewGroupMoveParams): void {
         if (!this._group) {
             throw new Error(NOT_INITIALIZED_MESSAGE);
         }
@@ -93,6 +103,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
                 position: options.group
                     ? options.position ?? 'center'
                     : 'center',
+                index: options.index,
             },
         });
     }

packages/dockview-core/src/api/dockviewPanelApi.ts

@@ -4,9 +4,11 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { DockviewPanel } from '../dockview/dockviewPanel';
 import { DockviewComponent } from '../dockview/dockviewComponent';
-import { Position } from '../dnd/droptarget';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
+import {
+    DockviewGroupMoveParams,
+    DockviewGroupPanelFloatingChangeEvent,
+} from './dockviewGroupPanelApi';
 import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 
 export interface TitleEvent {
@@ -25,6 +27,8 @@ export interface GroupChangedEvent {
     // empty
 }
 
+export type DockviewPanelMoveParams = DockviewGroupMoveParams;
+
 export interface DockviewPanelApi
     extends Omit<
         GridviewPanelApi,
@@ -50,11 +54,7 @@ export interface DockviewPanelApi
     close(): void;
     setTitle(title: string): void;
     setRenderer(renderer: DockviewPanelRenderer): void;
-    moveTo(options: {
+    moveTo(options: DockviewPanelMoveParams): void;
-        group: DockviewGroupPanel;
-        position?: Position;
-        index?: number;
-    }): void;
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
@@ -160,16 +160,14 @@ export class DockviewPanelApiImpl
         return this.group.api.getWindow();
     }
 
-    moveTo(options: {
+    moveTo(options: DockviewPanelMoveParams): void {
-        group: DockviewGroupPanel;
-        position?: Position;
-        index?: number;
-    }): void {
         this.accessor.moveGroupOrPanel({
             from: { groupId: this._group.id, panelId: this.panel.id },
             to: {
-                group: options.group,
+                group: options.group ?? this._group,
-                position: options.position ?? 'center',
+                position: options.group
+                    ? options.position ?? 'center'
+                    : 'center',
                 index: options.index,
             },
         });

packages/dockview-core/src/dockview/components/panel/content.ts

@@ -154,6 +154,10 @@ export class ContentContainer
                     referenceContainer: this,
                 });
                 break;
+            default:
+                throw new Error(
+                    `dockview: invalid renderer type '${panel.api.renderer}'`
+                );
         }
 
         if (doRender) {

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -347,9 +347,6 @@ export class TabsContainer
             return;
         }
         const tab = new Tab(panel, this.accessor, this.group);
-        if (!panel.view?.tab) {
-            throw new Error('invalid header component');
-        }
         tab.setContent(panel.view.tab);
 
         const disposable = new CompositeDisposable(

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -541,7 +541,6 @@ export class DockviewComponent
     addPopoutGroup(
         itemToPopout: DockviewPanel | DockviewGroupPanel,
         options?: {
-            skipRemoveGroup?: boolean;
             position?: Box;
             popoutUrl?: string;
             onDidOpen?: (event: { id: string; window: Window }) => void;
@@ -627,8 +626,16 @@ export class DockviewComponent
 
                 const referenceLocation = itemToPopout.api.location.type;
 
-                const group =
+                /**
-                    options?.overridePopoutGroup ??
+                 * The group that is being added doesn't already exist within the DOM, the most likely occurance
+                 * of this case is when being called from the `fromJSON(...)` method
+                 */
+                const isGroupAddedToDom =
+                    referenceGroup.element.parentElement !== null;
+
+                const group = !isGroupAddedToDom
+                    ? referenceGroup
+                    : options?.overridePopoutGroup ??
                       this.createGroup({ id: groupId });
                 group.model.renderContainer = overlayRenderContainer;
                 group.layout(
@@ -636,10 +643,11 @@ export class DockviewComponent
                     _window.window!.innerHeight
                 );
 
-                if (!options?.overridePopoutGroup) {
+                if (!this._groups.has(group.api.id)) {
                     this._onDidAddGroup.fire(group);
                 }
 
+                if (!options?.overridePopoutGroup && isGroupAddedToDom) {
                     if (itemToPopout instanceof DockviewPanel) {
                         this.movingLock(() => {
                             const panel =
@@ -664,6 +672,7 @@ export class DockviewComponent
                                 break;
                         }
                     }
+                }
 
                 popoutContainer.classList.add('dv-dockview');
                 popoutContainer.style.overflow = 'hidden';
@@ -676,7 +685,10 @@ export class DockviewComponent
                     getWindow: () => _window.window!,
                 };
 
-                if (itemToPopout.api.location.type === 'grid') {
+                if (
+                    isGroupAddedToDom &&
+                    itemToPopout.api.location.type === 'grid'
+                ) {
                     itemToPopout.api.setVisible(false);
                 }
 
@@ -698,8 +710,12 @@ export class DockviewComponent
                 const value = {
                     window: _window,
                     popoutGroup: group,
-                    referenceGroup: this.getPanel(referenceGroup.id)
+                    referenceGroup: !isGroupAddedToDom
+                        ? undefined
+                        : referenceGroup
+                        ? this.getPanel(referenceGroup.id)
                             ? referenceGroup.id
+                            : undefined
                         : undefined,
                     disposable: {
                         dispose: () => {
@@ -727,7 +743,10 @@ export class DockviewComponent
                     ),
                     overlayRenderContainer,
                     Disposable.from(() => {
-                        if (this.getPanel(referenceGroup.id)) {
+                        if (
+                            isGroupAddedToDom &&
+                            this.getPanel(referenceGroup.id)
+                        ) {
                             this.movingLock(() =>
                                 moveGroupWithoutDestroying({
                                     from: group,
@@ -745,14 +764,21 @@ export class DockviewComponent
                                 });
                             }
                         } else if (this.getPanel(group.id)) {
-                            const removedGroup = this.doRemoveGroup(group, {
+                            this.doRemoveGroup(group, {
                                 skipDispose: true,
                                 skipActive: true,
+                                skipPopoutReturn: true,
                             });
+
+                            const removedGroup = group;
+
                             removedGroup.model.renderContainer =
                                 this.overlayRenderContainer;
                             removedGroup.model.location = { type: 'grid' };
                             returnedGroup = removedGroup;
+
+                            this.doAddGroup(removedGroup, [0]);
+                            this.doSetGroupAndPanelActive(removedGroup);
                         }
                     })
                 );
@@ -1279,7 +1305,6 @@ export class DockviewComponent
                         ? this.getPanel(gridReferenceGroup)
                         : undefined) ?? group,
                     {
-                        skipRemoveGroup: true,
                         position: position ?? undefined,
                         overridePopoutGroup: gridReferenceGroup
                             ? group
@@ -1299,6 +1324,10 @@ export class DockviewComponent
                 }
             }
         } catch (err) {
+            console.error(
+                'dockview: failed to deserialize layout. Reverting changes',
+                err
+            );
             /**
              * Takes all the successfully created groups and remove all of their panels.
              */
@@ -1387,12 +1416,15 @@ export class DockviewComponent
             height: options.initialHeight,
         };
 
+        let index: number | undefined;
+
         if (options.position) {
             if (isPanelOptionsWithPanel(options.position)) {
                 const referencePanel =
                     typeof options.position.referencePanel === 'string'
                         ? this.getGroupPanel(options.position.referencePanel)
                         : options.position.referencePanel;
+                index = options.position.index;
 
                 if (!referencePanel) {
                     throw new Error(
@@ -1407,6 +1439,7 @@ export class DockviewComponent
                         ? this._groups.get(options.position.referenceGroup)
                               ?.value
                         : options.position.referenceGroup;
+                index = options.position.index;
 
                 if (!referenceGroup) {
                     throw new Error(
@@ -1422,6 +1455,7 @@ export class DockviewComponent
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
 
                 if (!options.inactive) {
@@ -1468,6 +1502,7 @@ export class DockviewComponent
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
             } else if (
                 referenceGroup.api.location.type === 'floating' ||
@@ -1477,6 +1512,7 @@ export class DockviewComponent
                 referenceGroup.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
 
                 referenceGroup.api.setSize({
@@ -1505,6 +1541,7 @@ export class DockviewComponent
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
                     skipSetGroupActive: options.inactive,
+                    index,
                 });
 
                 if (!options.inactive) {
@@ -1532,6 +1569,7 @@ export class DockviewComponent
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
         } else {
             const group = this.createGroupAtLocation(
@@ -1544,6 +1582,7 @@ export class DockviewComponent
             group.model.openPanel(panel, {
                 skipSetActive: options.inactive,
                 skipSetGroupActive: options.inactive,
+                index,
             });
 
             if (!options.inactive) {

packages/dockview-core/src/dockview/dockviewGroupPanel.ts

@@ -34,32 +34,36 @@ export class DockviewGroupPanel
 {
     private readonly _model: DockviewGroupPanelModel;
 
-    get minimumWidth(): number {
+    override get minimumWidth(): number {
         const activePanelMinimumWidth = this.activePanel?.minimumWidth;
-        return typeof activePanelMinimumWidth === 'number'
+        if (typeof activePanelMinimumWidth === 'number') {
-            ? activePanelMinimumWidth
+            return activePanelMinimumWidth;
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+        }
+        return super.__minimumWidth();
     }
 
-    get minimumHeight(): number {
+    override get minimumHeight(): number {
         const activePanelMinimumHeight = this.activePanel?.minimumHeight;
-        return typeof activePanelMinimumHeight === 'number'
+        if (typeof activePanelMinimumHeight === 'number') {
-            ? activePanelMinimumHeight
+            return activePanelMinimumHeight;
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+        }
+        return super.__minimumHeight();
     }
 
-    get maximumWidth(): number {
+    override get maximumWidth(): number {
         const activePanelMaximumWidth = this.activePanel?.maximumWidth;
-        return typeof activePanelMaximumWidth === 'number'
+        if (typeof activePanelMaximumWidth === 'number') {
-            ? activePanelMaximumWidth
+            return activePanelMaximumWidth;
-            : Number.MAX_SAFE_INTEGER;
+        }
+        return super.__maximumWidth();
     }
 
-    get maximumHeight(): number {
+    override get maximumHeight(): number {
         const activePanelMaximumHeight = this.activePanel?.maximumHeight;
-        return typeof activePanelMaximumHeight === 'number'
+        if (typeof activePanelMaximumHeight === 'number') {
-            ? activePanelMaximumHeight
+            return activePanelMaximumHeight;
-            : Number.MAX_SAFE_INTEGER;
+        }
+        return super.__maximumHeight();
     }
 
     get panels(): IDockviewPanel[] {

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -264,6 +264,7 @@ export class DockviewGroupPanelModel
     private _location: DockviewGroupLocation = { type: 'grid' };
 
     private mostRecentlyUsed: IDockviewPanel[] = [];
+    private _overwriteRenderContainer: OverlayRenderContainer | null = null;
 
     private readonly _onDidChange = new Emitter<IViewSize | undefined>();
     readonly onDidChange: Event<IViewSize | undefined> =
@@ -326,7 +327,7 @@ export class DockviewGroupPanelModel
     private readonly _api: DockviewApi;
 
     get element(): HTMLElement {
-        throw new Error('not supported');
+        throw new Error('dockview: not supported');
     }
 
     get activePanel(): IDockviewPanel | undefined {
@@ -513,8 +514,6 @@ export class DockviewGroupPanelModel
         this.contentContainer.element.focus();
     }
 
-    private _overwriteRenderContainer: OverlayRenderContainer | null = null;
-
     set renderContainer(value: OverlayRenderContainer | null) {
         this.panels.forEach((panel) => {
             this.renderContainer.detatch(panel);

packages/dockview-core/src/dockview/dockviewPanelModel.ts

@@ -13,7 +13,7 @@ export interface IDockviewPanelModel extends IDisposable {
     readonly contentComponent: string;
     readonly tabComponent?: string;
     readonly content: IContentRenderer;
-    readonly tab?: ITabRenderer;
+    readonly tab: ITabRenderer;
     update(event: PanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;

packages/dockview-core/src/dockview/options.ts

@@ -159,11 +159,19 @@ export interface PanelOptions<P extends object = Parameters> {
 type RelativePanel = {
     direction?: Direction;
     referencePanel: string | IDockviewPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 
 type RelativeGroup = {
     direction?: Direction;
     referenceGroup: string | DockviewGroupPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 
 type AbsolutePosition = {

packages/dockview-core/src/dockview/types.ts

@@ -2,7 +2,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelInitParameters, IPanel } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
 import { Optional } from '../types';
-import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
+import { IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 
 export interface HeaderPartInitParameters {

packages/dockview-core/src/gridview/gridviewPanel.ts

@@ -74,6 +74,38 @@ export abstract class GridviewPanel<
     }
 
     get minimumWidth(): number {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__minimumWidth();
+    }
+
+    get minimumHeight(): number {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__minimumHeight();
+    }
+
+    get maximumHeight(): number {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__maximumHeight();
+    }
+
+    get maximumWidth(): number {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__maximumWidth();
+    }
+
+    protected __minimumWidth(): number {
         const width =
             typeof this._minimumWidth === 'function'
                 ? this._minimumWidth()
@@ -87,7 +119,21 @@ export abstract class GridviewPanel<
         return width;
     }
 
-    get minimumHeight(): number {
+    protected __maximumWidth(): number {
+        const width =
+            typeof this._maximumWidth === 'function'
+                ? this._maximumWidth()
+                : this._maximumWidth;
+
+        if (width !== this._evaluatedMaximumWidth) {
+            this._evaluatedMaximumWidth = width;
+            this.updateConstraints();
+        }
+
+        return width;
+    }
+
+    protected __minimumHeight(): number {
         const height =
             typeof this._minimumHeight === 'function'
                 ? this._minimumHeight()
@@ -101,7 +147,7 @@ export abstract class GridviewPanel<
         return height;
     }
 
-    get maximumHeight(): number {
+    protected __maximumHeight(): number {
         const height =
             typeof this._maximumHeight === 'function'
                 ? this._maximumHeight()
@@ -115,20 +161,6 @@ export abstract class GridviewPanel<
         return height;
     }
 
-    get maximumWidth(): number {
-        const width =
-            typeof this._maximumWidth === 'function'
-                ? this._maximumWidth()
-                : this._maximumWidth;
-
-        if (width !== this._evaluatedMaximumWidth) {
-            this._evaluatedMaximumWidth = width;
-            this.updateConstraints();
-        }
-
-        return width;
-    }
-
     get isActive(): boolean {
         return this.api.isActive;
     }

packages/dockview-core/src/index.ts

@@ -100,6 +100,7 @@ export {
     TitleEvent,
     RendererChangedEvent,
     DockviewPanelApi,
+    DockviewPanelMoveParams,
 } from './api/dockviewPanelApi';
 export {
     PanelSizeEvent,
@@ -110,6 +111,7 @@ export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
 export {
     DockviewGroupPanelApi,
     DockviewGroupPanelFloatingChangeEvent,
+    DockviewGroupMoveParams,
 } from './api/dockviewGroupPanelApi';
 export {
     CommonApi,

packages/dockview-core/src/popoutWindow.ts

@@ -59,7 +59,6 @@ export class PopoutWindow extends CompositeDisposable {
             });
 
             this._window.disposable.dispose();
-            this._window.value.close();
             this._window = null;
 
             this._onDidClose.fire();

packages/dockview-core/src/splitview/splitview.scss

@@ -134,7 +134,6 @@
         position: relative;
         height: 100%;
         width: 100%;
-        background-color: var(--dv-background-color);
 
         .dv-view {
             height: 100%;

packages/dockview-core/src/splitview/splitview.ts

@@ -101,7 +101,7 @@ export class Splitview {
     private readonly viewContainer: HTMLElement;
     private readonly sashContainer: HTMLElement;
     private readonly viewItems: ViewItem[] = [];
-    private sashes: ISashItem[] = [];
+    private readonly sashes: ISashItem[] = [];
     private _orientation: Orientation;
     private _size = 0;
     private _orthogonalSize = 0;

packages/dockview-core/src/theme.scss

@@ -1,5 +1,4 @@
 @mixin dockview-theme-core-mixin {
-    --dv-background-color: black;
     --dv-paneview-active-outline-color: dodgerblue;
     --dv-tabs-and-actions-container-font-size: 13px;
     --dv-tabs-and-actions-container-height: 35px;
@@ -306,21 +305,6 @@
                 position: absolute;
             }
 
-            &:hover {
-                &::after {
-                    content: '';
-                    height: 40px;
-                    width: 4px;
-                    border-radius: 2px;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    background-color: var(
-                        --dv-separator-handle-background-color
-                    );
-                    position: absolute;
-                }
-
             &:hover {
                 &::after {
                     background-color: var(
@@ -331,7 +315,6 @@
         }
     }
 }
-}
 
 .dockview-theme-replit {
     @include dockview-theme-core-mixin();
@@ -355,8 +338,6 @@
     --dv-separator-border: transparent;
     --dv-paneview-header-border-color: rgb(51, 51, 51);
 
-    --dv-background-color: #ebeced;
-
     /////
     --dv-separator-handle-background-color: #cfd1d3;
     --dv-separator-handle-hover-background-color: #babbbb;

packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx

@@ -103,7 +103,8 @@ export const GridActions = (props: {
         if (state) {
             try {
                 props.api?.fromJSON(JSON.parse(state));
-            } catch {
+            } catch (err) {
+                console.error('failed to load state', err);
                 localStorage.removeItem('dv-demo-state');
             }
         }
@@ -121,8 +122,12 @@ export const GridActions = (props: {
 
     const onReset = () => {
         if (props.api) {
+            try {
                 props.api.clear();
                 defaultConfig(props.api);
+            } catch (err) {
+                localStorage.removeItem('dv-demo-state');
+            }
         }
     };
 

packages/docs/src/generated/api.output.json

@@ -3052,7 +3052,7 @@
             },
             {
                 "name": "addPopoutGroup",
-                "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
+                "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
                 "kind": "method",
                 "signature": [
                     {
@@ -3267,11 +3267,11 @@
                             "typeArguments": [
                                 {
                                     "type": "intrinsic",
-                                    "value": "void"
+                                    "value": "boolean"
                                 }
                             ]
                         },
-                        "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
+                        "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
                         "kind": "callSignature"
                     }
                 ],
@@ -5155,7 +5155,7 @@
             },
             {
                 "name": "addPopoutGroup",
-                "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<void>",
+                "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<boolean>",
                 "kind": "method",
                 "signature": [
                     {
@@ -5387,11 +5387,11 @@
                             "typeArguments": [
                                 {
                                     "type": "intrinsic",
-                                    "value": "void"
+                                    "value": "boolean"
                                 }
                             ]
                         },
-                        "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<void>",
+                        "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<boolean>",
                         "kind": "callSignature"
                     }
                 ]
@@ -14931,192 +14931,6 @@
             "BasePanelView"
         ]
     },
-    "LocalSelectionTransfer": {
-        "kind": "class",
-        "name": "LocalSelectionTransfer",
-        "children": [
-            {
-                "name": "clearData",
-                "code": "(proto: LocalSelectionTransfer.T): void",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "clearData",
-                        "typeParameters": [],
-                        "parameters": [
-                            {
-                                "name": "proto",
-                                "code": "proto: LocalSelectionTransfer.T",
-                                "type": {
-                                    "type": "reference",
-                                    "value": "T",
-                                    "source": "dockview-core",
-                                    "refersToTypeParameter": true
-                                },
-                                "kind": "parameter"
-                            }
-                        ],
-                        "returnType": {
-                            "type": "intrinsic",
-                            "value": "void"
-                        },
-                        "code": "(proto: LocalSelectionTransfer.T): void",
-                        "kind": "callSignature"
-                    }
-                ]
-            },
-            {
-                "name": "getData",
-                "code": "(proto: LocalSelectionTransfer.T): LocalSelectionTransfer.T[] | undefined",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "getData",
-                        "typeParameters": [],
-                        "parameters": [
-                            {
-                                "name": "proto",
-                                "code": "proto: LocalSelectionTransfer.T",
-                                "type": {
-                                    "type": "reference",
-                                    "value": "T",
-                                    "source": "dockview-core",
-                                    "refersToTypeParameter": true
-                                },
-                                "kind": "parameter"
-                            }
-                        ],
-                        "returnType": {
-                            "type": "or",
-                            "values": [
-                                {
-                                    "type": "array",
-                                    "value": {
-                                        "type": "reference",
-                                        "value": "T",
-                                        "source": "dockview-core",
-                                        "refersToTypeParameter": true
-                                    }
-                                },
-                                {
-                                    "type": "intrinsic",
-                                    "value": "undefined"
-                                }
-                            ]
-                        },
-                        "code": "(proto: LocalSelectionTransfer.T): LocalSelectionTransfer.T[] | undefined",
-                        "kind": "callSignature"
-                    }
-                ]
-            },
-            {
-                "name": "hasData",
-                "code": "(proto: LocalSelectionTransfer.T): boolean",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "hasData",
-                        "typeParameters": [],
-                        "parameters": [
-                            {
-                                "name": "proto",
-                                "code": "proto: LocalSelectionTransfer.T",
-                                "type": {
-                                    "type": "reference",
-                                    "value": "T",
-                                    "source": "dockview-core",
-                                    "refersToTypeParameter": true
-                                },
-                                "kind": "parameter"
-                            }
-                        ],
-                        "returnType": {
-                            "type": "intrinsic",
-                            "value": "boolean"
-                        },
-                        "code": "(proto: LocalSelectionTransfer.T): boolean",
-                        "kind": "callSignature"
-                    }
-                ]
-            },
-            {
-                "name": "setData",
-                "code": "(data: LocalSelectionTransfer.T[], proto: LocalSelectionTransfer.T): void",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "setData",
-                        "typeParameters": [],
-                        "parameters": [
-                            {
-                                "name": "data",
-                                "code": "data: LocalSelectionTransfer.T[]",
-                                "type": {
-                                    "type": "array",
-                                    "value": {
-                                        "type": "reference",
-                                        "value": "T",
-                                        "source": "dockview-core",
-                                        "refersToTypeParameter": true
-                                    }
-                                },
-                                "kind": "parameter"
-                            },
-                            {
-                                "name": "proto",
-                                "code": "proto: LocalSelectionTransfer.T",
-                                "type": {
-                                    "type": "reference",
-                                    "value": "T",
-                                    "source": "dockview-core",
-                                    "refersToTypeParameter": true
-                                },
-                                "kind": "parameter"
-                            }
-                        ],
-                        "returnType": {
-                            "type": "intrinsic",
-                            "value": "void"
-                        },
-                        "code": "(data: LocalSelectionTransfer.T[], proto: LocalSelectionTransfer.T): void",
-                        "kind": "callSignature"
-                    }
-                ]
-            },
-            {
-                "name": "getInstance",
-                "code": "<T>(): LocalSelectionTransfer<T>",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "getInstance",
-                        "typeParameters": [
-                            {
-                                "name": "T"
-                            }
-                        ],
-                        "parameters": [],
-                        "returnType": {
-                            "type": "reference",
-                            "value": "LocalSelectionTransfer",
-                            "source": "dockview-core",
-                            "typeArguments": [
-                                {
-                                    "type": "reference",
-                                    "value": "T",
-                                    "source": "dockview-core",
-                                    "refersToTypeParameter": true
-                                }
-                            ]
-                        },
-                        "code": "<T>(): LocalSelectionTransfer<T>",
-                        "kind": "callSignature"
-                    }
-                ]
-            }
-        ],
-        "extends": []
-    },
     "PaneFramework": {
         "kind": "class",
         "name": "PaneFramework",
@@ -24320,6 +24134,31 @@
         ],
         "extends": []
     },
+    "DockviewIDisposable": {
+        "kind": "interface",
+        "name": "DockviewIDisposable",
+        "children": [
+            {
+                "name": "dispose",
+                "code": "(): void",
+                "kind": "method",
+                "signature": [
+                    {
+                        "name": "dispose",
+                        "typeParameters": [],
+                        "parameters": [],
+                        "returnType": {
+                            "type": "intrinsic",
+                            "value": "void"
+                        },
+                        "code": "(): void",
+                        "kind": "callSignature"
+                    }
+                ]
+            }
+        ],
+        "extends": []
+    },
     "DockviewOptions": {
         "kind": "interface",
         "name": "DockviewOptions",
@@ -25671,70 +25510,6 @@
         ],
         "extends": []
     },
-    "FrameworkFactory": {
-        "kind": "interface",
-        "name": "FrameworkFactory",
-        "children": [
-            {
-                "name": "createComponent",
-                "code": "(id: string, componentId: string, component: any): FrameworkFactory.T",
-                "kind": "property",
-                "type": {
-                    "type": "reflection",
-                    "value": {
-                        "name": "__type",
-                        "code": "(id: string, componentId: string, component: any): FrameworkFactory.T",
-                        "kind": "typeLiteral",
-                        "signatures": [
-                            {
-                                "name": "__type",
-                                "typeParameters": [],
-                                "parameters": [
-                                    {
-                                        "name": "id",
-                                        "code": "id: string",
-                                        "type": {
-                                            "type": "intrinsic",
-                                            "value": "string"
-                                        },
-                                        "kind": "parameter"
-                                    },
-                                    {
-                                        "name": "componentId",
-                                        "code": "componentId: string",
-                                        "type": {
-                                            "type": "intrinsic",
-                                            "value": "string"
-                                        },
-                                        "kind": "parameter"
-                                    },
-                                    {
-                                        "name": "component",
-                                        "code": "component: any",
-                                        "type": {
-                                            "type": "intrinsic",
-                                            "value": "any"
-                                        },
-                                        "kind": "parameter"
-                                    }
-                                ],
-                                "returnType": {
-                                    "type": "reference",
-                                    "value": "T",
-                                    "source": "dockview-core",
-                                    "refersToTypeParameter": true
-                                },
-                                "code": "(id: string, componentId: string, component: any): FrameworkFactory.T",
-                                "kind": "callSignature"
-                            }
-                        ]
-                    }
-                },
-                "flags": {}
-            }
-        ],
-        "extends": []
-    },
     "GridBranchNode": {
         "kind": "interface",
         "name": "GridBranchNode",
@@ -29257,7 +29032,7 @@
             },
             {
                 "name": "addPopoutGroup",
-                "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
+                "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
                 "kind": "method",
                 "signature": [
                     {
@@ -29464,11 +29239,11 @@
                             "typeArguments": [
                                 {
                                     "type": "intrinsic",
-                                    "value": "void"
+                                    "value": "boolean"
                                 }
                             ]
                         },
-                        "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
+                        "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
                         "kind": "callSignature"
                     }
                 ]
@@ -30065,31 +29840,6 @@
             "IBaseGrid"
         ]
     },
-    "IDockviewDisposable": {
-        "kind": "interface",
-        "name": "IDockviewDisposable",
-        "children": [
-            {
-                "name": "dispose",
-                "code": "(): void",
-                "kind": "method",
-                "signature": [
-                    {
-                        "name": "dispose",
-                        "typeParameters": [],
-                        "parameters": [],
-                        "returnType": {
-                            "type": "intrinsic",
-                            "value": "void"
-                        },
-                        "code": "(): void",
-                        "kind": "callSignature"
-                    }
-                ]
-            }
-        ],
-        "extends": []
-    },
     "IDockviewGroupPanel": {
         "kind": "interface",
         "name": "IDockviewGroupPanel",
@@ -41546,27 +41296,6 @@
         },
         "kind": "typeAlias"
     },
-    "ComponentConstructor": {
-        "name": "ComponentConstructor",
-        "code": "",
-        "typeParameters": [],
-        "type": {
-            "type": "reflection",
-            "value": {
-                "name": "__type",
-                "code": "",
-                "kind": "typeLiteral",
-                "signatures": [
-                    {
-                        "name": "new ComponentConstructor",
-                        "code": "",
-                        "kind": "constructorSignature"
-                    }
-                ]
-            }
-        },
-        "kind": "typeAlias"
-    },
     "Direction": {
         "name": "Direction",
         "code": "'within' | 'below' | 'above' | 'right' | 'left'",
@@ -42111,119 +41840,6 @@
         "code": "",
         "kind": "variable"
     },
-    "createComponent": {
-        "name": "createComponent",
-        "code": "<T>(id: string, componentName?: string, components: , frameworkComponents: , createFrameworkComponent?: FrameworkFactory<T>, fallback?: (): T): T",
-        "signature": {
-            "name": "createComponent",
-            "typeParameters": [
-                {
-                    "name": "T"
-                }
-            ],
-            "parameters": [
-                {
-                    "name": "id",
-                    "code": "id: string",
-                    "type": {
-                        "type": "intrinsic",
-                        "value": "string"
-                    },
-                    "kind": "parameter"
-                },
-                {
-                    "name": "componentName",
-                    "code": "componentName?: string",
-                    "type": {
-                        "type": "intrinsic",
-                        "value": "string"
-                    },
-                    "kind": "parameter"
-                },
-                {
-                    "name": "components",
-                    "code": "components: ",
-                    "type": {
-                        "type": "reflection",
-                        "value": {
-                            "name": "__type",
-                            "code": "",
-                            "kind": "typeLiteral"
-                        }
-                    },
-                    "kind": "parameter"
-                },
-                {
-                    "name": "frameworkComponents",
-                    "code": "frameworkComponents: ",
-                    "type": {
-                        "type": "reflection",
-                        "value": {
-                            "name": "__type",
-                            "code": "",
-                            "kind": "typeLiteral"
-                        }
-                    },
-                    "kind": "parameter"
-                },
-                {
-                    "name": "createFrameworkComponent",
-                    "code": "createFrameworkComponent?: FrameworkFactory<T>",
-                    "type": {
-                        "type": "reference",
-                        "value": "FrameworkFactory",
-                        "source": "dockview-core",
-                        "typeArguments": [
-                            {
-                                "type": "reference",
-                                "value": "T",
-                                "source": "dockview-core",
-                                "refersToTypeParameter": true
-                            }
-                        ]
-                    },
-                    "kind": "parameter"
-                },
-                {
-                    "name": "fallback",
-                    "code": "fallback?: (): T",
-                    "type": {
-                        "type": "reflection",
-                        "value": {
-                            "name": "__type",
-                            "code": "(): T",
-                            "kind": "typeLiteral",
-                            "signatures": [
-                                {
-                                    "name": "__type",
-                                    "typeParameters": [],
-                                    "parameters": [],
-                                    "returnType": {
-                                        "type": "reference",
-                                        "value": "T",
-                                        "source": "dockview-core",
-                                        "refersToTypeParameter": true
-                                    },
-                                    "code": "(): T",
-                                    "kind": "callSignature"
-                                }
-                            ]
-                        }
-                    },
-                    "kind": "parameter"
-                }
-            ],
-            "returnType": {
-                "type": "reference",
-                "value": "T",
-                "source": "dockview-core",
-                "refersToTypeParameter": true
-            },
-            "code": "<T>(id: string, componentName?: string, components: , frameworkComponents: , createFrameworkComponent?: FrameworkFactory<T>, fallback?: (): T): T",
-            "kind": "callSignature"
-        },
-        "kind": "function"
-    },
     "createDockview": {
         "name": "createDockview",
         "code": "(element: HTMLElement, options: DockviewComponentOptions): DockviewApi",
@@ -43233,90 +42849,6 @@
                     "isOptional": true
                 }
             },
-            {
-                "name": "showDndOverlay",
-                "code": "(event: DockviewDndOverlayEvent): boolean",
-                "kind": "property",
-                "type": {
-                    "type": "reflection",
-                    "value": {
-                        "name": "__type",
-                        "code": "(event: DockviewDndOverlayEvent): boolean",
-                        "kind": "typeLiteral",
-                        "signatures": [
-                            {
-                                "name": "__type",
-                                "comment": {
-                                    "summary": [],
-                                    "blockTags": [
-                                        {
-                                            "tag": "@deprecated",
-                                            "content": [
-                                                {
-                                                    "kind": "text",
-                                                    "text": "use "
-                                                },
-                                                {
-                                                    "kind": "code",
-                                                    "text": "`api.onUnhandledDragOverEvent`"
-                                                },
-                                                {
-                                                    "kind": "text",
-                                                    "text": " instead. This will be removed in the next release."
-                                                }
-                                            ]
-                                        }
-                                    ]
-                                },
-                                "typeParameters": [],
-                                "parameters": [
-                                    {
-                                        "name": "event",
-                                        "code": "event: DockviewDndOverlayEvent",
-                                        "type": {
-                                            "type": "reference",
-                                            "value": "DockviewDndOverlayEvent",
-                                            "source": "dockview-core"
-                                        },
-                                        "kind": "parameter"
-                                    }
-                                ],
-                                "returnType": {
-                                    "type": "intrinsic",
-                                    "value": "boolean"
-                                },
-                                "code": "(event: DockviewDndOverlayEvent): boolean",
-                                "kind": "callSignature"
-                            }
-                        ]
-                    }
-                },
-                "flags": {
-                    "isOptional": true
-                },
-                "comment": {
-                    "summary": [],
-                    "blockTags": [
-                        {
-                            "tag": "@deprecated",
-                            "content": [
-                                {
-                                    "kind": "text",
-                                    "text": "use "
-                                },
-                                {
-                                    "kind": "code",
-                                    "text": "`api.onUnhandledDragOverEvent`"
-                                },
-                                {
-                                    "kind": "text",
-                                    "text": " instead. This will be removed in the next release."
-                                }
-                            ]
-                        }
-                    ]
-                }
-            },
             {
                 "name": "tabComponents",
                 "code": "Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>",