dockview-core - npm Package Compare versions

Comparing version 2.1.4 to 3.0.0

dist/cjs/api/component.api.d.ts

@@ -15,7 +15,7 @@ import { DockviewMaximizedGroupChanged, FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
 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';
@@ -168,3 +168,4 @@ import { GridviewComponentOptions } from '../gridview/options';
      */
-    get onDidDrop(): Event<PaneviewDropEvent>;
+    get onDidDrop(): Event<PaneviewDidDropEvent>;
+    get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent>;
     constructor(component: IPaneviewComponent);
@@ -171,0 +172,0 @@ /**

dist/cjs/api/component.api.js

 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = void 0;
-var events_1 = require("../events");
 var SplitviewApi = /** @class */ (function () {
@@ -298,12 +286,3 @@ function SplitviewApi(component) {
         get: function () {
-            var _this = this;
-            var emitter = new events_1.Emitter();
-            var disposable = this.component.onDidDrop(function (e) {
-                emitter.fire(__assign(__assign({}, e), { api: _this }));
-            });
-            emitter.dispose = function () {
-                disposable.dispose();
-                emitter.dispose();
-            };
-            return emitter.event;
+            return this.component.onDidDrop;
         },
@@ -313,2 +292,9 @@ enumerable: false,
     });
+    Object.defineProperty(PaneviewApi.prototype, "onUnhandledDragOverEvent", {
+        get: function () {
+            return this.component.onUnhandledDragOverEvent;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
@@ -315,0 +301,0 @@ * Remove a panel given the panel object.

dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -79,3 +79,2 @@ import { IDisposable, CompositeDisposable } from '../../../lifecycle';
     setActive(_isGroupActive: boolean): void;
-    private addTab;
     delete(id: string): void;
@@ -86,2 +85,4 @@ setActivePanel(panel: IDockviewPanel): void;
     dispose(): void;
+    private addTab;
+    private updateClassnames;
 }

dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -17,2 +17,13 @@ "use strict";
 })();
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
@@ -43,13 +54,2 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 };
-var __values = (this && this.__values) || function(o) {
-    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-    if (m) return m.call(o);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -98,11 +98,3 @@ exports.TabsContainer = void 0;
         _this._element.appendChild(_this.rightActionsContainer);
-        _this.addDisposables(_this.accessor.onDidAddPanel(function (e) {
-            if (e.api.group === _this.group) {
-                (0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1);
-            }
-        }), _this.accessor.onDidRemovePanel(function (e) {
-            if (e.api.group === _this.group) {
-                (0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1);
-            }
-        }), _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, _this._onGroupDragStart, _this.voidContainer, _this.voidContainer.onDragStart(function (event) {
+        _this.addDisposables(_this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, _this._onGroupDragStart, _this.voidContainer, _this.voidContainer.onDragStart(function (event) {
             _this._onGroupDragStart.fire({
@@ -239,15 +231,2 @@ nativeEvent: event,
     };
-    TabsContainer.prototype.addTab = function (tab, index) {
-        if (index === void 0) { 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 = __spreadArray(__spreadArray(__spreadArray([], __read(this.tabs.slice(0, index)), false), [
-            tab
-        ], false), __read(this.tabs.slice(index)), false);
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
-        }
-    };
     TabsContainer.prototype.delete = function (id) {
@@ -260,2 +239,3 @@ var index = this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
         value.element.remove();
+        this.updateClassnames();
     };
@@ -342,4 +322,21 @@ TabsContainer.prototype.setActivePanel = function (panel) {
     };
+    TabsContainer.prototype.addTab = function (tab, index) {
+        if (index === void 0) { 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 = __spreadArray(__spreadArray(__spreadArray([], __read(this.tabs.slice(0, index)), false), [
+            tab
+        ], false), __read(this.tabs.slice(index)), false);
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
+        }
+        this.updateClassnames();
+    };
+    TabsContainer.prototype.updateClassnames = function () {
+        (0, dom_1.toggleClass)(this._element, 'dv-single-tab', this.size === 1);
+    };
     return TabsContainer;
 }(lifecycle_1.CompositeDisposable));
 exports.TabsContainer = TabsContainer;

dist/cjs/dockview/options.d.ts

@@ -16,2 +16,3 @@ import { DockviewApi } from '../api/component.api';
 import { Contraints } from '../gridview/gridviewPanel';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
 export interface IHeaderActionsRenderer extends IDisposable {
@@ -59,3 +60,3 @@ readonly element: HTMLElement;
 }
-export interface DockviewDndOverlayEvent {
+export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
@@ -66,6 +67,4 @@ target: DockviewGroupDropLocation;
     getData: () => PanelTransfer | undefined;
-    isAccepted: boolean;
-    accept(): void;
 }
-export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
+export declare class DockviewUnhandledDragOverEvent extends AcceptableEvent implements DockviewDndOverlayEvent {
     readonly nativeEvent: DragEvent;
@@ -76,8 +75,5 @@ readonly target: DockviewGroupDropLocation;
     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 {
@@ -84,0 +80,0 @@ /**

dist/cjs/dockview/options.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isGroupOptionsWithGroup = exports.isGroupOptionsWithPanel = exports.isPanelOptionsWithGroup = exports.isPanelOptionsWithPanel = exports.PROPERTY_KEYS = exports.DockviewUnhandledDragOverEvent = void 0;
-var DockviewUnhandledDragOverEvent = /** @class */ (function () {
+exports.isGroupOptionsWithGroup = exports.isGroupOptionsWithPanel = exports.isPanelOptionsWithGroup = exports.isPanelOptionsWithPanel = exports.PROPERTY_KEYS_DOCKVIEW = exports.DockviewUnhandledDragOverEvent = void 0;
+var events_1 = require("../events");
+var DockviewUnhandledDragOverEvent = /** @class */ (function (_super) {
+    __extends(DockviewUnhandledDragOverEvent, _super);
     function DockviewUnhandledDragOverEvent(nativeEvent, target, position, getData, group) {
-        this.nativeEvent = nativeEvent;
-        this.target = target;
-        this.position = position;
-        this.getData = getData;
-        this.group = group;
-        this._isAccepted = false;
+        var _this = _super.call(this) || this;
+        _this.nativeEvent = nativeEvent;
+        _this.target = target;
+        _this.position = position;
+        _this.getData = getData;
+        _this.group = group;
+        return _this;
     }
-    Object.defineProperty(DockviewUnhandledDragOverEvent.prototype, "isAccepted", {
-        get: function () {
-            return this._isAccepted;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    DockviewUnhandledDragOverEvent.prototype.accept = function () {
-        this._isAccepted = true;
-    };
     return DockviewUnhandledDragOverEvent;
-}());
+}(events_1.AcceptableEvent));
 exports.DockviewUnhandledDragOverEvent = DockviewUnhandledDragOverEvent;
-exports.PROPERTY_KEYS = (function () {
+exports.PROPERTY_KEYS_DOCKVIEW = (function () {
     /**
@@ -28,0 +36,0 @@ * by readong the keys from an empty value object TypeScript will error

dist/cjs/events.d.ts

@@ -20,2 +20,11 @@ import { IDisposable } from './lifecycle';
 }
+export interface IAcceptableEvent {
+    readonly isAccepted: boolean;
+    accept(): void;
+}
+export declare class AcceptableEvent implements IAcceptableEvent {
+    private _isAccepted;
+    get isAccepted(): boolean;
+    accept(): void;
+}
 declare class LeakageMonitor {
@@ -22,0 +31,0 @@ readonly events: Map<Event<any>, Stacktrace>;

dist/cjs/events.js

@@ -14,3 +14,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsapEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.DockviewEvent = exports.Event = void 0;
+exports.AsapEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.AcceptableEvent = exports.DockviewEvent = exports.Event = void 0;
 var Event;
@@ -52,2 +52,19 @@ (function (Event) {
 exports.DockviewEvent = DockviewEvent;
+var AcceptableEvent = /** @class */ (function () {
+    function AcceptableEvent() {
+        this._isAccepted = false;
+    }
+    Object.defineProperty(AcceptableEvent.prototype, "isAccepted", {
+        get: function () {
+            return this._isAccepted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    AcceptableEvent.prototype.accept = function () {
+        this._isAccepted = true;
+    };
+    return AcceptableEvent;
+}());
+exports.AcceptableEvent = AcceptableEvent;
 var LeakageMonitor = /** @class */ (function () {
@@ -54,0 +71,0 @@ function LeakageMonitor() {

dist/cjs/gridview/gridviewComponent.js

@@ -61,3 +61,2 @@ "use strict";
 var baseComponentGridview_1 = require("./baseComponentGridview");
-var componentFactory_1 = require("../panel/componentFactory");
 var events_1 = require("../events");
@@ -67,6 +66,9 @@ var GridviewComponent = /** @class */ (function (_super) {
     function GridviewComponent(parentElement, options) {
+        var _a;
         var _this = _super.call(this, 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,
@@ -91,8 +93,2 @@ className: options.className,
         }));
-        if (!_this.options.components) {
-            _this.options.components = {};
-        }
-        if (!_this.options.frameworkComponents) {
-            _this.options.frameworkComponents = {};
-        }
         return _this;
@@ -177,10 +173,7 @@ }
                 fromJSON: function (node) {
-                    var _a, _b;
                     var data = node.data;
-                    var view = (0, componentFactory_1.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);
+                    var view = _this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue_1.push(function () {
@@ -286,3 +279,3 @@ return view.init({
     GridviewComponent.prototype.addPanel = function (options) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d;
         var relativeLocation = (_a = options.location) !== null && _a !== void 0 ? _a : [0];
@@ -303,10 +296,8 @@ if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
         }
-        var view = (0, componentFactory_1.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);
+        var 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,
@@ -313,0 +304,0 @@ maximumWidth: options.maximumWidth,

dist/cjs/gridview/options.d.ts

 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)[];

dist/cjs/gridview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PROPERTY_KEYS_GRIDVIEW = void 0;
+exports.PROPERTY_KEYS_GRIDVIEW = (function () {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    var properties = {
+        disableAutoResizing: undefined,
+        proportionalLayout: undefined,
+        orientation: undefined,
+        hideBorders: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();

dist/cjs/index.d.ts

@@ -11,8 +11,8 @@ export { getPaneData, getPanelData, PaneTransfer, PanelTransfer, } from './dnd/dataTransfer';
 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';
@@ -33,3 +33,3 @@ export * from './dockview/components/tab/tab';
 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';
@@ -36,0 +36,0 @@ export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel';

dist/cjs/index.js

@@ -17,3 +17,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSplitview = exports.createPaneview = exports.createGridview = exports.createDockview = exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = exports.directionToPosition = exports.positionToDirection = exports.SplitviewPanel = exports.DefaultDockviewDeserialzier = exports.DefaultTab = exports.DraggablePaneviewPanel = exports.DockviewDisposable = exports.DockviewCompositeDisposable = exports.DockviewMutableDisposable = exports.DockviewEvent = exports.DockviewEmitter = exports.PanelTransfer = exports.PaneTransfer = exports.getPanelData = exports.getPaneData = void 0;
+exports.createSplitview = exports.createPaneview = exports.createGridview = exports.createDockview = exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = exports.directionToPosition = exports.positionToDirection = exports.SplitviewPanel = exports.PaneviewUnhandledDragOverEvent = exports.PROPERTY_KEYS_PANEVIEW = exports.DefaultDockviewDeserialzier = exports.DefaultTab = exports.DraggablePaneviewPanel = exports.PROPERTY_KEYS_GRIDVIEW = exports.PROPERTY_KEYS_SPLITVIEW = exports.DockviewDisposable = exports.DockviewCompositeDisposable = exports.DockviewMutableDisposable = exports.DockviewEvent = exports.DockviewEmitter = exports.PanelTransfer = exports.PaneTransfer = exports.getPanelData = exports.getPaneData = void 0;
 var dataTransfer_1 = require("./dnd/dataTransfer");
@@ -38,4 +38,8 @@ Object.defineProperty(exports, "getPaneData", { enumerable: true, get: function () { return dataTransfer_1.getPaneData; } });
 __exportStar(require("./splitview/splitview"), exports);
+var options_1 = require("./splitview/options");
+Object.defineProperty(exports, "PROPERTY_KEYS_SPLITVIEW", { enumerable: true, get: function () { return options_1.PROPERTY_KEYS_SPLITVIEW; } });
 __exportStar(require("./paneview/paneview"), exports);
 __exportStar(require("./gridview/gridview"), exports);
+var options_2 = require("./gridview/options");
+Object.defineProperty(exports, "PROPERTY_KEYS_GRIDVIEW", { enumerable: true, get: function () { return options_2.PROPERTY_KEYS_GRIDVIEW; } });
 __exportStar(require("./gridview/baseComponentGridview"), exports);
@@ -59,2 +63,5 @@ var draggablePaneviewPanel_1 = require("./paneview/draggablePaneviewPanel");
 __exportStar(require("./paneview/paneviewComponent"), exports);
+var options_3 = require("./paneview/options");
+Object.defineProperty(exports, "PROPERTY_KEYS_PANEVIEW", { enumerable: true, get: function () { return options_3.PROPERTY_KEYS_PANEVIEW; } });
+Object.defineProperty(exports, "PaneviewUnhandledDragOverEvent", { enumerable: true, get: function () { return options_3.PaneviewUnhandledDragOverEvent; } });
 __exportStar(require("./gridview/gridviewPanel"), exports);
@@ -61,0 +68,0 @@ var splitviewPanel_1 = require("./splitview/splitviewPanel");

dist/cjs/paneview/defaultPaneviewHeader.d.ts

 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;
@@ -7,0 +7,0 @@ private readonly _collapsedIcon;

dist/cjs/paneview/draggablePaneviewPanel.d.ts

 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;
@@ -17,3 +19,5 @@ getData: () => PaneTransfer | undefined;
     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);
@@ -20,0 +24,0 @@ private initDragFeatures;

dist/cjs/paneview/draggablePaneviewPanel.js

@@ -35,2 +35,3 @@ "use strict";
 var events_1 = require("../events");
+var options_1 = require("./options");
 var paneviewPanel_1 = require("./paneviewPanel");
@@ -44,2 +45,5 @@ var DraggablePaneviewPanel = /** @class */ (function (_super) {
         _this.onDidDrop = _this._onDidDrop.event;
+        _this._onUnhandledDragOverEvent = new events_1.Emitter();
+        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this.addDisposables(_this._onDidDrop, _this._onUnhandledDragOverEvent);
         if (!disableDnd) {
@@ -78,3 +82,3 @@ _this.initDragFeatures();
             },
-            canDisplayOverlay: function (event) {
+            canDisplayOverlay: function (event, position) {
                 var data = (0, dataTransfer_1.getPaneData)();
@@ -87,10 +91,5 @@ if (data) {
                 }
-                if (_this.accessor.options.showDndOverlay) {
-                    return _this.accessor.options.showDndOverlay({
-                        nativeEvent: event,
-                        getData: dataTransfer_1.getPaneData,
-                        panel: _this,
-                    });
-                }
-                return false;
+                var firedEvent = new options_1.PaneviewUnhandledDragOverEvent(event, position, dataTransfer_1.getPaneData, _this);
+                _this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
             },
@@ -97,0 +96,0 @@ });

dist/cjs/paneview/options.d.ts

@@ -1,25 +0,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);
+}

dist/cjs/paneview/options.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaneviewUnhandledDragOverEvent = exports.PROPERTY_KEYS_PANEVIEW = void 0;
+var events_1 = require("../events");
+exports.PROPERTY_KEYS_PANEVIEW = (function () {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    var properties = {
+        disableAutoResizing: undefined,
+        disableDnd: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();
+var PaneviewUnhandledDragOverEvent = /** @class */ (function (_super) {
+    __extends(PaneviewUnhandledDragOverEvent, _super);
+    function PaneviewUnhandledDragOverEvent(nativeEvent, position, getData, panel) {
+        var _this = _super.call(this) || this;
+        _this.nativeEvent = nativeEvent;
+        _this.position = position;
+        _this.getData = getData;
+        _this.panel = panel;
+        return _this;
+    }
+    return PaneviewUnhandledDragOverEvent;
+}(events_1.AcceptableEvent));
+exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;

dist/cjs/paneview/paneviewComponent.d.ts

 import { Event } from '../events';
 import { IDisposable } from '../lifecycle';
 import { LayoutPriority, Orientation } from '../splitview/splitview';
-import { PaneviewComponentOptions } from './options';
+import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from './options';
 import { Paneview } from './paneview';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
-import { DraggablePaneviewPanel, PaneviewDropEvent } from './draggablePaneviewPanel';
-import { PaneTransfer } from '../dnd/dataTransfer';
+import { IPanePart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
+import { DraggablePaneviewPanel, PaneviewDidDropEvent } from './draggablePaneviewPanel';
 import { Resizable } from '../resizable';
 import { Parameters } from '../panel/types';
-export interface PaneviewDndOverlayEvent {
-    nativeEvent: DragEvent;
-    panel: IPaneviewPanel;
-    getData: () => PaneTransfer | undefined;
-}
 export interface SerializedPaneviewPanel {
@@ -43,4 +37,4 @@ snap?: boolean;
         headerComponent: string | undefined;
-        body: IPaneBodyPart;
-        header: IPaneHeaderPart;
+        body: IPanePart;
+        header: IPanePart;
         orientation: Orientation;
@@ -51,4 +45,4 @@ isExpanded: boolean;
     });
-    getBodyComponent(): IPaneBodyPart;
-    getHeaderComponent(): IPaneHeaderPart;
+    getBodyComponent(): IPanePart;
+    getHeaderComponent(): IPanePart;
 }
@@ -77,5 +71,6 @@ export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     readonly onDidRemoveView: Event<PaneviewPanel>;
-    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
@@ -104,3 +99,3 @@ layout(width: number, height: number): void;
     private readonly _onDidDrop;
-    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onDidAddView;
@@ -110,2 +105,4 @@ readonly onDidAddView: Event<PaneviewPanel>;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     private readonly _classNames;
@@ -112,0 +109,0 @@ get id(): string;

dist/cjs/paneview/paneviewComponent.js

@@ -58,3 +58,2 @@ "use strict";
 var component_api_1 = require("../api/component.api");
-var componentFactory_1 = require("../panel/componentFactory");
 var events_1 = require("../events");
@@ -104,12 +103,8 @@ var lifecycle_1 = require("../lifecycle");
         _this.onDidRemoveView = _this._onDidRemoveView.event;
-        _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView);
+        _this._onUnhandledDragOverEvent = new events_1.Emitter();
+        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
+        _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView, _this._onUnhandledDragOverEvent);
         _this._classNames = new dom_1.Classnames(_this.element);
         _this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         _this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         _this.paneview = new paneview_1.Paneview(_this.element, {
@@ -207,18 +202,15 @@ // only allow paneview in the vertical orientation for now
     PaneviewComponent.prototype.addPanel = function (options) {
-        var _a, _b, _c, _d;
-        var body = (0, componentFactory_1.createComponent)(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.body.createComponent,
-            }
-            : undefined);
+        var _a;
+        var body = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         var header;
-        if (options.headerComponent) {
-            header = (0, componentFactory_1.createComponent)(options.id, options.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, this.options.headerframeworkComponents, this.options.frameworkWrapper
-                ? {
-                    createComponent: this.options.frameworkWrapper.header
-                        .createComponent,
-                }
-                : undefined);
+        if (options.headerComponent && this.options.createHeaderComponent) {
+            header = this.options.createHeaderComponent({
+                id: options.id,
+                name: options.headerComponent,
+            });
         }
-        else {
+        if (!header) {
             header = new defaultPaneviewHeader_1.DefaultHeader();
@@ -241,3 +233,3 @@ }
         view.init({
-            params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumBodySize: options.minimumBodySize,
@@ -311,20 +303,16 @@ maximumBodySize: options.maximumBodySize,
                 views: views.map(function (view) {
-                    var _a, _b, _c, _d;
                     var data = view.data;
-                    var body = (0, componentFactory_1.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.frameworkWrapper
-                        ? {
-                            createComponent: _this.options.frameworkWrapper.body
-                                .createComponent,
-                        }
-                        : undefined);
+                    var body = _this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     var header;
-                    if (data.headerComponent) {
-                        header = (0, componentFactory_1.createComponent)(data.id, data.headerComponent, (_c = _this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, (_d = _this.options.headerframeworkComponents) !== null && _d !== void 0 ? _d : {}, _this.options.frameworkWrapper
-                            ? {
-                                createComponent: _this.options.frameworkWrapper.header
-                                    .createComponent,
-                            }
-                            : undefined);
+                    if (data.headerComponent &&
+                        _this.options.createHeaderComponent) {
+                        header = _this.options.createHeaderComponent({
+                            id: data.id,
+                            name: data.headerComponent,
+                        });
                     }
-                    else {
+                    if (!header) {
                         header = new defaultPaneviewHeader_1.DefaultHeader();
@@ -389,5 +377,7 @@ }
         var _this = this;
-        var disposable = panel.onDidDrop(function (event) {
+        var disposable = new lifecycle_1.CompositeDisposable(panel.onDidDrop(function (event) {
             _this._onDidDrop.fire(event);
-        });
+        }), panel.onUnhandledDragOverEvent(function (event) {
+            _this._onUnhandledDragOverEvent.fire(event);
+        }));
         this._viewDisposables.set(panel.id, disposable);
@@ -394,0 +384,0 @@ };

dist/cjs/paneview/paneviewPanel.d.ts

@@ -24,3 +24,3 @@ import { PaneviewApi } from '../api/component.api';
 }
-export interface IPaneBodyPart extends IDisposable {
+export interface IPanePart extends IDisposable {
     readonly element: HTMLElement;
@@ -30,7 +30,2 @@ update(params: PanelUpdateEvent): void;
 }
-export interface IPaneHeaderPart extends IDisposable {
-    readonly element: HTMLElement;
-    update(params: PanelUpdateEvent): void;
-    init(parameters: PanePanelComponentInitParameter): void;
-}
 export interface IPaneview extends IView {
@@ -94,4 +89,4 @@ onDidChangeExpansionState: Event<boolean>;
     getComponent(): IFrameworkPart;
-    protected abstract getBodyComponent(): IPaneBodyPart;
-    protected abstract getHeaderComponent(): IPaneHeaderPart;
+    protected abstract getBodyComponent(): IPanePart;
+    protected abstract getHeaderComponent(): IPanePart;
 }

dist/cjs/splitview/options.d.ts

@@ -5,3 +5,3 @@ import { PanelInitParameters } from '../panel/types';
 import { SplitviewComponent } from './splitviewComponent';
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
+import { CreateComponentOptions } from '../dockview/options';
 export interface PanelViewInitParameters extends PanelInitParameters {
@@ -14,12 +14,10 @@ minimumSize?: number;
 }
-export interface SplitviewComponentOptions extends SplitViewOptions {
+export interface SplitviewOptions extends SplitViewOptions {
     disableAutoResizing?: boolean;
-    components?: {
-        [componentName: string]: ComponentConstructor<SplitviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
     className?: string;
 }
+export interface SplitviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => SplitviewPanel;
+}
+export type SplitviewComponentOptions = SplitviewOptions & SplitviewFrameworkOptions;
+export declare const PROPERTY_KEYS_SPLITVIEW: (keyof SplitviewOptions)[];

dist/cjs/splitview/options.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PROPERTY_KEYS_SPLITVIEW = void 0;
+exports.PROPERTY_KEYS_SPLITVIEW = (function () {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    var properties = {
+        orientation: undefined,
+        descriptor: undefined,
+        proportionalLayout: undefined,
+        styles: undefined,
+        margin: undefined,
+        disableAutoResizing: undefined,
+        className: undefined,
+    };
+    return Object.keys(properties);
+})();

dist/cjs/splitview/splitview.d.ts

@@ -17,7 +17,7 @@ import { Event } from '../events';
 export interface SplitViewOptions {
-    readonly orientation: Orientation;
-    readonly descriptor?: ISplitViewDescriptor;
-    readonly proportionalLayout?: boolean;
-    readonly styles?: ISplitviewStyles;
-    readonly margin?: number;
+    orientation: Orientation;
+    descriptor?: ISplitViewDescriptor;
+    proportionalLayout?: boolean;
+    styles?: ISplitviewStyles;
+    margin?: number;
 }
@@ -24,0 +24,0 @@ export declare enum LayoutPriority {

dist/cjs/splitview/splitviewComponent.js

@@ -60,3 +60,2 @@ "use strict";
 var events_1 = require("../events");
-var componentFactory_1 = require("../panel/componentFactory");
 var resizable_1 = require("../resizable");
@@ -85,8 +84,2 @@ var dom_1 = require("../dom");
         _this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         _this.splitview = new splitview_1.Splitview(_this.element, options);
@@ -231,14 +224,13 @@ _this.addDisposables(_this._onDidAddView, _this._onDidLayoutfromJSON, _this._onDidRemoveView, _this._onDidLayoutChange);
     SplitviewComponent.prototype.addPanel = function (options) {
-        var _a, _b, _c;
+        var _a;
         if (this._panels.has(options.id)) {
             throw new Error("panel ".concat(options.id, " already exists"));
         }
-        var view = (0, componentFactory_1.createComponent)(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.createComponent,
-            }
-            : undefined);
+        var view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         view.orientation = this.splitview.orientation;
         view.init({
-            params: (_c = options.params) !== null && _c !== void 0 ? _c : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumSize: options.minimumSize,
@@ -308,3 +300,2 @@ maximumSize: options.maximumSize,
                 views: views.map(function (view) {
-                    var _a, _b;
                     var data = view.data;
@@ -314,8 +305,6 @@ if (_this._panels.has(data.id)) {
                     }
-                    var panel = (0, componentFactory_1.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.frameworkWrapper
-                        ? {
-                            createComponent: _this.options.frameworkWrapper
-                                .createComponent,
-                        }
-                        : undefined);
+                    var panel = _this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(function () {
@@ -322,0 +311,0 @@ var _a;

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

@@ -15,7 +15,7 @@ import { DockviewMaximizedGroupChanged, FloatingGroupOptions, IDockviewComponent, MovePanelEvent, SerializedDockview } from '../dockview/dockviewComponent';
 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';
@@ -168,3 +168,4 @@ import { GridviewComponentOptions } from '../gridview/options';
      */
-    get onDidDrop(): Event<PaneviewDropEvent>;
+    get onDidDrop(): Event<PaneviewDidDropEvent>;
+    get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent>;
     constructor(component: IPaneviewComponent);
@@ -171,0 +172,0 @@ /**

dist/esm/api/component.api.js

@@ -1,2 +0,1 @@
-import { Emitter } from '../events';
 export class SplitviewApi {
@@ -198,12 +197,7 @@ /**
     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) {
@@ -210,0 +204,0 @@ this.component = component;

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

@@ -79,3 +79,2 @@ import { IDisposable, CompositeDisposable } from '../../../lifecycle';
     setActive(_isGroupActive: boolean): void;
-    private addTab;
     delete(id: string): void;
@@ -86,2 +85,4 @@ setActivePanel(panel: IDockviewPanel): void;
     dispose(): void;
+    private addTab;
+    private updateClassnames;
 }

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

@@ -111,11 +111,3 @@ import { CompositeDisposable, } from '../../../lifecycle';
         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({
@@ -165,16 +157,2 @@ nativeEvent: event,
     }
-    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) {
@@ -187,2 +165,3 @@ const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
         value.element.remove();
+        this.updateClassnames();
     }
@@ -256,2 +235,20 @@ setActivePanel(panel) {
     }
+    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);
+    }
 }

dist/esm/dockview/options.d.ts

@@ -16,2 +16,3 @@ import { DockviewApi } from '../api/component.api';
 import { Contraints } from '../gridview/gridviewPanel';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
 export interface IHeaderActionsRenderer extends IDisposable {
@@ -59,3 +60,3 @@ readonly element: HTMLElement;
 }
-export interface DockviewDndOverlayEvent {
+export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
@@ -66,6 +67,4 @@ target: DockviewGroupDropLocation;
     getData: () => PanelTransfer | undefined;
-    isAccepted: boolean;
-    accept(): void;
 }
-export declare class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
+export declare class DockviewUnhandledDragOverEvent extends AcceptableEvent implements DockviewDndOverlayEvent {
     readonly nativeEvent: DragEvent;
@@ -76,8 +75,5 @@ readonly target: DockviewGroupDropLocation;
     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 {
@@ -84,0 +80,0 @@ /**

dist/esm/dockview/options.js

@@ -1,6 +0,5 @@
-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;
@@ -11,9 +10,5 @@ this.target = target;
         this.group = group;
-        this._isAccepted = false;
     }
-    accept() {
-        this._isAccepted = true;
-    }
 }
-export const PROPERTY_KEYS = (() => {
+export const PROPERTY_KEYS_DOCKVIEW = (() => {
     /**
@@ -20,0 +15,0 @@ * by readong the keys from an empty value object TypeScript will error

dist/esm/events.d.ts

@@ -20,2 +20,11 @@ import { IDisposable } from './lifecycle';
 }
+export interface IAcceptableEvent {
+    readonly isAccepted: boolean;
+    accept(): void;
+}
+export declare class AcceptableEvent implements IAcceptableEvent {
+    private _isAccepted;
+    get isAccepted(): boolean;
+    accept(): void;
+}
 declare class LeakageMonitor {
@@ -22,0 +31,0 @@ readonly events: Map<Event<any>, Stacktrace>;

dist/esm/events.js

@@ -27,2 +27,13 @@ export var Event;
 }
+export class AcceptableEvent {
+    constructor() {
+        this._isAccepted = false;
+    }
+    get isAccepted() {
+        return this._isAccepted;
+    }
+    accept() {
+        this._isAccepted = true;
+    }
+}
 class LeakageMonitor {
@@ -29,0 +40,0 @@ constructor() {

dist/esm/gridview/gridviewComponent.js

@@ -5,3 +5,2 @@ import { getRelativeLocation, getGridLocation, } from './gridview';
 import { BaseGrid, toTarget, } from './baseComponentGridview';
-import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
@@ -25,6 +24,9 @@ export class GridviewComponent extends BaseGrid {
     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,
@@ -49,8 +51,2 @@ className: options.className,
         }));
-        if (!this.options.components) {
-            this.options.components = {};
-        }
-        if (!this.options.frameworkComponents) {
-            this.options.frameworkComponents = {};
-        }
     }
@@ -105,10 +101,7 @@ updateOptions(options) {
                 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({
@@ -191,3 +184,3 @@ params: data.params,
     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];
@@ -208,10 +201,8 @@ if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
         }
-        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,
@@ -218,0 +209,0 @@ maximumWidth: options.maximumWidth,

dist/esm/gridview/options.d.ts

 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)[];

dist/esm/gridview/options.js

@@ -1,1 +0,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);
+})();

dist/esm/index.d.ts

@@ -11,8 +11,8 @@ export { getPaneData, getPanelData, PaneTransfer, PanelTransfer, } from './dnd/dataTransfer';
 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';
@@ -33,3 +33,3 @@ export * from './dockview/components/tab/tab';
 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';
@@ -36,0 +36,0 @@ export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel';

dist/esm/index.js

@@ -11,4 +11,6 @@ export { getPaneData, getPanelData, PaneTransfer, PanelTransfer, } from './dnd/dataTransfer';
 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';
@@ -29,2 +31,3 @@ export { DraggablePaneviewPanel, } from './paneview/draggablePaneviewPanel';
 export * from './paneview/paneviewComponent';
+export { PROPERTY_KEYS_PANEVIEW, PaneviewUnhandledDragOverEvent, } from './paneview/options';
 export * from './gridview/gridviewPanel';
@@ -31,0 +34,0 @@ export { SplitviewPanel } from './splitview/splitviewPanel';

dist/esm/paneview/defaultPaneviewHeader.d.ts

 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;
@@ -7,0 +7,0 @@ private readonly _collapsedIcon;

dist/esm/paneview/draggablePaneviewPanel.d.ts

 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;
@@ -17,3 +19,5 @@ getData: () => PaneTransfer | undefined;
     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);
@@ -20,0 +24,0 @@ private initDragFeatures;

dist/esm/paneview/draggablePaneviewPanel.js

@@ -6,2 +6,3 @@ import { PaneviewApi } from '../api/component.api';
 import { Emitter } from '../events';
+import { PaneviewUnhandledDragOverEvent, } from './options';
 import { PaneviewPanel, } from './paneviewPanel';
@@ -14,2 +15,5 @@ export class DraggablePaneviewPanel extends PaneviewPanel {
         this.onDidDrop = this._onDidDrop.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
         if (!disableDnd) {
@@ -41,3 +45,3 @@ this.initDragFeatures();
             },
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: (event, position) => {
                 const data = getPaneData();
@@ -50,10 +54,5 @@ if (data) {
                 }
-                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;
             },
@@ -60,0 +59,0 @@ });

dist/esm/paneview/options.d.ts

@@ -1,25 +0,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);
+}

dist/esm/paneview/options.js

@@ -1,1 +0,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;
+    }
+}

dist/esm/paneview/paneviewComponent.d.ts

 import { Event } from '../events';
 import { IDisposable } from '../lifecycle';
 import { LayoutPriority, Orientation } from '../splitview/splitview';
-import { PaneviewComponentOptions } from './options';
+import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from './options';
 import { Paneview } from './paneview';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
-import { DraggablePaneviewPanel, PaneviewDropEvent } from './draggablePaneviewPanel';
-import { PaneTransfer } from '../dnd/dataTransfer';
+import { IPanePart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
+import { DraggablePaneviewPanel, PaneviewDidDropEvent } from './draggablePaneviewPanel';
 import { Resizable } from '../resizable';
 import { Parameters } from '../panel/types';
-export interface PaneviewDndOverlayEvent {
-    nativeEvent: DragEvent;
-    panel: IPaneviewPanel;
-    getData: () => PaneTransfer | undefined;
-}
 export interface SerializedPaneviewPanel {
@@ -43,4 +37,4 @@ snap?: boolean;
         headerComponent: string | undefined;
-        body: IPaneBodyPart;
-        header: IPaneHeaderPart;
+        body: IPanePart;
+        header: IPanePart;
         orientation: Orientation;
@@ -51,4 +45,4 @@ isExpanded: boolean;
     });
-    getBodyComponent(): IPaneBodyPart;
-    getHeaderComponent(): IPaneHeaderPart;
+    getBodyComponent(): IPanePart;
+    getHeaderComponent(): IPanePart;
 }
@@ -77,5 +71,6 @@ export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     readonly onDidRemoveView: Event<PaneviewPanel>;
-    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel;
@@ -104,3 +99,3 @@ layout(width: number, height: number): void;
     private readonly _onDidDrop;
-    readonly onDidDrop: Event<PaneviewDropEvent>;
+    readonly onDidDrop: Event<PaneviewDidDropEvent>;
     private readonly _onDidAddView;
@@ -110,2 +105,4 @@ readonly onDidAddView: Event<PaneviewPanel>;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     private readonly _classNames;
@@ -112,0 +109,0 @@ get id(): string;

dist/esm/paneview/paneviewComponent.js

 import { PaneviewApi } from '../api/component.api';
-import { createComponent } from '../panel/componentFactory';
 import { Emitter } from '../events';
@@ -76,12 +75,8 @@ import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
         this.onDidRemoveView = this._onDidRemoveView.event;
-        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+        this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView, this._onUnhandledDragOverEvent);
         this._classNames = new Classnames(this.element);
         this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
         this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         this.paneview = new Paneview(this.element, {
@@ -111,18 +106,15 @@ // only allow paneview in the vertical orientation for now
     addPanel(options) {
-        var _a, _b, _c, _d;
-        const body = createComponent(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.body.createComponent,
-            }
-            : undefined);
+        var _a;
+        const body = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         let header;
-        if (options.headerComponent) {
-            header = createComponent(options.id, options.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, this.options.headerframeworkComponents, this.options.frameworkWrapper
-                ? {
-                    createComponent: this.options.frameworkWrapper.header
-                        .createComponent,
-                }
-                : undefined);
+        if (options.headerComponent && this.options.createHeaderComponent) {
+            header = this.options.createHeaderComponent({
+                id: options.id,
+                name: options.headerComponent,
+            });
         }
-        else {
+        if (!header) {
             header = new DefaultHeader();
@@ -145,3 +137,3 @@ }
         view.init({
-            params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumBodySize: options.minimumBodySize,
@@ -211,20 +203,16 @@ maximumBodySize: options.maximumBodySize,
                 views: views.map((view) => {
-                    var _a, _b, _c, _d;
                     const data = view.data;
-                    const body = 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.frameworkWrapper
-                        ? {
-                            createComponent: this.options.frameworkWrapper.body
-                                .createComponent,
-                        }
-                        : undefined);
+                    const body = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     let header;
-                    if (data.headerComponent) {
-                        header = createComponent(data.id, data.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, (_d = this.options.headerframeworkComponents) !== null && _d !== void 0 ? _d : {}, this.options.frameworkWrapper
-                            ? {
-                                createComponent: this.options.frameworkWrapper.header
-                                    .createComponent,
-                            }
-                            : undefined);
+                    if (data.headerComponent &&
+                        this.options.createHeaderComponent) {
+                        header = this.options.createHeaderComponent({
+                            id: data.id,
+                            name: data.headerComponent,
+                        });
                     }
-                    else {
+                    if (!header) {
                         header = new DefaultHeader();
@@ -277,5 +265,7 @@ }
     doAddPanel(panel) {
-        const disposable = panel.onDidDrop((event) => {
+        const disposable = new CompositeDisposable(panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);
-        });
+        }), panel.onUnhandledDragOverEvent((event) => {
+            this._onUnhandledDragOverEvent.fire(event);
+        }));
         this._viewDisposables.set(panel.id, disposable);
@@ -282,0 +272,0 @@ }

dist/esm/paneview/paneviewPanel.d.ts

@@ -24,3 +24,3 @@ import { PaneviewApi } from '../api/component.api';
 }
-export interface IPaneBodyPart extends IDisposable {
+export interface IPanePart extends IDisposable {
     readonly element: HTMLElement;
@@ -30,7 +30,2 @@ update(params: PanelUpdateEvent): void;
 }
-export interface IPaneHeaderPart extends IDisposable {
-    readonly element: HTMLElement;
-    update(params: PanelUpdateEvent): void;
-    init(parameters: PanePanelComponentInitParameter): void;
-}
 export interface IPaneview extends IView {
@@ -94,4 +89,4 @@ onDidChangeExpansionState: Event<boolean>;
     getComponent(): IFrameworkPart;
-    protected abstract getBodyComponent(): IPaneBodyPart;
-    protected abstract getHeaderComponent(): IPaneHeaderPart;
+    protected abstract getBodyComponent(): IPanePart;
+    protected abstract getHeaderComponent(): IPanePart;
 }

dist/esm/splitview/options.d.ts

@@ -5,3 +5,3 @@ import { PanelInitParameters } from '../panel/types';
 import { SplitviewComponent } from './splitviewComponent';
-import { ComponentConstructor, FrameworkFactory } from '../panel/componentFactory';
+import { CreateComponentOptions } from '../dockview/options';
 export interface PanelViewInitParameters extends PanelInitParameters {
@@ -14,12 +14,10 @@ minimumSize?: number;
 }
-export interface SplitviewComponentOptions extends SplitViewOptions {
+export interface SplitviewOptions extends SplitViewOptions {
     disableAutoResizing?: boolean;
-    components?: {
-        [componentName: string]: ComponentConstructor<SplitviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
     className?: string;
 }
+export interface SplitviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => SplitviewPanel;
+}
+export type SplitviewComponentOptions = SplitviewOptions & SplitviewFrameworkOptions;
+export declare const PROPERTY_KEYS_SPLITVIEW: (keyof SplitviewOptions)[];

dist/esm/splitview/options.js

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

dist/esm/splitview/splitview.d.ts

@@ -17,7 +17,7 @@ import { Event } from '../events';
 export interface SplitViewOptions {
-    readonly orientation: Orientation;
-    readonly descriptor?: ISplitViewDescriptor;
-    readonly proportionalLayout?: boolean;
-    readonly styles?: ISplitviewStyles;
-    readonly margin?: number;
+    orientation: Orientation;
+    descriptor?: ISplitViewDescriptor;
+    proportionalLayout?: boolean;
+    styles?: ISplitviewStyles;
+    margin?: number;
 }
@@ -24,0 +24,0 @@ export declare enum LayoutPriority {

dist/esm/splitview/splitviewComponent.js

 import { CompositeDisposable, MutableDisposable, } from '../lifecycle';
 import { Orientation, Sizing, Splitview, } from './splitview';
 import { Emitter } from '../events';
-import { createComponent } from '../panel/componentFactory';
 import { Resizable } from '../resizable';
@@ -64,8 +63,2 @@ import { Classnames } from '../dom';
         this._options = options;
-        if (!options.components) {
-            options.components = {};
-        }
-        if (!options.frameworkComponents) {
-            options.frameworkComponents = {};
-        }
         this.splitview = new Splitview(this.element, options);
@@ -133,14 +126,13 @@ this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
     addPanel(options) {
-        var _a, _b, _c;
+        var _a;
         if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }
-        const view = createComponent(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-            ? {
-                createComponent: this.options.frameworkWrapper.createComponent,
-            }
-            : undefined);
+        const view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
         view.orientation = this.splitview.orientation;
         view.init({
-            params: (_c = options.params) !== null && _c !== void 0 ? _c : {},
+            params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
             minimumSize: options.minimumSize,
@@ -207,3 +199,2 @@ maximumSize: options.maximumSize,
                 views: views.map((view) => {
-                    var _a, _b;
                     const data = view.data;
@@ -213,8 +204,6 @@ if (this._panels.has(data.id)) {
                     }
-                    const panel = 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.frameworkWrapper
-                        ? {
-                            createComponent: this.options.frameworkWrapper
-                                .createComponent,
-                        }
-                        : undefined);
+                    const panel = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
                     queue.push(() => {
@@ -221,0 +210,0 @@ var _a;

package.json

 {
   "name": "dockview-core",
-  "version": "2.1.4",
+  "version": "3.0.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

12784224

decreased by-0.49%

Number of package files

293

decreased by-1.35%

Lines of code

96734

decreased by-0.03%

No dependency changes