dockview-core 1.15.3 → 1.16.1

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

@@ -25,11 +25,10 @@ export interface AddComponentOptions<T extends object = Parameters> extends Base
 export interface IGridPanelComponentView extends IGridPanelView {
     init: (params: GridviewInitParameters) => void;
 }
-export type GridviewComponentUpdateOptions = Pick<GridviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     readonly orientation: Orientation;
     readonly onDidLayoutFromJSON: Event<void>;
-    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<GridviewComponentOptions>): void;
     addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
     focus(): void;
@@ -62,8 +61,8 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     get options(): GridviewComponentOptions;
     get deserializer(): IPanelDeserializer | undefined;
     set deserializer(value: IPanelDeserializer | undefined);
-    constructor(options: GridviewComponentOptions);
-    updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
+    constructor(parentElement: HTMLElement, options: GridviewComponentOptions);
+    updateOptions(options: Partial<GridviewComponentOptions>): void;
     removePanel(panel: GridviewPanel): void;
     /**
      * Serialize the current state of the layout

package/dist/esm/gridview/gridviewComponent.js

@@ -20,13 +20,14 @@ export class GridviewComponent extends BaseGrid {
     set deserializer(value) {
         this._deserializer = value;
     }
-    constructor(options) {
+    constructor(parentElement, options) {
         super({
-            parentElement: options.parentElement,
+            parentElement: parentElement,
             proportionalLayout: options.proportionalLayout,
             orientation: options.orientation,
             styles: options.styles,
             disableAutoResizing: options.disableAutoResizing,
+            className: options.className,
         });
         this._onDidLayoutfromJSON = new Emitter();
         this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
@@ -52,6 +53,7 @@ export class GridviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
+        super.updateOptions(options);
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.gridview.orientation !== options.orientation;
         this._options = Object.assign(Object.assign({}, this.options), options);

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

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

package/dist/esm/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/esm/index.js

@@ -32,3 +32,4 @@ export * from './paneview/paneviewPanel';
 export * from './dockview/types';
 export { positionToDirection, directionToPosition, } from './dnd/droptarget';
 export { SplitviewApi, PaneviewApi, GridviewApi, DockviewApi, } from './api/component.api';
+export { createDockview, createGridview, createPaneview, createSplitview, } from './api/entryPoints';

package/dist/esm/{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/esm/{dnd → overlay}/overlay.js

@@ -1,18 +1,31 @@
-import { getElementsByTagName, quasiDefaultPrevented, toggleClass, } from '../dom';
+import { disableIframePointEvents, quasiDefaultPrevented, toggleClass, } from '../dom';
 import { Emitter, addDisposableListener, addDisposableWindowListener, } from '../events';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { clamp } from '../math';
-const bringElementToFront = (() => {
-    let previous = null;
-    function pushToTop(element) {
-        if (previous !== element && previous !== null) {
-            toggleClass(previous, 'dv-bring-to-front', false);
+export const DEFAULT_OVERLAY_Z_INDEX = 999;
+class AriaLevelTracker {
+    constructor() {
+        this._orderedList = [];
+    }
+    push(element) {
+        this._orderedList = [
+            ...this._orderedList.filter((item) => item !== element),
+            element,
+        ];
+        this.update();
+    }
+    destroy(element) {
+        this._orderedList = this._orderedList.filter((item) => item !== element);
+        this.update();
+    }
+    update() {
+        for (let i = 0; i < this._orderedList.length; i++) {
+            this._orderedList[i].setAttribute('aria-level', `${i}`);
+            this._orderedList[i].style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + i * 2}`;
         }
-        toggleClass(element, 'dv-bring-to-front', true);
-        previous = element;
     }
-    return pushToTop;
-})();
+}
+const arialLevelTracker = new AriaLevelTracker();
 export class Overlay extends CompositeDisposable {
     set minimumInViewportWidth(value) {
         this.options.minimumInViewportWidth = value;
@@ -20,6 +33,9 @@ export class Overlay extends CompositeDisposable {
     set minimumInViewportHeight(value) {
         this.options.minimumInViewportHeight = value;
     }
+    get element() {
+        return this._element;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -42,6 +58,10 @@ export class Overlay extends CompositeDisposable {
         this.options.container.appendChild(this._element);
         // if input bad resize within acceptable boundaries
         this.setBounds(Object.assign(Object.assign(Object.assign(Object.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);
+    }
+    bringToFront() {
+        arialLevelTracker.push(this._element);
     }
     setBounds(bounds = {}) {
         if (typeof bounds.height === 'number') {
@@ -129,18 +149,10 @@ export class Overlay extends CompositeDisposable {
         const move = new MutableDisposable();
         const track = () => {
             let offset = null;
-            const iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
+            const iframes = disableIframePointEvents();
             move.value = new CompositeDisposable({
                 dispose: () => {
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
+                    iframes.release();
                 },
             }, addDisposableWindowListener(window, 'mousemove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
@@ -209,9 +221,8 @@ export class Overlay extends CompositeDisposable {
                 track();
             }
         }), addDisposableListener(this.options.content, 'mousedown', () => {
-            bringElementToFront(this._element);
+            arialLevelTracker.push(this._element);
         }, true));
-        bringElementToFront(this._element);
         if (options.inDragMode) {
             track();
         }
@@ -224,13 +235,7 @@ export class Overlay extends CompositeDisposable {
         this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
             e.preventDefault();
             let startPosition = null;
-            const iframes = [
-                ...getElementsByTagName('iframe'),
-                ...getElementsByTagName('webview'),
-            ];
-            for (const iframe of iframes) {
-                iframe.style.pointerEvents = 'none';
-            }
+            const iframes = disableIframePointEvents();
             move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
                 const containerRect = this.options.container.getBoundingClientRect();
                 const overlayRect = this._element.getBoundingClientRect();
@@ -353,9 +358,7 @@ export class Overlay extends CompositeDisposable {
                 this.setBounds(bounds);
             }), {
                 dispose: () => {
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
+                    iframes.release();
                 },
             }, addDisposableWindowListener(window, 'mouseup', () => {
                 move.dispose();
@@ -376,6 +379,7 @@ export class Overlay extends CompositeDisposable {
         return 0;
     }
     dispose() {
+        arialLevelTracker.destroy(this._element);
         this._element.remove();
         super.dispose();
     }

package/dist/esm/{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/esm/{overlayRenderContainer.js → overlay/overlayRenderContainer.js}

@@ -1,15 +1,17 @@
-import { DragAndDropObserver } from './dnd/dnd';
-import { getDomNodePagePosition, toggleClass } from './dom';
-import { CompositeDisposable, Disposable } from './lifecycle';
+import { DragAndDropObserver } from '../dnd/dnd';
+import { getDomNodePagePosition, toggleClass } from '../dom';
+import { CompositeDisposable, Disposable, MutableDisposable, } from '../lifecycle';
+import { DEFAULT_OVERLAY_Z_INDEX } from './overlay';
 function createFocusableElement() {
     const element = document.createElement('div');
     element.tabIndex = -1;
     return element;
 }
 export class OverlayRenderContainer extends CompositeDisposable {
-    constructor(element) {
+    constructor(element, accessor) {
         super();
         this.element = element;
+        this.accessor = accessor;
         this.map = {};
         this._disposed = false;
         this.addDisposables(Disposable.from(() => {
@@ -65,7 +67,35 @@ export class OverlayRenderContainer extends CompositeDisposable {
             }
             focusContainer.style.display = panel.api.isVisible ? '' : 'none';
         };
-        const disposable = new CompositeDisposable(
+        const observerDisposable = new MutableDisposable();
+        const correctLayerPosition = () => {
+            if (panel.api.location.type === 'floating') {
+                queueMicrotask(() => {
+                    const floatingGroup = this.accessor.floatingGroups.find((group) => group.group === panel.api.group);
+                    if (!floatingGroup) {
+                        return;
+                    }
+                    const element = floatingGroup.overlay.element;
+                    const update = () => {
+                        const level = Number(element.getAttribute('aria-level'));
+                        focusContainer.style.zIndex = `${DEFAULT_OVERLAY_Z_INDEX + level * 2 + 1}`;
+                    };
+                    const observer = new MutationObserver(() => {
+                        update();
+                    });
+                    observerDisposable.value = Disposable.from(() => 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
+            }
+        };
+        const disposable = new 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
@@ -89,7 +119,7 @@ export class OverlayRenderContainer extends CompositeDisposable {
             onDragOver: (e) => {
                 referenceContainer.dropTarget.dnd.onDragOver(e);
             },
-        }), panel.api.onDidVisibilityChange((event) => {
+        }), panel.api.onDidVisibilityChange(() => {
             /**
              * 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
@@ -101,6 +131,8 @@ export class OverlayRenderContainer extends CompositeDisposable {
                 return;
             }
             resize();
+        }), panel.api.onDidLocationChange(() => {
+            correctLayerPosition();
         }));
         this.map[panel.api.id].destroy = Disposable.from(() => {
             var _a;
@@ -109,6 +141,7 @@ export class OverlayRenderContainer extends CompositeDisposable {
             }
             (_a = focusContainer.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(focusContainer);
         });
+        correctLayerPosition();
         queueMicrotask(() => {
             if (this.isDisposed) {
                 return;

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

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

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

@@ -103,6 +103,7 @@ export declare class PaneviewComponent extends Resizable implements IPaneviewCom
     readonly onDidAddView: Event<PaneviewPanel>;
     private readonly _onDidRemoveView;
     readonly onDidRemoveView: Event<PaneviewPanel>;
+    private classNames;
     get id(): string;
     get panels(): PaneviewPanel[];
     set paneview(value: Paneview);
@@ -112,7 +113,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/esm/paneview/paneviewComponent.js

@@ -8,6 +8,7 @@ import { DraggablePaneviewPanel, } from './draggablePaneviewPanel';
 import { DefaultHeader } from './defaultPaneviewHeader';
 import { sequentialNumberGenerator } from '../math';
 import { Resizable } from '../resizable';
+import { toggleClass } from '../dom';
 const nextLayoutId = sequentialNumberGenerator();
 export class PaneFramework extends DraggablePaneviewPanel {
     constructor(options) {
@@ -56,8 +57,9 @@ export class PaneviewComponent extends Resizable {
     get options() {
         return this._options;
     }
-    constructor(options) {
-        super(options.parentElement, options.disableAutoResizing);
+    constructor(parentElement, options) {
+        var _a, _b;
+        super(parentElement, options.disableAutoResizing);
         this._id = nextLayoutId.next();
         this._disposable = new MutableDisposable();
         this._viewDisposables = new Map();
@@ -71,7 +73,12 @@ export class PaneviewComponent extends Resizable {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
+        this.classNames = [];
         this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+        this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+        for (const className of this.classNames) {
+            toggleClass(this.element, className, true);
+        }
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -93,6 +100,16 @@ export class PaneviewComponent extends Resizable {
         //noop
     }
     updateOptions(options) {
+        var _a, _b;
+        if ('className' in options) {
+            for (const className of this.classNames) {
+                toggleClass(this.element, className, false);
+            }
+            this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+            for (const className of this.classNames) {
+                toggleClass(this.element, className, true);
+            }
+        }
         this._options = Object.assign(Object.assign({}, this.options), options);
     }
     addPanel(options) {

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

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

package/dist/esm/splitview/splitview.js

@@ -2,7 +2,7 @@
  * Accreditation: This file is largly based upon the MIT licenced VSCode sourcecode found at:
  * https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview
  *--------------------------------------------------------------------------------------------*/
-import { removeClasses, addClasses, toggleClass, getElementsByTagName, } from '../dom';
+import { removeClasses, addClasses, toggleClass, disableIframePointEvents, } from '../dom';
 import { Emitter } from '../events';
 import { pushToStart, pushToEnd, firstIndex } from '../array';
 import { range, clamp } from '../math';
@@ -359,13 +359,7 @@ export class Splitview {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
-                const iframes = [
-                    ...getElementsByTagName('iframe'),
-                    ...getElementsByTagName('webview'),
-                ];
-                for (const iframe of iframes) {
-                    iframe.style.pointerEvents = 'none';
-                }
+                const iframes = disableIframePointEvents();
                 const start = this._orientation === Orientation.HORIZONTAL
                     ? event.clientX
                     : event.clientY;
@@ -427,9 +421,7 @@ export class Splitview {
                     for (const item of this.viewItems) {
                         item.enabled = true;
                     }
-                    for (const iframe of iframes) {
-                        iframe.style.pointerEvents = 'auto';
-                    }
+                    iframes.release();
                     this.saveProportions();
                     document.removeEventListener('pointermove', onPointerMove);
                     document.removeEventListener('pointerup', end);
@@ -596,29 +588,47 @@ export class Splitview {
         if (this.viewItems.length === 0) {
             return;
         }
-        const sashCount = this.viewItems.length - 1;
-        const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+        const visibleViewItems = this.viewItems.filter((i) => i.visible);
+        const sashCount = Math.max(0, visibleViewItems.length - 1);
+        const marginReducedSize = (this.margin * sashCount) / Math.max(1, visibleViewItems.length);
         let totalLeftOffset = 0;
         const viewLeftOffsets = [];
-        for (let i = 0; i < this.viewItems.length - 1; i++) {
-            totalLeftOffset += this.viewItems[i].size;
-            viewLeftOffsets.push(totalLeftOffset);
-            const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
-            if (this._orientation === Orientation.HORIZONTAL) {
-                this.sashes[i].container.style.left = `${offset}px`;
-                this.sashes[i].container.style.top = `0px`;
+        const sashWidth = 4; // hardcoded in css
+        const runningVisiblePanelCount = this.viewItems.reduce((arr, viewItem, i) => {
+            const flag = viewItem.visible ? 1 : 0;
+            if (i === 0) {
+                arr.push(flag);
             }
-            if (this._orientation === Orientation.VERTICAL) {
-                this.sashes[i].container.style.left = `0px`;
-                this.sashes[i].container.style.top = `${offset}px`;
+            else {
+                arr.push(arr[i - 1] + flag);
             }
-        }
+            return arr;
+        }, []);
+        // calculate both view and cash positions
         this.viewItems.forEach((view, i) => {
-            const size = view.size - marginReducedSize;
-            const offset = i === 0
+            totalLeftOffset += this.viewItems[i].size;
+            viewLeftOffsets.push(totalLeftOffset);
+            const size = view.visible ? view.size - marginReducedSize : 0;
+            const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1);
+            const offset = i === 0 || visiblePanelsBeforeThisView === 0
                 ? 0
                 : viewLeftOffsets[i - 1] +
-                    (i / sashCount) * marginReducedSize;
+                    (visiblePanelsBeforeThisView / sashCount) * marginReducedSize;
+            if (i < this.viewItems.length - 1) {
+                // calculate sash position
+                const newSize = view.visible
+                    ? offset + size - sashWidth / 2 + this.margin / 2
+                    : offset;
+                if (this._orientation === Orientation.HORIZONTAL) {
+                    this.sashes[i].container.style.left = `${newSize}px`;
+                    this.sashes[i].container.style.top = `0px`;
+                }
+                if (this._orientation === Orientation.VERTICAL) {
+                    this.sashes[i].container.style.left = `0px`;
+                    this.sashes[i].container.style.top = `${newSize}px`;
+                }
+            }
+            // calculate view position
             if (this._orientation === Orientation.HORIZONTAL) {
                 view.container.style.width = `${size}px`;
                 view.container.style.left = `${offset}px`;

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

@@ -1,5 +1,5 @@
 import { IDisposable } from '../lifecycle';
-import { IView, LayoutPriority, Orientation, Sizing, Splitview } from './splitview';
+import { IView, LayoutPriority, Orientation, Sizing, Splitview, SplitViewOptions } from './splitview';
 import { SplitviewComponentOptions } from './options';
 import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Event } from '../events';
@@ -31,7 +31,6 @@ export interface AddSplitviewComponentOptions<T extends Parameters = Parameters>
     minimumSize?: number;
     maximumSize?: number;
 }
-export type SplitviewComponentUpdateOptions = Pick<SplitviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents'>;
 export interface ISplitviewComponent extends IDisposable {
     readonly minimumSize: number;
     readonly maximumSize: number;
@@ -43,7 +42,7 @@ export interface ISplitviewComponent extends IDisposable {
     readonly onDidRemoveView: Event<IView>;
     readonly onDidLayoutFromJSON: Event<void>;
     readonly panels: SplitviewPanel[];
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    updateOptions(options: Partial<SplitViewOptions>): void;
     addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel;
     layout(width: number, height: number): void;
     onDidLayoutChange: Event<void>;
@@ -73,6 +72,7 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     readonly onDidRemoveView: Event<IView>;
     private readonly _onDidLayoutChange;
     readonly onDidLayoutChange: Event<void>;
+    private classNames;
     get panels(): SplitviewPanel[];
     get options(): SplitviewComponentOptions;
     get length(): number;
@@ -83,8 +83,8 @@ export declare class SplitviewComponent extends Resizable implements ISplitviewC
     get maximumSize(): number;
     get height(): number;
     get width(): number;
-    constructor(options: SplitviewComponentOptions);
-    updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
+    constructor(parentElement: HTMLElement, options: SplitviewComponentOptions);
+    updateOptions(options: Partial<SplitviewComponentOptions>): void;
     focus(): void;
     movePanel(from: number, to: number): void;
     setVisible(panel: SplitviewPanel, visible: boolean): void;

package/dist/esm/splitview/splitviewComponent.js

@@ -3,6 +3,7 @@ import { Orientation, Sizing, Splitview, } from './splitview';
 import { Emitter } from '../events';
 import { createComponent } from '../panel/componentFactory';
 import { Resizable } from '../resizable';
+import { toggleClass } from '../dom';
 /**
  * A high-level implementation of splitview that works using 'panels'
  */
@@ -44,8 +45,9 @@ export class SplitviewComponent extends Resizable {
             ? this.splitview.size
             : this.splitview.orthogonalSize;
     }
-    constructor(options) {
-        super(options.parentElement, options.disableAutoResizing);
+    constructor(parentElement, options) {
+        var _a, _b;
+        super(parentElement, options.disableAutoResizing);
         this._splitviewChangeDisposable = new MutableDisposable();
         this._panels = new Map();
         this._onDidLayoutfromJSON = new Emitter();
@@ -56,6 +58,11 @@ export class SplitviewComponent extends Resizable {
         this.onDidRemoveView = this._onDidRemoveView.event;
         this._onDidLayoutChange = new Emitter();
         this.onDidLayoutChange = this._onDidLayoutChange.event;
+        this.classNames = [];
+        this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+        for (const className of this.classNames) {
+            toggleClass(this.element, className, true);
+        }
         this._options = options;
         if (!options.components) {
             options.components = {};
@@ -67,6 +74,16 @@ export class SplitviewComponent extends Resizable {
         this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
     }
     updateOptions(options) {
+        var _a, _b;
+        if ('className' in options) {
+            for (const className of this.classNames) {
+                toggleClass(this.element, className, false);
+            }
+            this.classNames = (_b = (_a = options.className) === null || _a === void 0 ? void 0 : _a.split(' ')) !== null && _b !== void 0 ? _b : [];
+            for (const className of this.classNames) {
+                toggleClass(this.element, className, true);
+            }
+        }
         const hasOrientationChanged = typeof options.orientation === 'string' &&
             this.options.orientation !== options.orientation;
         this._options = Object.assign(Object.assign({}, this.options), options);