dockview-core 1.17.2 → 2.1.0

package/dist/esm/gridview/baseComponentGridview.js

@@ -67,6 +67,8 @@ export class BaseGrid extends Resizable {
         this.onDidRemove = this._onDidRemove.event;
         this._onDidAdd = new Emitter();
         this.onDidAdd = this._onDidAdd.event;
+        this._onDidMaximizedChange = new Emitter();
+        this.onDidMaximizedChange = this._onDidMaximizedChange.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._bufferOnDidLayoutChange = new AsapEvent();
@@ -82,7 +84,12 @@ export class BaseGrid extends Resizable {
         this.gridview.locked = !!options.locked;
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
-        this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.gridview.onDidMaximizedNodeChange((event) => {
+            this._onDidMaximizedChange.fire({
+                panel: event.view,
+                isMaximized: event.isMaximized,
+            });
+        }), this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.layout(this.width, this.height, true);
         }), Disposable.from(() => {
             var _a;
@@ -137,9 +144,6 @@ export class BaseGrid extends Resizable {
     hasMaximizedGroup() {
         return this.gridview.hasMaximizedView();
     }
-    get onDidMaximizedGroupChange() {
-        return this.gridview.onDidMaximizedNodeChange;
-    }
     doAddGroup(group, location = [0], size) {
         this.gridview.addView(group, size !== null && size !== void 0 ? size : Sizing.Distribute, location);
         this._onDidAdd.fire(group);

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

@@ -22,7 +22,7 @@ export declare abstract class BasePanelView<T extends PanelApiImpl> extends Comp
     readonly api: T;
     private _height;
     private _width;
-    private _element;
+    private readonly _element;
     protected part?: IFrameworkPart;
     protected _params?: PanelInitParameters;
     protected abstract getComponent(): IFrameworkPart;

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

@@ -8,7 +8,7 @@ export declare class BranchNode extends CompositeDisposable implements IView {
     readonly proportionalLayout: boolean;
     readonly styles: ISplitviewStyles | undefined;
     readonly element: HTMLElement;
-    private splitview;
+    private readonly splitview;
     private _orthogonalSize;
     private _size;
     private _childrenDisposable;

package/dist/esm/gridview/branchNode.js

@@ -107,7 +107,7 @@ export class BranchNode extends CompositeDisposable {
         this._orthogonalSize = orthogonalSize;
         this._size = size;
         this.element = document.createElement('div');
-        this.element.className = 'branch-node';
+        this.element.className = 'dv-branch-node';
         if (!childDescriptors) {
             this.splitview = new Splitview(this.element, {
                 orientation: this.orientation,

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

@@ -77,11 +77,19 @@ export interface INodeDescriptor {
 export interface IViewDeserializer {
     fromJSON: (data: ISerializedLeafNode) => IGridView;
 }
+export interface SerializedNodeDescriptor {
+    location: number[];
+}
 export interface SerializedGridview<T> {
     root: SerializedGridObject<T>;
     width: number;
     height: number;
     orientation: Orientation;
+    maximizedNode?: SerializedNodeDescriptor;
+}
+export interface MaximizedViewChanged {
+    view: IGridView;
+    isMaximized: boolean;
 }
 export declare class Gridview implements IDisposable {
     readonly proportionalLayout: boolean;
@@ -100,7 +108,7 @@ export declare class Gridview implements IDisposable {
     private readonly _onDidViewVisibilityChange;
     readonly onDidViewVisibilityChange: Event<void>;
     private readonly _onDidMaximizedNodeChange;
-    readonly onDidMaximizedNodeChange: Event<void>;
+    readonly onDidMaximizedNodeChange: Event<MaximizedViewChanged>;
     get length(): number;
     get orientation(): Orientation;
     set orientation(orientation: Orientation);

package/dist/esm/gridview/gridview.js

@@ -64,7 +64,7 @@ export function getGridLocation(element) {
     if (!parentElement) {
         throw new Error('Invalid grid element');
     }
-    if (/\bgrid-view\b/.test(parentElement.className)) {
+    if (/\bdv-grid-view\b/.test(parentElement.className)) {
         return [];
     }
     const index = indexInParent(parentElement);
@@ -201,6 +201,7 @@ export class Gridview {
         if (this.hasMaximizedView()) {
             this.exitMaximizedView();
         }
+        serializeBranchNode(this.getView(), this.orientation);
         const hiddenOnMaximize = [];
         function hideAllViewsBut(parent, exclude) {
             for (let i = 0; i < parent.children.length; i++) {
@@ -222,7 +223,10 @@ export class Gridview {
         }
         hideAllViewsBut(this.root, node);
         this._maximizedNode = { leaf: node, hiddenOnMaximize };
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: node.view,
+            isMaximized: true,
+        });
     }
     exitMaximizedView() {
         if (!this._maximizedNode) {
@@ -243,24 +247,51 @@ export class Gridview {
             }
         }
         showViewsInReverseOrder(this.root);
+        const tmp = this._maximizedNode.leaf;
         this._maximizedNode = undefined;
-        this._onDidMaximizedNodeChange.fire();
+        this._onDidMaximizedNodeChange.fire({
+            view: tmp.view,
+            isMaximized: false,
+        });
     }
     serialize() {
+        const maximizedView = this.maximizedView();
+        let maxmizedViewLocation;
+        if (maximizedView) {
+            /**
+             * The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
+             * which is represented as a branch of indices
+             */
+            maxmizedViewLocation = getGridLocation(maximizedView.element);
+        }
         if (this.hasMaximizedView()) {
             /**
-             * do not persist maximized view state
-             * firstly exit any maximized views to ensure the correct dimensions are persisted
+             * the saved layout cannot be in its maxmized state otherwise all of the underlying
+             * view dimensions will be wrong
+             *
+             * To counteract this we temporaily remove the maximized view to compute the serialized output
+             * of the grid before adding back the maxmized view as to not alter the layout from the users
+             * perspective when `.toJSON()` is called
              */
             this.exitMaximizedView();
         }
         const root = serializeBranchNode(this.getView(), this.orientation);
-        return {
+        const resullt = {
             root,
             width: this.width,
             height: this.height,
             orientation: this.orientation,
         };
+        if (maxmizedViewLocation) {
+            resullt.maximizedNode = {
+                location: maxmizedViewLocation,
+            };
+        }
+        if (maximizedView) {
+            // replace any maximzied view that was removed for serialization purposes
+            this.maximizeView(maximizedView);
+        }
+        return resullt;
     }
     dispose() {
         this.disposable.dispose();
@@ -279,6 +310,19 @@ export class Gridview {
         const orientation = json.orientation;
         const height = orientation === Orientation.VERTICAL ? json.height : json.width;
         this._deserialize(json.root, orientation, deserializer, height);
+        /**
+         * The deserialied layout must be positioned through this.layout(...)
+         * before any maximizedNode can be positioned
+         */
+        this.layout(json.width, json.height);
+        if (json.maximizedNode) {
+            const location = json.maximizedNode.location;
+            const [_, node] = this.getNode(location);
+            if (!(node instanceof LeafNode)) {
+                return;
+            }
+            this.maximizeView(node.view);
+        }
     }
     _deserialize(root, orientation, deserializer, orthogonalSize) {
         this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
@@ -414,7 +458,7 @@ export class Gridview {
         this._onDidMaximizedNodeChange = new Emitter();
         this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
         this.element = document.createElement('div');
-        this.element.className = 'grid-view';
+        this.element.className = 'dv-grid-view';
         this._locked = locked !== null && locked !== void 0 ? locked : false;
         this._margin = margin !== null && margin !== void 0 ? margin : 0;
         this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);

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

@@ -49,6 +49,10 @@ export declare abstract class GridviewPanel<T extends GridviewPanelApiImpl = Gri
     get minimumHeight(): number;
     get maximumHeight(): number;
     get maximumWidth(): number;
+    protected __minimumWidth(): number;
+    protected __maximumWidth(): number;
+    protected __minimumHeight(): number;
+    protected __maximumHeight(): number;
     get isActive(): boolean;
     get isVisible(): boolean;
     constructor(id: string, component: string, options?: {

package/dist/esm/gridview/gridviewPanel.js

@@ -9,6 +9,34 @@ export class GridviewPanel extends BasePanelView {
         return this._snap;
     }
     get minimumWidth() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__minimumWidth();
+    }
+    get minimumHeight() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__minimumHeight();
+    }
+    get maximumHeight() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__maximumHeight();
+    }
+    get maximumWidth() {
+        /**
+         * defer to protected function to allow subclasses to override easily.
+         * see https://github.com/microsoft/TypeScript/issues/338
+         */
+        return this.__maximumWidth();
+    }
+    __minimumWidth() {
         const width = typeof this._minimumWidth === 'function'
             ? this._minimumWidth()
             : this._minimumWidth;
@@ -18,7 +46,17 @@ export class GridviewPanel extends BasePanelView {
         }
         return width;
     }
-    get minimumHeight() {
+    __maximumWidth() {
+        const width = typeof this._maximumWidth === 'function'
+            ? this._maximumWidth()
+            : this._maximumWidth;
+        if (width !== this._evaluatedMaximumWidth) {
+            this._evaluatedMaximumWidth = width;
+            this.updateConstraints();
+        }
+        return width;
+    }
+    __minimumHeight() {
         const height = typeof this._minimumHeight === 'function'
             ? this._minimumHeight()
             : this._minimumHeight;
@@ -28,7 +66,7 @@ export class GridviewPanel extends BasePanelView {
         }
         return height;
     }
-    get maximumHeight() {
+    __maximumHeight() {
         const height = typeof this._maximumHeight === 'function'
             ? this._maximumHeight()
             : this._maximumHeight;
@@ -38,16 +76,6 @@ export class GridviewPanel extends BasePanelView {
         }
         return height;
     }
-    get maximumWidth() {
-        const width = typeof this._maximumWidth === 'function'
-            ? this._maximumWidth()
-            : this._maximumWidth;
-        if (width !== this._evaluatedMaximumWidth) {
-            this._evaluatedMaximumWidth = width;
-            this.updateConstraints();
-        }
-        return width;
-    }
     get isActive() {
         return this.api.isActive;
     }

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

@@ -11,7 +11,7 @@ export declare class LeafNode implements IView {
     }>;
     private _size;
     private _orthogonalSize;
-    private _disposable;
+    private readonly _disposable;
     private get minimumWidth();
     private get maximumWidth();
     private get minimumHeight();

package/dist/esm/index.d.ts

@@ -1,20 +1,19 @@
-export * from './dnd/dataTransfer';
+export { getPaneData, getPanelData, PaneTransfer, PanelTransfer, } from './dnd/dataTransfer';
 /**
  * Events, Emitters and Disposables are very common concepts that many codebases will contain, however we need
  * to export them for dockview framework packages to use.
  * To be a good citizen these are exported with a `Dockview` prefix to prevent accidental use by others.
  */
 export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
-export { IDisposable as IDockviewDisposable, MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
+export { IDisposable as DockviewIDisposable, MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
 export * from './panel/types';
-export * from './panel/componentFactory';
 export * from './splitview/splitview';
 export { SplitviewComponentOptions, PanelViewInitParameters, } from './splitview/options';
 export * from './paneview/paneview';
 export * from './gridview/gridview';
 export { GridviewComponentOptions } from './gridview/options';
 export * from './gridview/baseComponentGridview';
-export * from './paneview/draggablePaneviewPanel';
+export { DraggablePaneviewPanel, PaneviewDropEvent, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
 export * from './dockview/dockviewGroupPanelModel';
@@ -24,24 +23,24 @@ export * from './dockview/dockviewGroupPanel';
 export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/dockviewPanel';
-export * from './dockview/components/tab/defaultTab';
-export * from './dockview/deserializer';
+export { DefaultTab } from './dockview/components/tab/defaultTab';
+export { DefaultDockviewDeserialzier, IPanelDeserializer, } from './dockview/deserializer';
 export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
 export { PaneviewComponentOptions } from './paneview/options';
 export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
+export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './dockview/types';
 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';
-export { TitleEvent, RendererChangedEvent, DockviewPanelApi, } from './api/dockviewPanelApi';
+export { TitleEvent, RendererChangedEvent, DockviewPanelApi, DockviewPanelMoveParams, } from './api/dockviewPanelApi';
 export { PanelSizeEvent, PanelConstraintChangeEvent, SplitviewPanelApi, } from './api/splitviewPanelApi';
 export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
-export { DockviewGroupPanelApi, DockviewGroupPanelFloatingChangeEvent, } from './api/dockviewGroupPanelApi';
+export { DockviewGroupPanelApi, DockviewGroupPanelFloatingChangeEvent, DockviewGroupMoveParams, } 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

@@ -1,4 +1,4 @@
-export * from './dnd/dataTransfer';
+export { getPaneData, getPanelData, PaneTransfer, PanelTransfer, } from './dnd/dataTransfer';
 /**
  * Events, Emitters and Disposables are very common concepts that many codebases will contain, however we need
  * to export them for dockview framework packages to use.
@@ -7,12 +7,11 @@ export * from './dnd/dataTransfer';
 export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
 export { MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle';
 export * from './panel/types';
-export * from './panel/componentFactory';
 export * from './splitview/splitview';
 export * from './paneview/paneview';
 export * from './gridview/gridview';
 export * from './gridview/baseComponentGridview';
-export * from './paneview/draggablePaneviewPanel';
+export { DraggablePaneviewPanel, } from './paneview/draggablePaneviewPanel';
 export * from './dockview/components/panel/content';
 export * from './dockview/components/tab/tab';
 export * from './dockview/dockviewGroupPanelModel';
@@ -20,14 +19,14 @@ export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
 export * from './dockview/options';
 export * from './dockview/dockviewPanel';
-export * from './dockview/components/tab/defaultTab';
-export * from './dockview/deserializer';
+export { DefaultTab } from './dockview/components/tab/defaultTab';
+export { DefaultDockviewDeserialzier, } from './dockview/deserializer';
 export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
 export * from './gridview/gridviewPanel';
-export * from './splitview/splitviewPanel';
+export { SplitviewPanel } from './splitview/splitviewPanel';
 export * from './paneview/paneviewPanel';
 export * from './dockview/types';
 export { positionToDirection, directionToPosition, } from './dnd/droptarget';

package/dist/esm/overlay/overlay.d.ts

@@ -3,24 +3,27 @@ import { CompositeDisposable } from '../lifecycle';
 import { AnchoredBox } from '../types';
 export declare class Overlay extends CompositeDisposable {
     private readonly options;
-    private _element;
+    private readonly _element;
     private readonly _onDidChange;
     readonly onDidChange: Event<void>;
     private readonly _onDidChangeEnd;
     readonly onDidChangeEnd: Event<void>;
-    private static MINIMUM_HEIGHT;
-    private static MINIMUM_WIDTH;
+    private static readonly MINIMUM_HEIGHT;
+    private static readonly MINIMUM_WIDTH;
     private verticalAlignment;
     private horiziontalAlignment;
+    private _isVisible;
     set minimumInViewportWidth(value: number | undefined);
     set minimumInViewportHeight(value: number | undefined);
     get element(): HTMLElement;
+    get isVisible(): boolean;
     constructor(options: AnchoredBox & {
         container: HTMLElement;
         content: HTMLElement;
         minimumInViewportWidth?: number;
         minimumInViewportHeight?: number;
     });
+    setVisible(isVisible: boolean): void;
     bringToFront(): void;
     setBounds(bounds?: Partial<AnchoredBox>): void;
     toJSON(): AnchoredBox;

package/dist/esm/overlay/overlay.js

@@ -35,6 +35,9 @@ export class Overlay extends CompositeDisposable {
     get element() {
         return this._element;
     }
+    get isVisible() {
+        return this._isVisible;
+    }
     constructor(options) {
         super();
         this.options = options;
@@ -45,6 +48,7 @@ export class Overlay extends CompositeDisposable {
         this.onDidChangeEnd = this._onDidChangeEnd.event;
         this.addDisposables(this._onDidChange, this._onDidChangeEnd);
         this._element.className = 'dv-resize-container';
+        this._isVisible = true;
         this.setupResize('top');
         this.setupResize('bottom');
         this.setupResize('left');
@@ -59,6 +63,13 @@ export class Overlay extends CompositeDisposable {
         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);
     }
+    setVisible(isVisible) {
+        if (isVisible === this.isVisible) {
+            return;
+        }
+        this._isVisible = isVisible;
+        toggleClass(this.element, 'dv-hidden', !this.isVisible);
+    }
     bringToFront() {
         arialLevelTracker.push(this._element);
     }

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

@@ -9,7 +9,7 @@ export declare class DefaultHeader extends CompositeDisposable implements IPaneH
     private readonly _element;
     private readonly _content;
     private readonly _expander;
-    private apiRef;
+    private readonly apiRef;
     get element(): HTMLElement;
     constructor();
     init(params: PanePanelInitParameter & {

package/dist/esm/paneview/defaultPaneviewHeader.js

@@ -11,12 +11,14 @@ export class DefaultHeader extends CompositeDisposable {
         this._expandedIcon = createExpandMoreButton();
         this._collapsedIcon = createChevronRightButton();
         this.disposable = new MutableDisposable();
-        this.apiRef = { api: null };
+        this.apiRef = {
+            api: null,
+        };
         this._element = document.createElement('div');
-        this.element.className = 'default-header';
+        this.element.className = 'dv-default-header';
         this._content = document.createElement('span');
         this._expander = document.createElement('div');
-        this._expander.className = 'dockview-pane-header-icon';
+        this._expander.className = 'dv-pane-header-icon';
         this.element.appendChild(this._expander);
         this.element.appendChild(this._content);
         this.addDisposables(addDisposableListener(this._element, 'click', () => {

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

@@ -7,10 +7,10 @@ interface PaneItem {
     disposable: IDisposable;
 }
 export declare class Paneview extends CompositeDisposable implements IDisposable {
-    private element;
-    private splitview;
+    private readonly element;
+    private readonly splitview;
     private paneItems;
-    private _orientation;
+    private readonly _orientation;
     private animationTimer;
     private skipAnimation;
     private readonly _onDidChange;

package/dist/esm/paneview/paneview.js

@@ -33,7 +33,7 @@ export class Paneview extends CompositeDisposable {
         this.onDidChange = this._onDidChange.event;
         this._orientation = (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.VERTICAL;
         this.element = document.createElement('div');
-        this.element.className = 'pane-container';
+        this.element.className = 'dv-pane-container';
         container.appendChild(this.element);
         this.splitview = new Splitview(this.element, {
             orientation: this._orientation,
@@ -125,10 +125,10 @@ export class Paneview extends CompositeDisposable {
             clearTimeout(this.animationTimer);
             this.animationTimer = undefined;
         }
-        addClasses(this.element, 'animated');
+        addClasses(this.element, 'dv-animated');
         this.animationTimer = setTimeout(() => {
             this.animationTimer = undefined;
-            removeClasses(this.element, 'animated');
+            removeClasses(this.element, 'dv-animated');
         }, 200);
     }
     dispose() {

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

@@ -90,8 +90,8 @@ export interface IPaneviewComponent extends IDisposable {
 export declare class PaneviewComponent extends Resizable implements IPaneviewComponent {
     private readonly _id;
     private _options;
-    private _disposable;
-    private _viewDisposables;
+    private readonly _disposable;
+    private readonly _viewDisposables;
     private _paneview;
     private readonly _onDidLayoutfromJSON;
     readonly onDidLayoutFromJSON: Event<void>;

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

@@ -45,14 +45,14 @@ export interface IPaneviewPanel extends BasePanelViewExported<PaneviewPanelApiIm
 }
 export declare abstract class PaneviewPanel extends BasePanelView<PaneviewPanelApiImpl> implements IPaneview, IPaneviewPanel {
     private readonly headerComponent;
-    private _onDidChangeExpansionState;
+    private readonly _onDidChangeExpansionState;
     onDidChangeExpansionState: Event<boolean>;
     private readonly _onDidChange;
     readonly onDidChange: Event<{
         size?: number;
         orthogonalSize?: number;
     }>;
-    private headerSize;
+    private readonly headerSize;
     private _orthogonalSize;
     private _size;
     private _minimumBodySize;

package/dist/esm/paneview/paneviewPanel.js

@@ -71,7 +71,7 @@ export class PaneviewPanel extends BasePanelView {
         this._headerVisible = isHeaderVisible;
         this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
         this._orientation = orientation;
-        this.element.classList.add('pane');
+        this.element.classList.add('dv-pane');
         this.addDisposables(this.api.onWillVisibilityChange((event) => {
             const { isVisible } = event;
             const { accessor } = this._params;
@@ -168,14 +168,14 @@ export class PaneviewPanel extends BasePanelView {
     renderOnce() {
         this.header = document.createElement('div');
         this.header.tabIndex = 0;
-        this.header.className = 'pane-header';
+        this.header.className = 'dv-pane-header';
         this.header.style.height = `${this.headerSize}px`;
         this.header.style.lineHeight = `${this.headerSize}px`;
         this.header.style.minHeight = `${this.headerSize}px`;
         this.header.style.maxHeight = `${this.headerSize}px`;
         this.element.appendChild(this.header);
         this.body = document.createElement('div');
-        this.body.className = 'pane-body';
+        this.body.className = 'dv-pane-body';
         this.element.appendChild(this.body);
     }
     // TODO slightly hacky by-pass of the component to create a body and header component