dockview-core 6.2.2 → 6.3.0

package/dist/esm/dockview/dockviewComponent.js

@@ -162,6 +162,7 @@ export class DockviewComponent extends BaseGrid {
         this._floatingGroups = [];
         this._popoutGroups = [];
         this._popoutRestorationPromise = Promise.resolve();
+        this._popoutRestorationCleanups = new Set();
         this._onDidRemoveGroup = new Emitter();
         this.onDidRemoveGroup = this._onDidRemoveGroup.event;
         this._onDidAddGroup = new Emitter();
@@ -267,6 +268,14 @@ export class DockviewComponent extends BaseGrid {
             this._bufferOnDidLayoutChange.fire();
         }), Disposable.from(() => {
             var _a;
+            // Cancel any pending popout-restoration timers scheduled by
+            // fromJSON so they don't open new browser windows after
+            // dispose, and resolve their promises so callers awaiting
+            // popoutRestorationPromise don't hang. See issue #851.
+            for (const cleanup of [...this._popoutRestorationCleanups]) {
+                cleanup();
+            }
+            this._popoutRestorationCleanups.clear();
             // iterate over a copy of the array since .dispose() mutates the original array
             for (const group of [...this._floatingGroups]) {
                 group.dispose();
@@ -366,7 +375,7 @@ export class DockviewComponent extends BaseGrid {
         return (_a = this._popoutPopupServices.get(group.id)) !== null && _a !== void 0 ? _a : this.popupService;
     }
     addPopoutGroup(itemToPopout, options) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         if (itemToPopout instanceof DockviewGroupPanel &&
             itemToPopout.model.location.type === 'edge') {
             // edge groups are permanent structural elements and cannot be popped out
@@ -401,6 +410,7 @@ export class DockviewComponent extends BaseGrid {
             height: box.height,
             onDidOpen: options === null || options === void 0 ? void 0 : options.onDidOpen,
             onWillClose: options === null || options === void 0 ? void 0 : options.onWillClose,
+            nonce: (_f = this.options) === null || _f === void 0 ? void 0 : _f.nonce,
         });
         const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
             popoutWindowDisposable.dispose();
@@ -820,7 +830,7 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     updateOptions(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         super.updateOptions(options);
         if ('floatingGroupBounds' in options) {
             for (const group of this._floatingGroups) {
@@ -861,8 +871,19 @@ export class DockviewComponent extends BaseGrid {
                 group.model.updateHeaderActions();
             }
         }
+        if ('createWatermarkComponent' in options) {
+            if (this._watermark) {
+                this._watermark.element.parentElement.remove();
+                (_d = (_c = this._watermark).dispose) === null || _d === void 0 ? void 0 : _d.call(_c);
+                this._watermark = null;
+            }
+            this.updateWatermark();
+            for (const group of this.groups) {
+                group.model.refreshWatermark();
+            }
+        }
         if ('tabGroupColors' in options || 'tabGroupAccent' in options) {
-            this._tabGroupColorPalette.setEntries((_c = this._options.tabGroupColors) !== null && _c !== void 0 ? _c : DEFAULT_TAB_GROUP_COLORS);
+            this._tabGroupColorPalette.setEntries((_e = this._options.tabGroupColors) !== null && _e !== void 0 ? _e : DEFAULT_TAB_GROUP_COLORS);
             this._tabGroupColorPalette.enabled =
                 this._options.tabGroupAccent !== 'off';
             for (const group of this.groups) {
@@ -1288,7 +1309,23 @@ export class DockviewComponent extends BaseGrid {
                 const group = createGroupFromSerializedState(data);
                 // Add a small delay for each popup after the first to avoid browser popup blocking
                 const popoutPromise = new Promise((resolve) => {
-                    setTimeout(() => {
+                    const cleanup = () => {
+                        this._popoutRestorationCleanups.delete(cleanup);
+                        clearTimeout(handle);
+                        resolve();
+                    };
+                    const handle = setTimeout(() => {
+                        this._popoutRestorationCleanups.delete(cleanup);
+                        // Guard against the component being disposed before
+                        // this timer fires. Under React StrictMode the
+                        // component is mounted -> disposed -> remounted, and
+                        // without this guard the first instance's queued
+                        // restoration would open a second popout window.
+                        // See issue #851.
+                        if (this.isDisposed) {
+                            resolve();
+                            return;
+                        }
                         this.addPopoutGroup(group, {
                             position: position !== null && position !== void 0 ? position : undefined,
                             overridePopoutGroup: gridReferenceGroup
@@ -1301,6 +1338,7 @@ export class DockviewComponent extends BaseGrid {
                         });
                         resolve();
                     }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                    this._popoutRestorationCleanups.add(cleanup);
                 });
                 popoutPromises.push(popoutPromise);
             });
@@ -1831,8 +1869,11 @@ export class DockviewComponent extends BaseGrid {
                      * the source group is a popout group with a single panel
                      *
                      * 1. remove the panel from the group without triggering any events
-                     * 2. remove the popout group
-                     * 3. create a new group at the requested location and add that panel
+                     * 2. remove the popout group — this may cascade-remove the empty
+                     *    reference group it left behind in the main grid (see
+                     *    doRemoveGroup for popout groups), which can shift grid indices
+                     * 3. recompute the target location now that the grid is stable
+                     * 4. create a new group at the recomputed location and add that panel
                      */
                     const popoutGroup = this._popoutGroups.find((group) => group.popoutGroup === sourceGroup);
                     const removedPanel = this.movingLock(() => popoutGroup.popoutGroup.model.removePanel(popoutGroup.popoutGroup.panels[0], {
@@ -1840,7 +1881,8 @@ export class DockviewComponent extends BaseGrid {
                         skipSetActiveGroup: true,
                     }));
                     this.doRemoveGroup(sourceGroup, { skipActive: true });
-                    const newGroup = this.createGroupAtLocation(targetLocation);
+                    const updatedTargetLocation = getRelativeLocation(this.gridview.orientation, getGridLocation(destinationGroup.element), destinationTarget);
+                    const newGroup = this.createGroupAtLocation(updatedTargetLocation);
                     this.movingLock(() => newGroup.model.openPanel(removedPanel, {
                         skipSetActive: true,
                     }));

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

@@ -272,6 +272,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     getTabGroups(): readonly ITabGroup[];
     updateTabGroups(): void;
     refreshTabGroupAccent(): void;
+    refreshWatermark(): void;
     getTabGroupForPanel(panelId: string): ITabGroup | undefined;
     private _findTabGroupForPanel;
     private _removeTabGroupInternal;

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -527,6 +527,15 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     refreshTabGroupAccent() {
         this.tabsContainer.refreshTabGroupAccent();
     }
+    refreshWatermark() {
+        var _a, _b;
+        if (this.watermark) {
+            this.watermark.element.remove();
+            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.watermark = undefined;
+        }
+        this.updateContainer();
+    }
     getTabGroupForPanel(panelId) {
         return this._findTabGroupForPanel(panelId);
     }

package/dist/esm/dockview/dockviewPanel.js

@@ -85,6 +85,11 @@ export class DockviewPanel extends CompositeDisposable {
         const didTitleChange = title !== this.title;
         if (didTitleChange) {
             this._title = title;
+            // keep the view-model's cached init params in sync so that tab
+            // renderers constructed lazily (e.g. the header overflow
+            // dropdown via createTabRenderer) see the updated title
+            // (#914).
+            this.view.setTitle(title);
             this.api._onDidTitleChange.fire({ title });
         }
     }

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

@@ -12,6 +12,7 @@ export interface IDockviewPanelModel extends IDisposable {
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
     createTabRenderer(tabLocation: TabLocation): ITabRenderer;
+    setTitle(title: string): void;
 }
 export declare class DockviewPanelModel implements IDockviewPanelModel {
     private readonly accessor;
@@ -27,6 +28,7 @@ export declare class DockviewPanelModel implements IDockviewPanelModel {
     constructor(accessor: IDockviewComponent, id: string, contentComponent: string, tabComponent?: string | undefined);
     createTabRenderer(tabLocation: TabLocation): ITabRenderer;
     init(params: GroupPanelPartInitParameters): void;
+    setTitle(title: string): void;
     layout(width: number, height: number): void;
     update(event: PanelUpdateEvent): void;
     dispose(): void;

package/dist/esm/dockview/dockviewPanelModel.js

@@ -30,6 +30,14 @@ export class DockviewPanelModel {
         this.content.init(params);
         this.tab.init(Object.assign(Object.assign({}, params), { tabLocation: 'header' }));
     }
+    setTitle(title) {
+        // keep the cached init params in sync so that tab renderers created
+        // lazily after the title changes (e.g. for the header overflow
+        // dropdown) see the current title rather than the stale original.
+        if (this._params) {
+            this._params.title = title;
+        }
+    }
     layout(width, height) {
         var _a, _b;
         (_b = (_a = this.content).layout) === null || _b === void 0 ? void 0 : _b.call(_a, width, height);

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

@@ -55,3 +55,11 @@ export interface ITabGroupChipRenderer {
     }): void;
     dispose(): void;
 }
+export interface IGroupDragGhostRenderer {
+    readonly element: HTMLElement;
+    init(params: {
+        group: IDockviewGroupPanel;
+        api: DockviewApi;
+    }): void;
+    dispose?(): void;
+}

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

@@ -11,12 +11,14 @@ import { GroupOptions } from './dockviewGroupPanelModel';
 import { DockviewGroupDropLocation } from './events';
 import { IDockviewPanel } from './dockviewPanel';
 import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
-import { IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
+import { IGroupDragGhostRenderer, IGroupHeaderProps, ITabGroupChipRenderer } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
 import { AcceptableEvent, IAcceptableEvent } from '../events';
 import { DockviewTheme } from './theme';
 import { ITabGroup } from './tabGroup';
+import { CspNonceProvider } from '../dom';
+export { CspNonceProvider };
 import { DockviewTabGroupColorEntry } from './tabGroupAccent';
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
@@ -89,6 +91,7 @@ export interface DockviewOptions {
         minimumWidthWithinViewport?: number;
     };
     popoutUrl?: string;
+    nonce?: CspNonceProvider;
     defaultRenderer?: DockviewPanelRenderer;
     defaultHeaderPosition?: DockviewHeaderPosition;
     debug?: boolean;
@@ -140,6 +143,15 @@ export interface DockviewOptions {
      * If not provided, the default chip renderer is used.
      */
     createTabGroupChipComponent?: (tabGroup: ITabGroup) => ITabGroupChipRenderer;
+    /**
+     * Factory to create the custom ghost element shown while dragging a
+     * group of panels (the small floating chip that follows the cursor).
+     *
+     * If not provided, a default ghost rendering `"Multiple Panels (N)"`
+     * is used. Supplying a factory replaces the entire default ghost,
+     * enabling i18n / custom visuals.
+     */
+    createGroupDragGhostComponent?: (group: DockviewGroupPanel) => IGroupDragGhostRenderer;
     /**
      * Replace the built-in tab group color palette with a user-defined list.
      *
@@ -292,4 +304,3 @@ export interface MovementOptions extends MovementOptions2 {
     includePanel?: boolean;
     group?: DockviewGroupPanel;
 }
-export {};

package/dist/esm/dockview/options.js

@@ -21,6 +21,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         disableFloatingGroups: undefined,
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
+        nonce: undefined,
         defaultRenderer: undefined,
         defaultHeaderPosition: undefined,
         debug: undefined,
@@ -36,6 +37,7 @@ export const PROPERTY_KEYS_DOCKVIEW = (() => {
         getTabContextMenuItems: undefined,
         getTabGroupChipContextMenuItems: undefined,
         createTabGroupChipComponent: undefined,
+        createGroupDragGhostComponent: undefined,
         tabGroupColors: undefined,
         tabGroupAccent: undefined,
     };

package/dist/esm/dom.d.ts

@@ -24,7 +24,11 @@ export interface IFocusTracker extends IDisposable {
 export declare function trackFocus(element: HTMLElement): IFocusTracker;
 export declare function quasiPreventDefault(event: Event): void;
 export declare function quasiDefaultPrevented(event: Event): boolean;
-export declare function addStyles(document: Document, styleSheetList: StyleSheetList): void;
+export type CspNonceProvider = string | ((targetDocument: Document) => string | undefined);
+export interface AddStylesOptions {
+    nonce?: CspNonceProvider;
+}
+export declare function addStyles(document: Document, styleSheetList: StyleSheetList, options?: AddStylesOptions): void;
 export declare function getDomNodePagePosition(domNode: Element): {
     left: number;
     top: number;

package/dist/esm/dom.js

@@ -132,8 +132,10 @@ export function quasiPreventDefault(event) {
 export function quasiDefaultPrevented(event) {
     return event[QUASI_PREVENT_DEFAULT_KEY];
 }
-export function addStyles(document, styleSheetList) {
+export function addStyles(document, styleSheetList, options = {}) {
     const styleSheets = Array.from(styleSheetList);
+    const { nonce } = options;
+    const resolvedNonce = typeof nonce === 'function' ? nonce(document) : nonce;
     for (const styleSheet of styleSheets) {
         if (styleSheet.href) {
             const link = document.createElement('link');
@@ -141,6 +143,10 @@ export function addStyles(document, styleSheetList) {
             link.type = styleSheet.type;
             link.rel = 'stylesheet';
             document.head.appendChild(link);
+            // The <link> will load and apply its rules in the target
+            // document. Reading cssRules here would duplicate them
+            // (and throws for cross-origin sheets).
+            continue;
         }
         let cssTexts = [];
         try {
@@ -151,11 +157,16 @@ export function addStyles(document, styleSheetList) {
         catch (err) {
             console.warn('dockview: failed to access stylesheet rules due to security restrictions', err);
         }
+        const fragment = document.createDocumentFragment();
         for (const rule of cssTexts) {
             const style = document.createElement('style');
+            if (resolvedNonce) {
+                style.setAttribute('nonce', resolvedNonce);
+            }
             style.appendChild(document.createTextNode(rule));
-            document.head.appendChild(style);
+            fragment.appendChild(style);
         }
+        document.head.appendChild(fragment);
     }
 }
 export function getDomNodePagePosition(domNode) {

package/dist/esm/index.d.ts

@@ -21,7 +21,7 @@ export { DockviewWillShowOverlayLocationEvent, DockviewTabGroupChangeEvent, Dock
 export { TabDragEvent, GroupDragEvent, } from './dockview/components/titlebar/tabsContainer';
 export * from './dockview/types';
 export * from './dockview/dockviewGroupPanel';
-export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, } from './dockview/framework';
+export { IGroupPanelBaseProps, IDockviewPanelHeaderProps, IDockviewPanelProps, IDockviewHeaderActionsProps, IGroupHeaderProps, IWatermarkPanelProps, DockviewReadyEvent, ITabGroupChipRenderer, IGroupDragGhostRenderer, } from './dockview/framework';
 export * from './dockview/options';
 export * from './dockview/theme';
 export * from './dockview/dockviewPanel';

package/dist/esm/popoutWindow.d.ts

@@ -1,3 +1,4 @@
+import { CspNonceProvider } from './dom';
 import { CompositeDisposable } from './lifecycle';
 import { Box } from './types';
 export type PopoutWindowOptions = {
@@ -10,6 +11,7 @@ export type PopoutWindowOptions = {
         id: string;
         window: Window;
     }) => void;
+    nonce?: CspNonceProvider;
 } & Box;
 /**
  * Reject popout URLs that aren't same-origin http(s). Blocks `javascript:`,

package/dist/esm/popoutWindow.js

@@ -133,7 +133,9 @@ export class PopoutWindow extends CompositeDisposable {
                         const externalDocument = externalWindow.document;
                         externalDocument.title = document.title;
                         externalDocument.body.appendChild(container);
-                        addStyles(externalDocument, window.document.styleSheets);
+                        addStyles(externalDocument, window.document.styleSheets, {
+                            nonce: this.options.nonce,
+                        });
                         /**
                          * beforeunload must be registered after load for reasons I could not determine
                          * otherwise the beforeunload event will not fire when the window is closed