dockview-core 1.15.3 → 1.16.0

package/dist/cjs/dom.js

@@ -25,8 +25,33 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0;
+exports.disableIframePointEvents = exports.addTestId = exports.isInDocument = exports.getDomNodePagePosition = exports.addStyles = exports.quasiDefaultPrevented = exports.quasiPreventDefault = exports.trackFocus = exports.getElementsByTagName = exports.isAncestor = exports.toggleClass = exports.addClasses = exports.removeClasses = exports.watchElementResize = void 0;
 var events_1 = require("./events");
 var lifecycle_1 = require("./lifecycle");
 function watchElementResize(element, cb) {
@@ -278,3 +303,43 @@ function addTestId(element, id) {
     element.setAttribute('data-testid', id);
 }
 exports.addTestId = addTestId;
+function disableIframePointEvents() {
+    var e_5, _a;
+    var iframes = __spreadArray(__spreadArray([], __read(getElementsByTagName('iframe')), false), __read(getElementsByTagName('webview')), false);
+    var original = new WeakMap(); // don't hold onto HTMLElement references longer than required
+    try {
+        for (var iframes_1 = __values(iframes), iframes_1_1 = iframes_1.next(); !iframes_1_1.done; iframes_1_1 = iframes_1.next()) {
+            var iframe = iframes_1_1.value;
+            original.set(iframe, iframe.style.pointerEvents);
+            iframe.style.pointerEvents = 'none';
+        }
+    }
+    catch (e_5_1) { e_5 = { error: e_5_1 }; }
+    finally {
+        try {
+            if (iframes_1_1 && !iframes_1_1.done && (_a = iframes_1.return)) _a.call(iframes_1);
+        }
+        finally { if (e_5) throw e_5.error; }
+    }
+    return {
+        release: function () {
+            var e_6, _a;
+            var _b;
+            try {
+                for (var iframes_2 = __values(iframes), iframes_2_1 = iframes_2.next(); !iframes_2_1.done; iframes_2_1 = iframes_2.next()) {
+                    var iframe = iframes_2_1.value;
+                    iframe.style.pointerEvents = (_b = original.get(iframe)) !== null && _b !== void 0 ? _b : 'auto';
+                }
+            }
+            catch (e_6_1) { e_6 = { error: e_6_1 }; }
+            finally {
+                try {
+                    if (iframes_2_1 && !iframes_2_1.done && (_a = iframes_2.return)) _a.call(iframes_2);
+                }
+                finally { if (e_6) throw e_6.error; }
+            }
+            iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
+        },
+    };
+}
+exports.disableIframePointEvents = disableIframePointEvents;

package/dist/cjs/gridview/baseComponentGridview.d.ts

@@ -1,7 +1,7 @@
 import { Event, AsapEvent } from '../events';
 import { Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
-import { IValueDisposable } from '../lifecycle';
+import { IDisposable, IValueDisposable } from '../lifecycle';
 import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
@@ -16,12 +16,13 @@ export interface BaseGridOptions {
     readonly disableAutoResizing?: boolean;
     readonly locked?: boolean;
     readonly margin?: number;
+    readonly className?: string;
 }
 export interface IGridPanelView extends IGridView, IPanel {
     setActive(isActive: boolean): void;
     readonly isActive: boolean;
 }
-export interface IBaseGrid<T extends IGridPanelView> {
+export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
     readonly element: HTMLElement;
     readonly id: string;
     readonly width: number;

package/dist/cjs/gridview/baseComponentGridview.js

@@ -68,6 +68,9 @@ var BaseGrid = /** @class */ (function (_super) {
         _this.onDidViewVisibilityChangeMicroTaskQueue = _this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
         _this.element.style.height = '100%';
         _this.element.style.width = '100%';
+        if (typeof options.className === 'string') {
+            _this.element.classList.add(options.className);
+        }
         options.parentElement.appendChild(_this.element);
         _this.gridview = new gridview_1.Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
         _this.gridview.locked = !!options.locked;

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

@@ -62,7 +62,7 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     get options(): GridviewComponentOptions;
     get deserializer(): IPanelDeserializer | undefined;
     set deserializer(value: IPanelDeserializer | undefined);
-    constructor(options: GridviewComponentOptions);
+    constructor(parentElement: HTMLElement, options: GridviewComponentOptions);
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
     removePanel(panel: GridviewPanel): void;
     /**

package/dist/cjs/gridview/gridviewComponent.js

@@ -62,13 +62,14 @@ var componentFactory_1 = require("../panel/componentFactory");
 var events_1 = require("../events");
 var GridviewComponent = /** @class */ (function (_super) {
     __extends(GridviewComponent, _super);
-    function GridviewComponent(options) {
+    function GridviewComponent(parentElement, options) {
         var _this = _super.call(this, {
-            parentElement: options.parentElement,
+            parentElement: parentElement,
             proportionalLayout: options.proportionalLayout,
             orientation: options.orientation,
             styles: options.styles,
             disableAutoResizing: options.disableAutoResizing,
+            className: options.className,
         }) || this;
         _this._onDidLayoutfromJSON = new events_1.Emitter();
         _this.onDidLayoutFromJSON = _this._onDidLayoutfromJSON.event;

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

@@ -13,5 +13,5 @@ export interface GridviewComponentOptions {
     };
     frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
     styles?: ISplitviewStyles;
-    parentElement: HTMLElement;
+    className?: string;
 }

package/dist/cjs/index.d.ts

@@ -35,7 +35,7 @@ export * from './gridview/gridviewPanel';
 export * from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './dockview/types';
-export { DockviewPanelRenderer } from './overlayRenderContainer';
+export { DockviewPanelRenderer } from './overlay/overlayRenderContainer';
 export { Position, positionToDirection, directionToPosition, MeasuredValue, DroptargetOverlayModel, } from './dnd/droptarget';
 export { FocusEvent, PanelDimensionChangeEvent, VisibilityEvent, ActiveEvent, PanelApi, } from './api/panelApi';
 export { SizeEvent, GridviewPanelApi, GridConstraintChangeEvent, } from './api/gridviewPanelApi';
@@ -44,3 +44,4 @@ export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from '
 export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
 export { DockviewGroupPanelApi, DockviewGroupPanelFloatingChangeEvent, } from './api/dockviewGroupPanelApi';
 export { CommonApi, SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';
+export { createDockview, createGridview, createPaneview, createSplitview, } from './api/entryPoints';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = exports.directionToPosition = exports.positionToDirection = exports.DockviewDisposable = exports.DockviewCompositeDisposable = exports.DockviewMutableDisposable = exports.DockviewEvent = exports.DockviewEmitter = void 0;
+exports.createSplitview = exports.createPaneview = exports.createGridview = exports.createDockview = exports.DockviewApi = exports.GridviewApi = exports.PaneviewApi = exports.SplitviewApi = exports.directionToPosition = exports.positionToDirection = exports.DockviewDisposable = exports.DockviewCompositeDisposable = exports.DockviewMutableDisposable = exports.DockviewEvent = exports.DockviewEmitter = void 0;
 __exportStar(require("./dnd/dataTransfer"), exports);
 /**
  * Events, Emitters and Disposables are very common concepts that many codebases will contain, however we need
@@ -60,3 +60,8 @@ Object.defineProperty(exports, "SplitviewApi", { enumerable: true, get: function
 Object.defineProperty(exports, "PaneviewApi", { enumerable: true, get: function () { return component_api_1.PaneviewApi; } });
 Object.defineProperty(exports, "GridviewApi", { enumerable: true, get: function () { return component_api_1.GridviewApi; } });
 Object.defineProperty(exports, "DockviewApi", { enumerable: true, get: function () { return component_api_1.DockviewApi; } });
+var entryPoints_1 = require("./api/entryPoints");
+Object.defineProperty(exports, "createDockview", { enumerable: true, get: function () { return entryPoints_1.createDockview; } });
+Object.defineProperty(exports, "createGridview", { enumerable: true, get: function () { return entryPoints_1.createGridview; } });
+Object.defineProperty(exports, "createPaneview", { enumerable: true, get: function () { return entryPoints_1.createPaneview; } });
+Object.defineProperty(exports, "createSplitview", { enumerable: true, get: function () { return entryPoints_1.createSplitview; } });

package/dist/cjs/{dnd → overlay}/overlay.d.ts

@@ -1,6 +1,7 @@
 import { Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { AnchoredBox } from '../types';
+export declare const DEFAULT_OVERLAY_Z_INDEX = 999;
 export declare class Overlay extends CompositeDisposable {
     private readonly options;
     private _element;
@@ -14,12 +15,14 @@ export declare class Overlay extends CompositeDisposable {
     private horiziontalAlignment;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
+    get element(): HTMLElement;
     constructor(options: AnchoredBox & {
         container: HTMLElement;
         content: HTMLElement;
         minimumInViewportWidth?: number;
         minimumInViewportHeight?: number;
     });
+    bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;
     setupDrag(dragTarget: HTMLElement, options?: {

package/dist/cjs/{dnd → overlay}/overlay.js

@@ -50,34 +50,36 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-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 });
-exports.Overlay = void 0;
+exports.Overlay = exports.DEFAULT_OVERLAY_Z_INDEX = void 0;
 var dom_1 = require("../dom");
 var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var math_1 = require("../math");
-var bringElementToFront = (function () {
-    var previous = null;
-    function pushToTop(element) {
-        if (previous !== element && previous !== null) {
-            (0, dom_1.toggleClass)(previous, 'dv-bring-to-front', false);
-        }
-        (0, dom_1.toggleClass)(element, 'dv-bring-to-front', true);
-        previous = element;
+exports.DEFAULT_OVERLAY_Z_INDEX = 999;
+var AriaLevelTracker = /** @class */ (function () {
+    function AriaLevelTracker() {
+        this._orderedList = [];
     }
-    return pushToTop;
-})();
+    AriaLevelTracker.prototype.push = function (element) {
+        this._orderedList = __spreadArray(__spreadArray([], __read(this._orderedList.filter(function (item) { return item !== element; })), false), [
+            element,
+        ], false);
+        this.update();
+    };
+    AriaLevelTracker.prototype.destroy = function (element) {
+        this._orderedList = this._orderedList.filter(function (item) { return item !== element; });
+        this.update();
+    };
+    AriaLevelTracker.prototype.update = function () {
+        for (var i = 0; i < this._orderedList.length; i++) {
+            this._orderedList[i].setAttribute('aria-level', "".concat(i));
+            this._orderedList[i].style.zIndex = "".concat(exports.DEFAULT_OVERLAY_Z_INDEX + i * 2);
+        }
+    };
+    return AriaLevelTracker;
+}());
+var arialLevelTracker = new AriaLevelTracker();
 var Overlay = /** @class */ (function (_super) {
     __extends(Overlay, _super);
     function Overlay(options) {
@@ -102,6 +104,7 @@ var Overlay = /** @class */ (function (_super) {
         _this.options.container.appendChild(_this._element);
         // if input bad resize within acceptable boundaries
         _this.setBounds(__assign(__assign(__assign(__assign({ height: _this.options.height, width: _this.options.width }, ('top' in _this.options && { top: _this.options.top })), ('bottom' in _this.options && { bottom: _this.options.bottom })), ('left' in _this.options && { left: _this.options.left })), ('right' in _this.options && { right: _this.options.right })));
+        arialLevelTracker.push(_this._element);
         return _this;
     }
     Object.defineProperty(Overlay.prototype, "minimumInViewportWidth", {
@@ -118,6 +121,16 @@ var Overlay = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Overlay.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Overlay.prototype.bringToFront = function () {
+        arialLevelTracker.push(this._element);
+    };
     Overlay.prototype.setBounds = function (bounds) {
         if (bounds === void 0) { bounds = {}; }
         if (typeof bounds.height === 'number') {
@@ -206,38 +219,11 @@ var Overlay = /** @class */ (function (_super) {
         if (options === void 0) { options = { inDragMode: false }; }
         var move = new lifecycle_1.MutableDisposable();
         var track = function () {
-            var e_1, _a;
             var offset = null;
-            var iframes = __spreadArray(__spreadArray([], __read((0, dom_1.getElementsByTagName)('iframe')), false), __read((0, dom_1.getElementsByTagName)('webview')), false);
-            try {
-                for (var iframes_1 = __values(iframes), iframes_1_1 = iframes_1.next(); !iframes_1_1.done; iframes_1_1 = iframes_1.next()) {
-                    var iframe = iframes_1_1.value;
-                    iframe.style.pointerEvents = 'none';
-                }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (iframes_1_1 && !iframes_1_1.done && (_a = iframes_1.return)) _a.call(iframes_1);
-                }
-                finally { if (e_1) throw e_1.error; }
-            }
+            var iframes = (0, dom_1.disableIframePointEvents)();
             move.value = new lifecycle_1.CompositeDisposable({
                 dispose: function () {
-                    var e_2, _a;
-                    try {
-                        for (var iframes_2 = __values(iframes), iframes_2_1 = iframes_2.next(); !iframes_2_1.done; iframes_2_1 = iframes_2.next()) {
-                            var iframe = iframes_2_1.value;
-                            iframe.style.pointerEvents = 'auto';
-                        }
-                    }
-                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                    finally {
-                        try {
-                            if (iframes_2_1 && !iframes_2_1.done && (_a = iframes_2.return)) _a.call(iframes_2);
-                        }
-                        finally { if (e_2) throw e_2.error; }
-                    }
+                    iframes.release();
                 },
             }, (0, events_1.addDisposableWindowListener)(window, 'mousemove', function (e) {
                 var containerRect = _this.options.container.getBoundingClientRect();
@@ -306,9 +292,8 @@ var Overlay = /** @class */ (function (_super) {
                 track();
             }
         }), (0, events_1.addDisposableListener)(this.options.content, 'mousedown', function () {
-            bringElementToFront(_this._element);
+            arialLevelTracker.push(_this._element);
         }, true));
-        bringElementToFront(this._element);
         if (options.inDragMode) {
             track();
         }
@@ -320,23 +305,9 @@ var Overlay = /** @class */ (function (_super) {
         this._element.appendChild(resizeHandleElement);
         var move = new lifecycle_1.MutableDisposable();
         this.addDisposables(move, (0, events_1.addDisposableListener)(resizeHandleElement, 'mousedown', function (e) {
-            var e_3, _a;
             e.preventDefault();
             var startPosition = null;
-            var iframes = __spreadArray(__spreadArray([], __read((0, dom_1.getElementsByTagName)('iframe')), false), __read((0, dom_1.getElementsByTagName)('webview')), false);
-            try {
-                for (var iframes_3 = __values(iframes), iframes_3_1 = iframes_3.next(); !iframes_3_1.done; iframes_3_1 = iframes_3.next()) {
-                    var iframe = iframes_3_1.value;
-                    iframe.style.pointerEvents = 'none';
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (iframes_3_1 && !iframes_3_1.done && (_a = iframes_3.return)) _a.call(iframes_3);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
+            var iframes = (0, dom_1.disableIframePointEvents)();
             move.value = new lifecycle_1.CompositeDisposable((0, events_1.addDisposableWindowListener)(window, 'mousemove', function (e) {
                 var containerRect = _this.options.container.getBoundingClientRect();
                 var overlayRect = _this._element.getBoundingClientRect();
@@ -459,20 +430,7 @@ var Overlay = /** @class */ (function (_super) {
                 _this.setBounds(bounds);
             }), {
                 dispose: function () {
-                    var e_4, _a;
-                    try {
-                        for (var iframes_4 = __values(iframes), iframes_4_1 = iframes_4.next(); !iframes_4_1.done; iframes_4_1 = iframes_4.next()) {
-                            var iframe = iframes_4_1.value;
-                            iframe.style.pointerEvents = 'auto';
-                        }
-                    }
-                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
-                    finally {
-                        try {
-                            if (iframes_4_1 && !iframes_4_1.done && (_a = iframes_4.return)) _a.call(iframes_4);
-                        }
-                        finally { if (e_4) throw e_4.error; }
-                    }
+                    iframes.release();
                 },
             }, (0, events_1.addDisposableWindowListener)(window, 'mouseup', function () {
                 move.dispose();
@@ -493,6 +451,7 @@ var Overlay = /** @class */ (function (_super) {
         return 0;
     };
     Overlay.prototype.dispose = function () {
+        arialLevelTracker.destroy(this._element);
         this._element.remove();
         _super.prototype.dispose.call(this);
     };

package/dist/cjs/{overlayRenderContainer.d.ts → overlay/overlayRenderContainer.d.ts}

@@ -1,16 +1,18 @@
-import { Droptarget } from './dnd/droptarget';
-import { CompositeDisposable } from './lifecycle';
-import { IDockviewPanel } from './dockview/dockviewPanel';
+import { Droptarget } from '../dnd/droptarget';
+import { CompositeDisposable } from '../lifecycle';
+import { IDockviewPanel } from '../dockview/dockviewPanel';
+import { DockviewComponent } from '../dockview/dockviewComponent';
 export type DockviewPanelRenderer = 'onlyWhenVisible' | 'always';
 export interface IRenderable {
     readonly element: HTMLElement;
     readonly dropTarget: Droptarget;
 }
 export declare class OverlayRenderContainer extends CompositeDisposable {
-    private readonly element;
+    readonly element: HTMLElement;
+    readonly accessor: DockviewComponent;
     private readonly map;
     private _disposed;
-    constructor(element: HTMLElement);
+    constructor(element: HTMLElement, accessor: DockviewComponent);
     detatch(panel: IDockviewPanel): boolean;
     attach(options: {
         panel: IDockviewPanel;

package/dist/cjs/{overlayRenderContainer.js → overlay/overlayRenderContainer.js}

@@ -27,9 +27,10 @@ var __values = (this && this.__values) || function(o) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverlayRenderContainer = void 0;
-var dnd_1 = require("./dnd/dnd");
-var dom_1 = require("./dom");
-var lifecycle_1 = require("./lifecycle");
+var dnd_1 = require("../dnd/dnd");
+var dom_1 = require("../dom");
+var lifecycle_1 = require("../lifecycle");
+var overlay_1 = require("./overlay");
 function createFocusableElement() {
     var element = document.createElement('div');
     element.tabIndex = -1;
@@ -37,9 +38,10 @@ function createFocusableElement() {
 }
 var OverlayRenderContainer = /** @class */ (function (_super) {
     __extends(OverlayRenderContainer, _super);
-    function OverlayRenderContainer(element) {
+    function OverlayRenderContainer(element, accessor) {
         var _this = _super.call(this) || this;
         _this.element = element;
+        _this.accessor = accessor;
         _this.map = {};
         _this._disposed = false;
         _this.addDisposables(lifecycle_1.Disposable.from(function () {
@@ -108,7 +110,37 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
         };
-        var disposable = new lifecycle_1.CompositeDisposable(
+        var observerDisposable = new lifecycle_1.MutableDisposable();
+        var correctLayerPosition = function () {
+            if (panel.api.location.type === 'floating') {
+                queueMicrotask(function () {
+                    var floatingGroup = _this.accessor.floatingGroups.find(function (group) { return group.group === panel.api.group; });
+                    if (!floatingGroup) {
+                        return;
+                    }
+                    var element = floatingGroup.overlay.element;
+                    var update = function () {
+                        var level = Number(element.getAttribute('aria-level'));
+                        focusContainer.style.zIndex = "".concat(overlay_1.DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1);
+                    };
+                    var observer = new MutationObserver(function () {
+                        update();
+                    });
+                    observerDisposable.value = lifecycle_1.Disposable.from(function () {
+                        return observer.disconnect();
+                    });
+                    observer.observe(element, {
+                        attributeFilter: ['aria-level'],
+                        attributes: true,
+                    });
+                    update();
+                });
+            }
+            else {
+                focusContainer.style.zIndex = ''; // reset the z-index, perhaps CSS will take over here
+            }
+        };
+        var disposable = new lifecycle_1.CompositeDisposable(observerDisposable, 
         /**
          * since container is positioned absoutely we must explicitly forward
          * the dnd events for the expect behaviours to continue to occur in terms of dnd
@@ -132,7 +164,7 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
             onDragOver: function (e) {
                 referenceContainer.dropTarget.dnd.onDragOver(e);
             },
-        }), panel.api.onDidVisibilityChange(function (event) {
+        }), panel.api.onDidVisibilityChange(function () {
             /**
              * Control the visibility of the content, however even when not visible (display: none)
              * the content is still maintained within the DOM hence DOM specific attributes
@@ -144,6 +176,8 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
                 return;
             }
             resize();
+        }), panel.api.onDidLocationChange(function () {
+            correctLayerPosition();
         }));
         this.map[panel.api.id].destroy = lifecycle_1.Disposable.from(function () {
             var _a;
@@ -152,6 +186,7 @@ var OverlayRenderContainer = /** @class */ (function (_super) {
             }
             (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
         });
+        correctLayerPosition();
         queueMicrotask(function () {
             if (_this.isDisposed) {
                 return;

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

@@ -21,5 +21,5 @@ export interface PaneviewComponentOptions {
     };
     disableDnd?: boolean;
     showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
-    parentElement: HTMLElement;
+    className?: string;
 }

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

@@ -112,7 +112,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     get height(): number;
     get width(): number;
     get options(): PaneviewComponentOptions;
-    constructor(options: PaneviewComponentOptions);
+    constructor(parentElement: HTMLElement, options: PaneviewComponentOptions);
     setVisible(panel: PaneviewPanel, visible: boolean): void;
     focus(): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;

package/dist/cjs/paneview/paneviewComponent.js

@@ -83,8 +83,8 @@ var PaneFramework = /** @class */ (function (_super) {
 exports.PaneFramework = PaneFramework;
 var PaneviewComponent = /** @class */ (function (_super) {
     __extends(PaneviewComponent, _super);
-    function PaneviewComponent(options) {
-        var _this = _super.call(this, options.parentElement, options.disableAutoResizing) || this;
+    function PaneviewComponent(parentElement, options) {
+        var _this = _super.call(this, parentElement, options.disableAutoResizing) || this;
         _this._id = nextLayoutId.next();
         _this._disposable = new lifecycle_1.MutableDisposable();
         _this._viewDisposables = new Map();
@@ -98,6 +98,9 @@ var PaneviewComponent = /** @class */ (function (_super) {
         _this.onDidAddView = _this._onDidAddView.event;
         _this._onDidRemoveView = new events_1.Emitter();
         _this.onDidRemoveView = _this._onDidRemoveView.event;
+        if (typeof options.className === 'string') {
+            _this.element.classList.add(options.className);
+        }
         _this.addDisposables(_this._onDidLayoutChange, _this._onDidLayoutfromJSON, _this._onDidDrop, _this._onDidAddView, _this._onDidRemoveView);
         _this._options = options;
         if (!options.components) {

package/dist/cjs/splitview/options.d.ts

@@ -19,5 +19,5 @@ export interface SplitviewComponentOptions extends SplitViewOptions {
         [componentName: string]: any;
     };
     frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
-    parentElement: HTMLElement;
+    className?: string;
 }