dockview-core 2.1.3 → 3.0.0

package/dist/esm/api/component.api.d.ts

@@ -12,11 +12,11 @@ import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { DockviewGroupPanel, IDockviewGroupPanel } from '../dockview/dockviewGroupPanel';
 import { Event } from '../events';
 import { IDockviewPanel } from '../dockview/dockviewPanel';
-import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
+import { PaneviewDidDropEvent } from '../paneview/draggablePaneviewPanel';
 import { GroupDragEvent, TabDragEvent } from '../dockview/components/titlebar/tabsContainer';
 import { Box } from '../types';
 import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from '../dockview/dockviewGroupPanelModel';
-import { PaneviewComponentOptions } from '../paneview/options';
+import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from '../paneview/options';
 import { SplitviewComponentOptions } from '../splitview/options';
 import { GridviewComponentOptions } from '../gridview/options';
 export interface CommonApi<T = any> {
@@ -164,7 +164,8 @@ export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
     /**
      * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
      */
-    get onDidDrop(): Event<PaneviewDropEvent>;
+    get onDidDrop(): Event<PaneviewDidDropEvent>;
+    get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent>;
     constructor(component: IPaneviewComponent);
     /**
      * Remove a panel given the panel object.

package/dist/esm/api/component.api.js

@@ -1,4 +1,3 @@
-import { Emitter } from '../events';
 export class SplitviewApi {
     /**
      * The minimum size  the component can reach where size is measured in the direction of orientation provided.
@@ -195,15 +194,10 @@ export class PaneviewApi {
      * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
      */
     get onDidDrop() {
-        const emitter = new Emitter();
-        const disposable = this.component.onDidDrop((e) => {
-            emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
-        });
-        emitter.dispose = () => {
-            disposable.dispose();
-            emitter.dispose();
-        };
-        return emitter.event;
+        return this.component.onDidDrop;
+    }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
     }
     constructor(component) {
         this.component = component;

package/dist/esm/dockview/components/titlebar/tabsContainer.d.ts

@@ -76,10 +76,11 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     indexOf(id: string): number;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(_isGroupActive: boolean): void;
-    private addTab;
     delete(id: string): void;
     setActivePanel(panel: IDockviewPanel): void;
     openPanel(panel: IDockviewPanel, index?: number): void;
     closePanel(panel: IDockviewPanel): void;
     dispose(): void;
+    private addTab;
+    private updateClassnames;
 }

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -108,15 +108,7 @@ export class TabsContainer extends CompositeDisposable {
         this._element.appendChild(this.leftActionsContainer);
         this._element.appendChild(this.voidContainer.element);
         this._element.appendChild(this.rightActionsContainer);
-        this.addDisposables(this.accessor.onDidAddPanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }), this.accessor.onDidRemovePanel((e) => {
-            if (e.api.group === this.group) {
-                toggleClass(this._element, 'dv-single-tab', this.size === 1);
-            }
-        }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+        this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
             this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: this.group,
@@ -161,20 +153,6 @@ export class TabsContainer extends CompositeDisposable {
     setActive(_isGroupActive) {
         // noop
     }
-    addTab(tab, index = this.tabs.length) {
-        if (index < 0 || index > this.tabs.length) {
-            throw new Error('invalid location');
-        }
-        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-        this.tabs = [
-            ...this.tabs.slice(0, index),
-            tab,
-            ...this.tabs.slice(index),
-        ];
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
-        }
-    }
     delete(id) {
         const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -182,6 +160,7 @@ export class TabsContainer extends CompositeDisposable {
         disposable.dispose();
         value.dispose();
         value.element.remove();
+        this.updateClassnames();
     }
     setActivePanel(panel) {
         this.tabs.forEach((tab) => {
@@ -250,4 +229,22 @@ export class TabsContainer extends CompositeDisposable {
         }
         this.tabs = [];
     }
+    addTab(tab, index = this.tabs.length) {
+        if (index < 0 || index > this.tabs.length) {
+            throw new Error('invalid location');
+        }
+        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
+        this.tabs = [
+            ...this.tabs.slice(0, index),
+            tab,
+            ...this.tabs.slice(index),
+        ];
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
+        }
+        this.updateClassnames();
+    }
+    updateClassnames() {
+        toggleClass(this._element, 'dv-single-tab', this.size === 1);
+    }
 }

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

@@ -208,7 +208,6 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get gap(): number;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     constructor(parentElement: HTMLElement, options: DockviewComponentOptions);
-    dispose(): void;
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: DockviewPopoutGroupOptions): Promise<boolean>;
     addFloatingGroup(item: DockviewPanel | DockviewGroupPanel, options?: FloatingGroupOptionsInternal): void;

package/dist/esm/dockview/dockviewComponent.js

@@ -245,10 +245,6 @@ export class DockviewComponent extends BaseGrid {
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
-    dispose() {
-        this.clear(); // explicitly clear the layout before cleaning up
-        super.dispose();
-    }
     setVisible(panel, visible) {
         switch (panel.api.location.type) {
             case 'grid':
@@ -432,30 +428,29 @@ export class DockviewComponent extends BaseGrid {
                     }
                 }
                 else if (this.getPanel(group.id)) {
-                    const removedGroup = group;
+                    group.model.renderContainer =
+                        this.overlayRenderContainer;
+                    returnedGroup = group;
                     if (floatingBox) {
-                        this.addFloatingGroup(removedGroup, {
+                        this.addFloatingGroup(group, {
                             height: floatingBox.height,
                             width: floatingBox.width,
                             position: floatingBox,
                         });
                     }
                     else {
-                        this.doRemoveGroup(removedGroup, {
+                        this.doRemoveGroup(group, {
                             skipDispose: true,
                             skipActive: true,
                             skipPopoutReturn: true,
                         });
-                        removedGroup.model.renderContainer =
-                            this.overlayRenderContainer;
-                        removedGroup.model.location = { type: 'grid' };
-                        returnedGroup = removedGroup;
+                        group.model.location = { type: 'grid' };
                         this.movingLock(() => {
                             // suppress group add events since the group already exists
-                            this.doAddGroup(removedGroup, [0]);
+                            this.doAddGroup(group, [0]);
                         });
                     }
-                    this.doSetGroupAndPanelActive(removedGroup);
+                    this.doSetGroupAndPanelActive(group);
                 }
             }));
             this._popoutGroups.push(value);

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

@@ -13,6 +13,7 @@ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { IGroupHeaderProps } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
@@ -55,27 +56,22 @@ export interface DockviewOptions {
      */
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
 }
-export interface DockviewDndOverlayEvent {
+export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
     target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;
-    isAccepted: boolean;
-    accept(): void;
 }
-export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
+export declare class DockviewUnhandledDragOverEvent extends AcceptableEvent implements DockviewDndOverlayEvent {
     readonly nativeEvent: DragEvent;
     readonly target: DockviewGroupDropLocation;
     readonly position: Position;
     readonly getData: () => PanelTransfer | undefined;
     readonly group?: DockviewGroupPanel | undefined;
-    private _isAccepted;
-    get isAccepted(): boolean;
     constructor(nativeEvent: DragEvent, target: DockviewGroupDropLocation, position: Position, getData: () => PanelTransfer | undefined, group?: DockviewGroupPanel | undefined);
-    accept(): void;
 }
-export declare const PROPERTY_KEYS: (keyof DockviewOptions)[];
+export declare const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[];
 export interface CreateComponentOptions {
     /**
      * The unqiue identifer of the component

package/dist/esm/dockview/options.js

@@ -1,20 +1,15 @@
-export class DockviewUnhandledDragOverEvent {
-    get isAccepted() {
-        return this._isAccepted;
-    }
+import { AcceptableEvent } from '../events';
+export class DockviewUnhandledDragOverEvent extends AcceptableEvent {
     constructor(nativeEvent, target, position, getData, group) {
+        super();
         this.nativeEvent = nativeEvent;
         this.target = target;
         this.position = position;
         this.getData = getData;
         this.group = group;
-        this._isAccepted = false;
-    }
-    accept() {
-        this._isAccepted = true;
     }
 }
-export const PROPERTY_KEYS = (() => {
+export const PROPERTY_KEYS_DOCKVIEW = (() => {
     /**
      * by readong the keys from an empty value object TypeScript will error
      * when we add or remove new properties to `DockviewOptions`

package/dist/esm/events.d.ts

@@ -17,6 +17,15 @@ export declare class DockviewEvent implements IDockviewEvent {
     get defaultPrevented(): boolean;
     preventDefault(): void;
 }
+export interface IAcceptableEvent {
+    readonly isAccepted: boolean;
+    accept(): void;
+}
+export declare class AcceptableEvent implements IAcceptableEvent {
+    private _isAccepted;
+    get isAccepted(): boolean;
+    accept(): void;
+}
 declare class LeakageMonitor {
     readonly events: Map<Event<any>, Stacktrace>;
     get size(): number;

package/dist/esm/events.js

@@ -24,6 +24,17 @@ export class DockviewEvent {
         this._defaultPrevented = true;
     }
 }
+export class AcceptableEvent {
+    constructor() {
+        this._isAccepted = false;
+    }
+    get isAccepted() {
+        return this._isAccepted;
+    }
+    accept() {
+        this._isAccepted = true;
+    }
+}
 class LeakageMonitor {
     constructor() {
         this.events = new Map();

package/dist/esm/gridview/gridviewComponent.js

@@ -2,7 +2,6 @@ import { getRelativeLocation, getGridLocation, } from './gridview';
 import { tail, sequenceEquals } from '../array';
 import { CompositeDisposable } from '../lifecycle';
 import { BaseGrid, toTarget, } from './baseComponentGridview';
-import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
 export class GridviewComponent extends BaseGrid {
     get orientation() {
@@ -21,10 +20,13 @@ export class GridviewComponent extends BaseGrid {
         this._deserializer = value;
     }
     constructor(parentElement, options) {
+        var _a;
         super(parentElement, {
-            proportionalLayout: options.proportionalLayout,
+            proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
             orientation: options.orientation,
-            styles: options.styles,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             disableAutoResizing: options.disableAutoResizing,
             className: options.className,
         });
@@ -44,12 +46,6 @@ export class GridviewComponent extends BaseGrid {
         }), this.onDidActiveChange((event) => {
             this._onDidActiveGroupChange.fire(event);
         }));
-        if (!this.options.components) {
-            this.options.components = {};
-        }
-        if (!this.options.frameworkComponents) {
-            this.options.frameworkComponents = {};
-        }
     }
     updateOptions(options) {
         super.updateOptions(options);
@@ -99,14 +95,11 @@ export class GridviewComponent extends BaseGrid {
             const height = this.height;
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
-                    var _a, _b;
                     const { data } = node;
-                    const view = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkComponentFactory
-                        ? {
-                            createComponent: this.options.frameworkComponentFactory
-                                .createComponent,
-                        }
-                        : undefined);
+                    const view = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(() => view.init({
                         params: data.params,
                         minimumWidth: data.minimumWidth,
@@ -184,7 +177,7 @@ export class GridviewComponent extends BaseGrid {
         this.doAddGroup(removedPanel, relativeLocation, options.size);
     }
     addPanel(options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         let relativeLocation = (_a = options.location) !== null && _a !== void 0 ? _a : [0];
         if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
             const referenceGroup = (_c = this._groups.get(options.position.referencePanel)) === null || _c === void 0 ? void 0 : _c.value;
@@ -200,14 +193,12 @@ export class GridviewComponent extends BaseGrid {
                 relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
             }
         }
-        const view = createComponent(options.id, options.component, (_d = this.options.components) !== null && _d !== void 0 ? _d : {}, (_e = this.options.frameworkComponents) !== null && _e !== void 0 ? _e : {}, this.options.frameworkComponentFactory
-            ? {
-                createComponent: this.options.frameworkComponentFactory
-                    .createComponent,
-            }
-            : undefined);
+        const view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         view.init({
-            params: (_f = options.params) !== null && _f !== void 0 ? _f : {},
+            params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
             minimumWidth: options.minimumWidth,
             maximumWidth: options.maximumWidth,
             minimumHeight: options.minimumHeight,

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

@@ -1,17 +1,15 @@
 import { GridviewPanel } from './gridviewPanel';
-import { ISplitviewStyles, Orientation } from '../splitview/splitview';
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
-export interface GridviewComponentOptions {
+import { Orientation } from '../splitview/splitview';
+import { CreateComponentOptions } from '../dockview/options';
+export interface GridviewOptions {
     disableAutoResizing?: boolean;
-    proportionalLayout: boolean;
+    proportionalLayout?: boolean;
     orientation: Orientation;
-    components?: {
-        [componentName: string]: ComponentConstructor<GridviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
-    styles?: ISplitviewStyles;
     className?: string;
+    hideBorders?: boolean;
 }
+export interface GridviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => GridviewPanel;
+}
+export type GridviewComponentOptions = GridviewOptions & GridviewFrameworkOptions;
+export declare const PROPERTY_KEYS_GRIDVIEW: (keyof GridviewOptions)[];

package/dist/esm/gridview/options.js

@@ -1 +1,14 @@
-export {};
+export const PROPERTY_KEYS_GRIDVIEW = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        disableAutoResizing: undefined,
+        proportionalLayout: undefined,
+        orientation: undefined,
+        hideBorders: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();

package/dist/esm/index.d.ts

@@ -8,12 +8,12 @@ export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
 export { IDisposable as DockviewIDisposable, MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
 export * from './panel/types';
 export * from './splitview/splitview';
-export { SplitviewComponentOptions, PanelViewInitParameters, } from './splitview/options';
+export { SplitviewComponentOptions, PanelViewInitParameters, SplitviewOptions, SplitviewFrameworkOptions, PROPERTY_KEYS_SPLITVIEW, } from './splitview/options';
 export * from './paneview/paneview';
 export * from './gridview/gridview';
-export { GridviewComponentOptions } from './gridview/options';
+export { GridviewComponentOptions, GridviewOptions, GridviewFrameworkOptions, PROPERTY_KEYS_GRIDVIEW, } from './gridview/options';
 export * from './gridview/baseComponentGridview';
-export { DraggablePaneviewPanel, PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
+export { DraggablePaneviewPanel, PaneviewDidDropEvent as PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
 export * from './dockview/dockviewGroupPanelModel';
@@ -29,7 +29,7 @@ export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
-export { PaneviewComponentOptions } from './paneview/options';
+export { PaneviewComponentOptions, PaneviewOptions, PaneviewFrameworkOptions, PROPERTY_KEYS_PANEVIEW, PaneviewUnhandledDragOverEvent, PaneviewDndOverlayEvent, } from './paneview/options';
 export * from './gridview/gridviewPanel';
 export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';

package/dist/esm/index.js

@@ -8,8 +8,10 @@ export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
 export { MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
 export * from './panel/types';
 export * from './splitview/splitview';
+export { PROPERTY_KEYS_SPLITVIEW, } from './splitview/options';
 export * from './paneview/paneview';
 export * from './gridview/gridview';
+export { PROPERTY_KEYS_GRIDVIEW, } from './gridview/options';
 export * from './gridview/baseComponentGridview';
 export { DraggablePaneviewPanel, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
@@ -25,6 +27,7 @@ export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
+export { PROPERTY_KEYS_PANEVIEW, PaneviewUnhandledDragOverEvent, } from './paneview/options';
 export * from './gridview/gridviewPanel';
 export { SplitviewPanel } from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';

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

@@ -1,8 +1,8 @@
 import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
 import { CompositeDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
-import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
-export declare class DefaultHeader extends CompositeDisposable implements IPaneHeaderPart {
+import { IPanePart, PanePanelInitParameter } from './paneviewPanel';
+export declare class DefaultHeader extends CompositeDisposable implements IPanePart {
     private readonly _expandedIcon;
     private readonly _collapsedIcon;
     private readonly disposable;

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

@@ -1,10 +1,12 @@
 import { PaneviewApi } from '../api/component.api';
 import { PaneTransfer } from '../dnd/dataTransfer';
 import { DroptargetEvent } from '../dnd/droptarget';
+import { Event } from '../events';
 import { Orientation } from '../splitview/splitview';
+import { PaneviewDndOverlayEvent } from './options';
 import { IPaneviewComponent } from './paneviewComponent';
 import { IPaneviewPanel, PaneviewPanel } from './paneviewPanel';
-export interface PaneviewDropEvent extends DroptargetEvent {
+export interface PaneviewDidDropEvent extends DroptargetEvent {
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
     api: PaneviewApi;
@@ -14,7 +16,9 @@ export declare abstract class DraggablePaneviewPanel extends PaneviewPanel {
     private handler;
     private target;
     private readonly _onDidDrop;
-    readonly onDidDrop: import("../events").Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     constructor(accessor: IPaneviewComponent, id: string, component: string, headerComponent: string | undefined, orientation: Orientation, isExpanded: boolean, disableDnd: boolean);
     private initDragFeatures;
     private onDrop;

package/dist/esm/paneview/draggablePaneviewPanel.js

@@ -3,6 +3,7 @@ import { DragHandler } from '../dnd/abstractDragHandler';
 import { getPaneData, LocalSelectionTransfer, PaneTransfer, } from '../dnd/dataTransfer';
 import { Droptarget } from '../dnd/droptarget';
 import { Emitter } from '../events';
+import { PaneviewUnhandledDragOverEvent, } from './options';
 import { PaneviewPanel, } from './paneviewPanel';
 export class DraggablePaneviewPanel extends PaneviewPanel {
     constructor(accessor, id, component, headerComponent, orientation, isExpanded, disableDnd) {
@@ -10,6 +11,9 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         this.accessor = accessor;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
         if (!disableDnd) {
             this.initDragFeatures();
         }
@@ -36,7 +40,7 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: (event, position) => {
                 const data = getPaneData();
                 if (data) {
                     if (data.paneId !== this.id &&
@@ -44,14 +48,9 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
                         return true;
                     }
                 }
-                if (this.accessor.options.showDndOverlay) {
-                    return this.accessor.options.showDndOverlay({
-                        nativeEvent: event,
-                        getData: getPaneData,
-                        panel: this,
-                    });
-                }
-                return false;
+                const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+                this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
             },
         });
         this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {

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

@@ -1,25 +1,29 @@
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
-import { PaneviewDndOverlayEvent } from './paneviewComponent';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
-export interface PaneviewComponentOptions {
+import { PaneTransfer } from '../dnd/dataTransfer';
+import { Position } from '../dnd/droptarget';
+import { CreateComponentOptions } from '../dockview/options';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
+import { IPanePart, IPaneviewPanel } from './paneviewPanel';
+export interface PaneviewOptions {
     disableAutoResizing?: boolean;
-    components?: {
-        [componentName: string]: ComponentConstructor<PaneviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    headerComponents?: {
-        [componentName: string]: ComponentConstructor<PaneviewPanel>;
-    };
-    headerframeworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: {
-        header: FrameworkFactory<IPaneHeaderPart>;
-        body: FrameworkFactory<IPaneBodyPart>;
-    };
     disableDnd?: boolean;
-    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     className?: string;
 }
+export interface PaneviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => IPanePart;
+    createHeaderComponent?: (options: CreateComponentOptions) => IPanePart | undefined;
+}
+export type PaneviewComponentOptions = PaneviewOptions & PaneviewFrameworkOptions;
+export declare const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[];
+export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
+    nativeEvent: DragEvent;
+    position: Position;
+    panel: IPaneviewPanel;
+    getData: () => PaneTransfer | undefined;
+}
+export declare class PaneviewUnhandledDragOverEvent extends AcceptableEvent implements PaneviewDndOverlayEvent {
+    readonly nativeEvent: DragEvent;
+    readonly position: Position;
+    readonly getData: () => PaneTransfer | undefined;
+    readonly panel: IPaneviewPanel;
+    constructor(nativeEvent: DragEvent, position: Position, getData: () => PaneTransfer | undefined, panel: IPaneviewPanel);
+}

package/dist/esm/paneview/options.js

@@ -1 +1,22 @@
-export {};
+import { AcceptableEvent } from '../events';
+export const PROPERTY_KEYS_PANEVIEW = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties = {
+        disableAutoResizing: undefined,
+        disableDnd: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();
+export class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
+    constructor(nativeEvent, position, getData, panel) {
+        super();
+        this.nativeEvent = nativeEvent;
+        this.position = position;
+        this.getData = getData;
+        this.panel = panel;
+    }
+}