dockview-core 1.17.2 → 2.0.0

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -7,30 +7,34 @@ export class DockviewGroupPanel extends GridviewPanel {
     get minimumWidth() {
         var _a;
         const activePanelMinimumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumWidth;
-        return typeof activePanelMinimumWidth === 'number'
-            ? activePanelMinimumWidth
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
+        if (typeof activePanelMinimumWidth === 'number') {
+            return activePanelMinimumWidth;
+        }
+        return super.__minimumWidth();
     }
     get minimumHeight() {
         var _a;
         const activePanelMinimumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.minimumHeight;
-        return typeof activePanelMinimumHeight === 'number'
-            ? activePanelMinimumHeight
-            : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
+        if (typeof activePanelMinimumHeight === 'number') {
+            return activePanelMinimumHeight;
+        }
+        return super.__minimumHeight();
     }
     get maximumWidth() {
         var _a;
         const activePanelMaximumWidth = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumWidth;
-        return typeof activePanelMaximumWidth === 'number'
-            ? activePanelMaximumWidth
-            : Number.MAX_SAFE_INTEGER;
+        if (typeof activePanelMaximumWidth === 'number') {
+            return activePanelMaximumWidth;
+        }
+        return super.__maximumWidth();
     }
     get maximumHeight() {
         var _a;
         const activePanelMaximumHeight = (_a = this.activePanel) === null || _a === void 0 ? void 0 : _a.maximumHeight;
-        return typeof activePanelMaximumHeight === 'number'
-            ? activePanelMaximumHeight
-            : Number.MAX_SAFE_INTEGER;
+        if (typeof activePanelMaximumHeight === 'number') {
+            return activePanelMaximumHeight;
+        }
+        return super.__maximumHeight();
     }
     get panels() {
         return this._model.panels;

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

@@ -143,7 +143,7 @@ export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
 }
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
     private readonly container;
-    private accessor;
+    private readonly accessor;
     id: string;
     private readonly options;
     private readonly groupPanel;
@@ -158,11 +158,12 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _prefixHeaderActions;
     private _location;
     private mostRecentlyUsed;
+    private _overwriteRenderContainer;
     private readonly _onDidChange;
     readonly onDidChange: Event<IViewSize | undefined>;
     private _width;
     private _height;
-    private _panels;
+    private readonly _panels;
     private readonly _panelDisposables;
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
@@ -204,7 +205,6 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
     focusContent(): void;
-    private _overwriteRenderContainer;
     set renderContainer(value: OverlayRenderContainer | null);
     get renderContainer(): OverlayRenderContainer;
     initialize(): void;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -74,7 +74,7 @@ export class WillShowOverlayLocationEvent {
 }
 export class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
-        throw new Error('not supported');
+        throw new Error('dockview: not supported');
     }
     get activePanel() {
         return this._activePanel;
@@ -84,7 +84,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     }
     set locked(value) {
         this._locked = value;
-        toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
+        toggleClass(this.container, 'dv-locked-groupview', value === 'no-drop-target' || value);
     }
     get isActive() {
         return this._isGroupActive;
@@ -155,6 +155,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._locked = false;
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
+        this._overwriteRenderContainer = null;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this._width = 0;
@@ -185,8 +186,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
         this._onUnhandledDragOverEvent = new Emitter();
         this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
-        this._overwriteRenderContainer = null;
-        toggleClass(this.container, 'groupview', true);
+        toggleClass(this.container, 'dv-groupview', true);
         this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
@@ -431,8 +431,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             return;
         }
         this._isGroupActive = isGroupActive;
-        toggleClass(this.container, 'active-group', isGroupActive);
-        toggleClass(this.container, 'inactive-group', !isGroupActive);
+        toggleClass(this.container, 'dv-active-group', isGroupActive);
+        toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
         this.tabsContainer.setActive(this.isActive);
         if (!this._activePanel && this.panels.length > 0) {
             this.doSetActivePanel(this.panels[0]);
@@ -524,7 +524,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     }
     updateContainer() {
         var _a, _b;
-        toggleClass(this.container, 'empty', this.isEmpty);
+        toggleClass(this.container, 'dv-empty', this.isEmpty);
         this.panels.forEach((panel) => panel.runEvents());
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();

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

@@ -37,10 +37,10 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     private _params?;
     private _title;
     private _renderer;
-    private _minimumWidth;
-    private _minimumHeight;
-    private _maximumWidth;
-    private _maximumHeight;
+    private readonly _minimumWidth;
+    private readonly _minimumHeight;
+    private readonly _maximumWidth;
+    private readonly _maximumHeight;
     get params(): Parameters | undefined;
     get title(): string | undefined;
     get group(): DockviewGroupPanel;

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

@@ -7,7 +7,7 @@ export interface IDockviewPanelModel extends IDisposable {
     readonly contentComponent: string;
     readonly tabComponent?: string;
     readonly content: IContentRenderer;
-    readonly tab?: ITabRenderer;
+    readonly tab: ITabRenderer;
     update(event: PanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;

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

@@ -102,10 +102,18 @@ export interface PanelOptions<P extends object = Parameters> {
 type RelativePanel = {
     direction?: Direction;
     referencePanel: string | IDockviewPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 type RelativeGroup = {
     direction?: Direction;
     referenceGroup: string | DockviewGroupPanel;
+    /**
+     * The index to place the panel within a group, only applicable if the placement is within an existing group
+     */
+    index?: number;
 };
 type AbsolutePosition = {
     direction: Omit<Direction, 'within'>;

package/dist/esm/dom.d.ts

@@ -1,5 +1,15 @@
 import { Event as DockviewEvent } from './events';
-import { IDisposable } from './lifecycle';
+import { IDisposable, CompositeDisposable } from './lifecycle';
+export interface OverflowEvent {
+    hasScrollX: boolean;
+    hasScrollY: boolean;
+}
+export declare class OverflowObserver extends CompositeDisposable {
+    private readonly _onDidChange;
+    readonly onDidChange: DockviewEvent<OverflowEvent>;
+    private _value;
+    constructor(el: HTMLElement);
+}
 export declare function watchElementResize(element: HTMLElement, cb: (entry: ResizeObserverEntry) => void): IDisposable;
 export declare const removeClasses: (element: HTMLElement, ...classes: string[]) => void;
 export declare const addClasses: (element: HTMLElement, ...classes: string[]) => void;

package/dist/esm/dom.js

@@ -1,5 +1,19 @@
 import { Emitter, addDisposableListener, addDisposableWindowListener, } from './events';
 import { CompositeDisposable } from './lifecycle';
+export class OverflowObserver extends CompositeDisposable {
+    constructor(el) {
+        super();
+        this._onDidChange = new Emitter();
+        this.onDidChange = this._onDidChange.event;
+        this._value = null;
+        this.addDisposables(this._onDidChange, watchElementResize(el, (entry) => {
+            const hasScrollX = entry.target.scrollWidth > entry.target.clientWidth;
+            const hasScrollY = entry.target.scrollHeight > entry.target.clientHeight;
+            this._value = { hasScrollX, hasScrollY };
+            this._onDidChange.fire(this._value);
+        }));
+    }
+}
 export function watchElementResize(element, cb) {
     const observer = new ResizeObserver((entires) => {
         /**

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.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);
@@ -414,7 +414,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,13 +3,13 @@ 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;
     set minimumInViewportWidth(value: number | undefined);

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