dockview-core 3.1.1 → 4.0.0

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

@@ -14,6 +14,8 @@ import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
+import { PopupService } from './components/popupService';
+import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 export interface DockviewPopoutGroupOptions {
     /**
      * The position of the popout group
@@ -110,7 +112,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
     readonly orientation: Orientation;
-    readonly gap: number;
     readonly onDidDrop: Event<DockviewDidDropEvent>;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
@@ -163,8 +164,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _deserializer;
     private readonly _api;
     private _options;
-    private watermark;
+    private _watermark;
+    private readonly _themeClassnames;
     readonly overlayRenderContainer: OverlayRenderContainer;
+    readonly popupService: PopupService;
+    readonly rootDropTargetContainer: DropTargetAnchorContainer;
     private readonly _onWillDragPanel;
     readonly onWillDragPanel: Event<TabDragEvent>;
     private readonly _onWillDragGroup;
@@ -196,6 +200,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;
     readonly onDidAddGroup: Event<DockviewGroupPanel>;
+    private readonly _onDidOptionsChange;
+    readonly onDidOptionsChange: Event<void>;
     private readonly _onDidActiveGroupChange;
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
     get orientation(): Orientation;
@@ -205,7 +211,6 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
     get api(): DockviewApi;
-    get gap(): number;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
@@ -262,5 +267,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private createGroupAtLocation;
     private findGroup;
     private orientationAtLocation;
+    private updateDropTargetModel;
+    private updateTheme;
 }
 export {};

package/dist/esm/dockview/dockviewComponent.js

@@ -16,12 +16,15 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
 import { Overlay } from '../overlay/overlay';
-import { addTestId, getDockviewTheme, toggleClass, watchElementResize, } from '../dom';
+import { addTestId, Classnames, getDockviewTheme, toggleClass, watchElementResize, } from '../dom';
 import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, DEFAULT_FLOATING_GROUP_POSITION, } from '../constants';
 import { OverlayRenderContainer, } from '../overlay/overlayRenderContainer';
 import { PopoutWindow } from '../popoutWindow';
 import { StrictEventsSequencing } from './strictEventsSequencing';
+import { PopupService } from './components/popupService';
+import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
+import { themeAbyss } from './theme';
 const DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
@@ -67,14 +70,11 @@ export class DockviewComponent extends BaseGrid {
     get api() {
         return this._api;
     }
-    get gap() {
-        return this.gridview.margin;
-    }
     get floatingGroups() {
         return this._floatingGroups;
     }
     constructor(container, options) {
-        var _a;
+        var _a, _b, _c;
         super(container, {
             proportionalLayout: true,
             orientation: Orientation.HORIZONTAL,
@@ -83,12 +83,12 @@ export class DockviewComponent extends BaseGrid {
                 : undefined,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
-            margin: options.gap,
+            margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
             className: options.className,
         });
         this.nextGroupId = sequentialNumberGenerator();
         this._deserializer = new DefaultDockviewDeserialzier(this);
-        this.watermark = null;
+        this._watermark = null;
         this._onWillDragPanel = new Emitter();
         this.onWillDragPanel = this._onWillDragPanel.event;
         this._onWillDragGroup = new Emitter();
@@ -119,16 +119,22 @@ export class DockviewComponent extends BaseGrid {
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
         this.onDidAddGroup = this._onDidAddGroup.event;
+        this._onDidOptionsChange = new Emitter();
+        this.onDidOptionsChange = this._onDidOptionsChange.event;
         this._onDidActiveGroupChange = new Emitter();
         this.onDidActiveGroupChange = this._onDidActiveGroupChange.event;
         this._moving = false;
+        this.popupService = new PopupService(this.element);
+        this.updateDropTargetModel(options);
+        this._themeClassnames = new Classnames(this.element);
+        this.rootDropTargetContainer = new DropTargetAnchorContainer(this.element, { disabled: true });
         this.overlayRenderContainer = new OverlayRenderContainer(this.gridview.element, this);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         toggleClass(this.element, 'dv-debug', !!options.debug);
         if (options.debug) {
             this.addDisposables(new StrictEventsSequencing(this));
         }
-        this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+        this.addDisposables(this.rootDropTargetContainer, this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this._onDidMaximizedGroupChange, this._onDidOptionsChange, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
             this.updateWatermark();
         }), this.onDidAdd((event) => {
             if (!this._moving) {
@@ -162,7 +168,9 @@ export class DockviewComponent extends BaseGrid {
             }
         }));
         this._options = options;
+        this.updateTheme();
         this._rootDropTarget = new Droptarget(this.element, {
+            className: 'dv-drop-target-edge',
             canDisplayOverlay: (event, position) => {
                 const data = getPanelData();
                 if (data) {
@@ -189,7 +197,8 @@ export class DockviewComponent extends BaseGrid {
                 return firedEvent.isAccepted;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_a = this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
+            overlayModel: (_c = this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
+            getOverrideTarget: () => { var _a; return (_a = this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
@@ -367,6 +376,10 @@ export class DockviewComponent extends BaseGrid {
             popoutContainer.style.overflow = 'hidden';
             popoutContainer.appendChild(gready);
             popoutContainer.appendChild(group.element);
+            const anchor = document.createElement('div');
+            const dropTargetContainer = new DropTargetAnchorContainer(anchor, { disabled: this.rootDropTargetContainer.disabled });
+            popoutContainer.appendChild(anchor);
+            group.model.dropTargetContainer = dropTargetContainer;
             group.model.location = {
                 type: 'popout',
                 getWindow: () => _window.window,
@@ -433,6 +446,8 @@ export class DockviewComponent extends BaseGrid {
                 else if (this.getPanel(group.id)) {
                     group.model.renderContainer =
                         this.overlayRenderContainer;
+                    group.model.dropTargetContainer =
+                        this.rootDropTargetContainer;
                     returnedGroup = group;
                     const alreadyRemoved = !this._popoutGroups.find((p) => p.popoutGroup === group);
                     if (alreadyRemoved) {
@@ -655,7 +670,7 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         super.updateOptions(options);
         if ('floatingGroupBounds' in options) {
             for (const group of this._floatingGroups) {
@@ -679,13 +694,11 @@ export class DockviewComponent extends BaseGrid {
                 group.overlay.setBounds();
             }
         }
-        if ('rootOverlayModel' in options) {
-            this._rootDropTarget.setOverlayModel((_c = options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL);
-        }
-        if ('gap' in options) {
-            this.gridview.margin = (_d = options.gap) !== null && _d !== void 0 ? _d : 0;
-        }
+        this.updateDropTargetModel(options);
         this._options = Object.assign(Object.assign({}, this.options), options);
+        if ('theme' in options) {
+            this.updateTheme();
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     }
     layout(width, height, forceResize) {
@@ -1103,22 +1116,22 @@ export class DockviewComponent extends BaseGrid {
     updateWatermark() {
         var _a, _b;
         if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
-            if (!this.watermark) {
-                this.watermark = this.createWatermarkComponent();
-                this.watermark.init({
+            if (!this._watermark) {
+                this._watermark = this.createWatermarkComponent();
+                this._watermark.init({
                     containerApi: new DockviewApi(this),
                 });
                 const watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 addTestId(watermarkContainer, 'watermark-component');
-                watermarkContainer.appendChild(this.watermark.element);
+                watermarkContainer.appendChild(this._watermark.element);
                 this.gridview.element.appendChild(watermarkContainer);
             }
         }
-        else if (this.watermark) {
-            this.watermark.element.parentElement.remove();
-            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this.watermark = null;
+        else if (this._watermark) {
+            this._watermark.element.parentElement.remove();
+            (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this._watermark = null;
         }
     }
     addGroup(options) {
@@ -1604,4 +1617,36 @@ export class DockviewComponent extends BaseGrid {
             ? rootOrientation
             : orthogonal(rootOrientation);
     }
+    updateDropTargetModel(options) {
+        if ('dndEdges' in options) {
+            this._rootDropTarget.disabled =
+                typeof options.dndEdges === 'boolean' &&
+                    options.dndEdges === false;
+            if (typeof options.dndEdges === 'object' &&
+                options.dndEdges !== null) {
+                this._rootDropTarget.setOverlayModel(options.dndEdges);
+            }
+            else {
+                this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+            }
+        }
+        if ('rootOverlayModel' in options) {
+            this.updateDropTargetModel({ dndEdges: options.dndEdges });
+        }
+    }
+    updateTheme() {
+        var _a, _b;
+        const theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : themeAbyss;
+        this._themeClassnames.setClassNames(theme.className);
+        this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
+        switch (theme.dndOverlayMounting) {
+            case 'absolute':
+                this.rootDropTargetContainer.disabled = false;
+                break;
+            case 'relative':
+            default:
+                this.rootDropTargetContainer.disabled = true;
+                break;
+        }
+    }
 }

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

@@ -13,6 +13,7 @@ import { DockviewDndOverlayEvent } from './options';
 import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 import { Contraints } from '../gridview/gridviewPanel';
+import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 interface GroupMoveEvent {
     groupId: string;
     itemId?: string;
@@ -160,6 +161,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _location;
     private mostRecentlyUsed;
     private _overwriteRenderContainer;
+    private _overwriteDropTargetContainer;
     private readonly _onDidChange;
     readonly onDidChange: Event<IViewSize | undefined>;
     private _width;
@@ -208,6 +210,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     focusContent(): void;
     set renderContainer(value: OverlayRenderContainer | null);
     get renderContainer(): OverlayRenderContainer;
+    set dropTargetContainer(value: DropTargetAnchorContainer | null);
+    get dropTargetContainer(): DropTargetAnchorContainer | null;
     initialize(): void;
     rerender(panel: IDockviewPanel): void;
     indexOf(panel: IDockviewPanel): number;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -156,6 +156,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._overwriteRenderContainer = null;
+        this._overwriteDropTargetContainer = null;
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
         this._width = 0;
@@ -233,6 +234,13 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         var _a;
         return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
     }
+    set dropTargetContainer(value) {
+        this._overwriteDropTargetContainer = value;
+    }
+    get dropTargetContainer() {
+        var _a;
+        return ((_a = this._overwriteDropTargetContainer) !== null && _a !== void 0 ? _a : this.accessor.rootDropTargetContainer);
+    }
     initialize() {
         if (this.options.panels) {
             this.options.panels.forEach((panel) => {
@@ -581,6 +589,25 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         const data = getPanelData();
         if (data && data.viewId === this.accessor.id) {
+            if (type === 'content') {
+                if (data.groupId === this.id) {
+                    // don't allow to drop on self for center position
+                    if (position === 'center') {
+                        return;
+                    }
+                    if (data.panelId === null) {
+                        // don't allow group move to drop anywhere on self
+                        return;
+                    }
+                }
+            }
+            if (type === 'header') {
+                if (data.groupId === this.id) {
+                    if (data.panelId === null) {
+                        return;
+                    }
+                }
+            }
             if (data.panelId === null) {
                 // this is a group move dnd event
                 const { groupId } = data;

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

@@ -1,8 +1,8 @@
 import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from './types';
-import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDisposable } from '../lifecycle';
 import { IDockviewComponent } from './dockviewComponent';
 import { PanelUpdateEvent } from '../panel/types';
+import { TabLocation } from './framework';
 export interface IDockviewPanelModel extends IDisposable {
     readonly contentComponent: string;
     readonly tabComponent?: string;
@@ -11,7 +11,7 @@ export interface IDockviewPanelModel extends IDisposable {
     update(event: PanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void;
+    createTabRenderer(tabLocation: TabLocation): ITabRenderer;
 }
 export declare class DockviewPanelModel implements IDockviewPanelModel {
     private readonly accessor;
@@ -20,11 +20,13 @@ export declare class DockviewPanelModel implements IDockviewPanelModel {
     readonly tabComponent?: string | undefined;
     private readonly _content;
     private readonly _tab;
+    private _params;
+    private _updateEvent;
     get content(): IContentRenderer;
     get tab(): ITabRenderer;
     constructor(accessor: IDockviewComponent, id: string, contentComponent: string, tabComponent?: string | undefined);
+    createTabRenderer(tabLocation: TabLocation): ITabRenderer;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(_group: DockviewGroupPanel, _isPanelVisible: boolean): void;
     layout(width: number, height: number): void;
     update(event: PanelUpdateEvent): void;
     dispose(): void;

package/dist/esm/dockview/dockviewPanelModel.js

@@ -14,12 +14,21 @@ export class DockviewPanelModel {
         this._content = this.createContentComponent(this.id, contentComponent);
         this._tab = this.createTabComponent(this.id, tabComponent);
     }
+    createTabRenderer(tabLocation) {
+        var _a;
+        const cmp = this.createTabComponent(this.id, this.tabComponent);
+        if (this._params) {
+            cmp.init(Object.assign(Object.assign({}, this._params), { tabLocation }));
+        }
+        if (this._updateEvent) {
+            (_a = cmp.update) === null || _a === void 0 ? void 0 : _a.call(cmp, this._updateEvent);
+        }
+        return cmp;
+    }
     init(params) {
+        this._params = params;
         this.content.init(params);
-        this.tab.init(params);
-    }
-    updateParentGroup(_group, _isPanelVisible) {
-        // noop
+        this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
     }
     layout(width, height) {
         var _a, _b;
@@ -27,6 +36,7 @@ export class DockviewPanelModel {
     }
     update(event) {
         var _a, _b, _c, _d;
+        this._updateEvent = event;
         (_b = (_a = this.content).update) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         (_d = (_c = this.tab).update) === null || _d === void 0 ? void 0 : _d.call(_c, event);
     }

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

@@ -10,9 +10,12 @@ export interface IGroupPanelBaseProps<T extends {
     api: DockviewPanelApi;
     containerApi: DockviewApi;
 }
+export type TabLocation = 'header' | 'headerOverflow';
 export type IDockviewPanelHeaderProps<T extends {
     [index: string]: any;
-} = any> = IGroupPanelBaseProps<T>;
+} = any> = IGroupPanelBaseProps<T> & {
+    tabLocation: TabLocation;
+};
 export type IDockviewPanelProps<T extends {
     [index: string]: any;
 } = any> = IGroupPanelBaseProps<T>;

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

@@ -14,6 +14,7 @@ import { IGroupHeaderProps } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
+import { DockviewTheme } from './theme';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: IGroupHeaderProps): void;
@@ -43,18 +44,20 @@ export interface DockviewOptions {
     popoutUrl?: string;
     defaultRenderer?: DockviewPanelRenderer;
     debug?: boolean;
+    dndEdges?: false | DroptargetOverlayModel;
+    /**
+     * @deprecated use `dndEdges` instead. To be removed in a future version.
+     * */
     rootOverlayModel?: DroptargetOverlayModel;
-    locked?: boolean;
     disableDnd?: boolean;
+    locked?: boolean;
     className?: string;
-    /**
-     * Pixel gap between groups
-     */
-    gap?: number;
     /**
      * Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`.
      */
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
+    theme?: DockviewTheme;
+    disableTabsOverflowList?: boolean;
 }
 export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;

package/dist/esm/dockview/options.js

@@ -26,9 +26,11 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         rootOverlayModel: undefined,
         locked: undefined,
         disableDnd: undefined,
-        gap: undefined,
         className: undefined,
         noPanelsOverlay: undefined,
+        dndEdges: undefined,
+        theme: undefined,
+        disableTabsOverflowList: undefined,
     };
     return Object.keys(properties);
 })();

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

@@ -0,0 +1,31 @@
+export interface DockviewTheme {
+    /**
+     *  The name of the theme
+     */
+    name: string;
+    /**
+     * The class name to apply to the theme containing the CSS variables settings.
+     */
+    className: string;
+    /**
+     * The gap between the groups
+     */
+    gap?: number;
+    /**
+     * The mouting position of the overlay shown when dragging a panel. `absolute`
+     * will mount the overlay to root of the dockview component whereas `relative` will mount the overlay to the group container.
+     */
+    dndOverlayMounting?: 'absolute' | 'relative';
+    /**
+     * When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space.
+     */
+    dndPanelOverlay?: 'content' | 'group';
+}
+export declare const themeDark: DockviewTheme;
+export declare const themeLight: DockviewTheme;
+export declare const themeVisualStudio: DockviewTheme;
+export declare const themeAbyss: DockviewTheme;
+export declare const themeDracula: DockviewTheme;
+export declare const themeReplit: DockviewTheme;
+export declare const themeAbyssSpaced: DockviewTheme;
+export declare const themeLightSpaced: DockviewTheme;

package/dist/esm/dockview/theme.js

@@ -0,0 +1,39 @@
+export const themeDark = {
+    name: 'dark',
+    className: 'dockview-theme-dark',
+};
+export const themeLight = {
+    name: 'light',
+    className: 'dockview-theme-light',
+};
+export const themeVisualStudio = {
+    name: 'visualStudio',
+    className: 'dockview-theme-vs',
+};
+export const themeAbyss = {
+    name: 'abyss',
+    className: 'dockview-theme-abyss',
+};
+export const themeDracula = {
+    name: 'dracula',
+    className: 'dockview-theme-dracula',
+};
+export const themeReplit = {
+    name: 'replit',
+    className: 'dockview-theme-replit',
+    gap: 10,
+};
+export const themeAbyssSpaced = {
+    name: 'abyssSpaced',
+    className: 'dockview-theme-abyss-spaced',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+export const themeLightSpaced = {
+    name: 'lightSpaced',
+    className: 'dockview-theme-light-spaced',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};

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

@@ -4,6 +4,7 @@ import { DockviewApi } from '../api/component.api';
 import { Optional } from '../types';
 import { IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
+import { TabLocation } from './framework';
 export interface HeaderPartInitParameters {
     title: string;
 }
@@ -20,9 +21,12 @@ export interface IWatermarkRenderer extends Optional<Omit<IPanel, 'id' | 'init'>
     readonly element: HTMLElement;
     init: (params: WatermarkRendererInitParameters) => void;
 }
+export interface TabPartInitParameters extends GroupPanelPartInitParameters {
+    tabLocation: TabLocation;
+}
 export interface ITabRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;
-    init(parameters: GroupPanelPartInitParameters): void;
+    init(parameters: TabPartInitParameters): void;
 }
 export interface IContentRenderer extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
     readonly element: HTMLElement;

package/dist/esm/dom.d.ts

@@ -47,3 +47,4 @@ export declare class Classnames {
     constructor(element: HTMLElement);
     setClassNames(classNames: string): void;
 }
+export declare function isChildEntirelyVisibleWithinParent(child: HTMLElement, parent: HTMLElement): boolean;

package/dist/esm/dom.js

@@ -252,3 +252,16 @@ export class Classnames {
         }
     }
 }
+export function isChildEntirelyVisibleWithinParent(child, parent) {
+    //
+    const childPosition = getDomNodePagePosition(child);
+    const parentPosition = getDomNodePagePosition(parent);
+    if (childPosition.left < parentPosition.left) {
+        return false;
+    }
+    if (childPosition.left + childPosition.width >
+        parentPosition.left + parentPosition.width) {
+        return false;
+    }
+    return true;
+}

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

@@ -6,6 +6,9 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { IPanel } from '../panel/types';
 import { MovementOptions2 } from '../dockview/options';
 import { Resizable } from '../resizable';
+/**
+ * A direction in which a panel can be moved or placed relative to another panel.
+ */
 export type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
 export declare function toTarget(direction: Direction): Position;
 export interface MaximizedChanged<T extends IGridPanelView> {

package/dist/esm/index.d.ts

@@ -22,6 +22,7 @@ export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
 export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, } from './dockview/framework';
 export * from './dockview/options';
+export * from './dockview/theme';
 export * from './dockview/dockviewPanel';
 export { DefaultTab } from './dockview/components/tab/defaultTab';
 export { DefaultDockviewDeserialzier, IPanelDeserializer, } from './dockview/deserializer';

package/dist/esm/index.js

@@ -20,6 +20,7 @@ export * from './dockview/dockviewGroupPanelModel';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
 export * from './dockview/options';
+export * from './dockview/theme';
 export * from './dockview/dockviewPanel';
 export { DefaultTab } from './dockview/components/tab/defaultTab';
 export { DefaultDockviewDeserialzier, } from './dockview/deserializer';

package/dist/esm/paneview/paneviewComponent.js

@@ -282,6 +282,7 @@ export class PaneviewComponent extends Resizable {
             value.dispose();
         }
         this._viewDisposables.clear();
+        this.element.remove();
         this.paneview.dispose();
     }
 }

package/dist/esm/scrollbar.d.ts

@@ -0,0 +1,12 @@
+import { CompositeDisposable } from './lifecycle';
+export declare class Scrollbar extends CompositeDisposable {
+    private readonly scrollableElement;
+    private readonly _element;
+    private readonly _horizontalScrollbar;
+    private _scrollLeft;
+    private _animationTimer;
+    static MouseWheelSpeed: number;
+    get element(): HTMLElement;
+    constructor(scrollableElement: HTMLElement);
+    private calculateScrollbarStyles;
+}