dockview-core 6.2.2 → 6.3.0

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.2.2
+ * @version 6.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -478,8 +478,10 @@
     function quasiDefaultPrevented(event) {
         return event[QUASI_PREVENT_DEFAULT_KEY];
     }
-    function addStyles(document, styleSheetList) {
+    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');
@@ -487,6 +489,10 @@
                 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 {
@@ -497,11 +503,16 @@
             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);
         }
     }
     function getDomNodePagePosition(domNode) {
@@ -5493,19 +5504,41 @@
             const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
             const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
             if (dataTransfer) {
-                const ghostElement = document.createElement('div');
-                ghostElement.style.backgroundColor = bgColor;
-                ghostElement.style.color = color;
-                ghostElement.style.padding = '2px 8px';
-                ghostElement.style.height = '24px';
-                ghostElement.style.fontSize = '11px';
-                ghostElement.style.lineHeight = '20px';
-                ghostElement.style.borderRadius = '12px';
-                ghostElement.style.position = 'absolute';
-                ghostElement.style.pointerEvents = 'none';
-                ghostElement.style.top = '-9999px';
-                ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+                const createGhost = this.accessor.options.createGroupDragGhostComponent;
+                let ghostElement;
+                let customRenderer;
+                if (createGhost) {
+                    customRenderer = createGhost(this.group);
+                    customRenderer.init({
+                        group: this.group,
+                        api: this.accessor.api,
+                    });
+                    ghostElement = customRenderer.element;
+                    ghostElement.style.position = 'absolute';
+                    ghostElement.style.pointerEvents = 'none';
+                    ghostElement.style.top = '-9999px';
+                }
+                else {
+                    ghostElement = document.createElement('div');
+                    ghostElement.style.backgroundColor = bgColor;
+                    ghostElement.style.color = color;
+                    ghostElement.style.padding = '2px 8px';
+                    ghostElement.style.height = '24px';
+                    ghostElement.style.fontSize = '11px';
+                    ghostElement.style.lineHeight = '20px';
+                    ghostElement.style.borderRadius = '12px';
+                    ghostElement.style.position = 'absolute';
+                    ghostElement.style.pointerEvents = 'none';
+                    ghostElement.style.top = '-9999px';
+                    ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+                }
                 addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
+                if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
+                    // addGhostImage removes the element from the DOM on the next
+                    // tick; dispose the framework renderer on the same schedule.
+                    const renderer = customRenderer;
+                    setTimeout(() => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }, 0);
+                }
             }
             return {
                 dispose: () => {
@@ -5538,6 +5571,12 @@
             this.dropTarget = new Droptarget(this._element, {
                 acceptedTargetZones: ['center'],
                 canDisplayOverlay: (event, position) => {
+                    if (this.group.api.locked) {
+                        // Dropping on the void/header space adds the panel
+                        // to this group, which `locked` is meant to prevent
+                        // (both `true` and `'no-drop-target'`).
+                        return false;
+                    }
                     const data = getPanelData();
                     if (data && this.accessor.id === data.viewId) {
                         return true;
@@ -6119,7 +6158,7 @@
             let svg = underline.firstElementChild;
             let path;
             if (!svg || svg.tagName !== 'svg') {
-                underline.innerHTML = '';
+                underline.replaceChildren();
                 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                 svg.style.display = 'block';
                 path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -6217,7 +6256,7 @@
             underline.style.display = '';
             // Clear any SVG content left over from a mode switch
             if (underline.firstElementChild) {
-                underline.innerHTML = '';
+                underline.replaceChildren();
             }
             underline.style.backgroundColor = color;
             if (isVertical) {
@@ -7610,11 +7649,15 @@
                     if (!isInsideRange && !isJustBeforeGroup) {
                         continue;
                     }
-                    if (isGroupDrag) {
+                    if (isGroupDrag && isInsideRange) {
                         // A group cannot be dropped inside another group.
                         // Snap the insertion index to just before or just
                         // after this group based on cursor position relative
-                        // to the group's midpoint.
+                        // to the group's midpoint. Only applies when the
+                        // insertion would land *inside* the group — for
+                        // `isJustBeforeGroup`, the index is already outside
+                        // (immediately left of the group) and is a valid
+                        // drop position, so leave it untouched (issue #1264).
                         const groupMid = (firstIdx + lastIdx + 1) / 2;
                         if (insertionIndex < groupMid) {
                             insertionIndex = firstIdx;
@@ -7625,6 +7668,12 @@
                         // targetTabGroupId stays null
                         break;
                     }
+                    if (isGroupDrag && isJustBeforeGroup) {
+                        // Cursor is just before the group — accept this
+                        // index as-is. Groups can be dropped at the slot
+                        // immediately left of another group's first tab.
+                        break;
+                    }
                     if (isJustBeforeGroup) {
                         // Check whether only the source tab (or source group
                         // tabs) sits between insertionIndex and firstIdx.
@@ -8466,6 +8515,7 @@
             disableFloatingGroups: undefined,
             floatingGroupBounds: undefined,
             popoutUrl: undefined,
+            nonce: undefined,
             defaultRenderer: undefined,
             defaultHeaderPosition: undefined,
             debug: undefined,
@@ -8481,6 +8531,7 @@
             getTabContextMenuItems: undefined,
             getTabGroupChipContextMenuItems: undefined,
             createTabGroupChipComponent: undefined,
+            createGroupDragGhostComponent: undefined,
             tabGroupColors: undefined,
             tabGroupAccent: undefined,
         };
@@ -9173,6 +9224,15 @@
         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);
         }
@@ -10003,6 +10063,18 @@
             }
             return this._group.model.location;
         }
+        get locked() {
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            return this._group.locked;
+        }
+        set locked(value) {
+            if (!this._group) {
+                throw new Error(NOT_INITIALIZED_MESSAGE);
+            }
+            this._group.locked = value;
+        }
         constructor(id, accessor) {
             super(id, '__dockviewgroup__');
             this.accessor = accessor;
@@ -10593,6 +10665,11 @@
             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 });
             }
         }
@@ -10753,6 +10830,14 @@
             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);
@@ -11672,7 +11757,9 @@
                             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
@@ -12862,6 +12949,7 @@
             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();
@@ -12967,6 +13055,14 @@
                 this._bufferOnDidLayoutChange.fire();
             }), exports.DockviewDisposable.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();
@@ -13063,7 +13159,7 @@
             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
@@ -13098,6 +13194,7 @@
                 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();
@@ -13515,7 +13612,7 @@
             }
         }
         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) {
@@ -13556,8 +13653,19 @@
                     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) {
@@ -13983,7 +14091,23 @@
                     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
@@ -13996,6 +14120,7 @@
                             });
                             resolve();
                         }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                        this._popoutRestorationCleanups.add(cleanup);
                     });
                     popoutPromises.push(popoutPromise);
                 });
@@ -14526,8 +14651,11 @@
                          * 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], {
@@ -14535,7 +14663,8 @@
                             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/api/dockviewGroupPanelApi.d.ts

@@ -1,7 +1,7 @@
 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewGroupChangeEvent, DockviewGroupLocation, DockviewGroupPanelLocked } from '../dockview/dockviewGroupPanelModel';
 import { DockviewHeaderPosition } from '../dockview/options';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl, SizeEvent } from './gridviewPanelApi';
@@ -29,6 +29,13 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
      */
     readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     readonly location: DockviewGroupLocation;
+    /**
+     * Whether this group is locked against drop interactions.
+     * - `true`: panels cannot be dropped into the group (center / tabs),
+     *   but the group can still be split from its edges.
+     * - `'no-drop-target'`: all drop zones are disabled for this group.
+     */
+    locked: DockviewGroupPanelLocked;
     /**
      * If you require the Window object
      */
@@ -68,6 +75,8 @@ export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     readonly _onDidCollapsedChange: Emitter<DockviewGroupPanelCollapsedChangeEvent>;
     readonly onDidCollapsedChange: Event<DockviewGroupPanelCollapsedChangeEvent>;
     get location(): DockviewGroupLocation;
+    get locked(): DockviewGroupPanelLocked;
+    set locked(value: DockviewGroupPanelLocked);
     constructor(id: string, accessor: DockviewComponent);
     setSize(event: SizeEvent): void;
     close(): void;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -9,6 +9,18 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         }
         return this._group.model.location;
     }
+    get locked() {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        return this._group.locked;
+    }
+    set locked(value) {
+        if (!this._group) {
+            throw new Error(NOT_INITIALIZED_MESSAGE);
+        }
+        this._group.locked = value;
+    }
     constructor(id, accessor) {
         super(id, '__dockviewgroup__');
         this.accessor = accessor;

package/dist/esm/dnd/groupDragHandler.js

@@ -36,19 +36,41 @@ export class GroupDragHandler extends DragHandler {
         const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
         const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
         if (dataTransfer) {
-            const ghostElement = document.createElement('div');
-            ghostElement.style.backgroundColor = bgColor;
-            ghostElement.style.color = color;
-            ghostElement.style.padding = '2px 8px';
-            ghostElement.style.height = '24px';
-            ghostElement.style.fontSize = '11px';
-            ghostElement.style.lineHeight = '20px';
-            ghostElement.style.borderRadius = '12px';
-            ghostElement.style.position = 'absolute';
-            ghostElement.style.pointerEvents = 'none';
-            ghostElement.style.top = '-9999px';
-            ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+            const createGhost = this.accessor.options.createGroupDragGhostComponent;
+            let ghostElement;
+            let customRenderer;
+            if (createGhost) {
+                customRenderer = createGhost(this.group);
+                customRenderer.init({
+                    group: this.group,
+                    api: this.accessor.api,
+                });
+                ghostElement = customRenderer.element;
+                ghostElement.style.position = 'absolute';
+                ghostElement.style.pointerEvents = 'none';
+                ghostElement.style.top = '-9999px';
+            }
+            else {
+                ghostElement = document.createElement('div');
+                ghostElement.style.backgroundColor = bgColor;
+                ghostElement.style.color = color;
+                ghostElement.style.padding = '2px 8px';
+                ghostElement.style.height = '24px';
+                ghostElement.style.fontSize = '11px';
+                ghostElement.style.lineHeight = '20px';
+                ghostElement.style.borderRadius = '12px';
+                ghostElement.style.position = 'absolute';
+                ghostElement.style.pointerEvents = 'none';
+                ghostElement.style.top = '-9999px';
+                ghostElement.textContent = `Multiple Panels (${this.group.size})`;
+            }
             addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
+            if (customRenderer === null || customRenderer === void 0 ? void 0 : customRenderer.dispose) {
+                // addGhostImage removes the element from the DOM on the next
+                // tick; dispose the framework renderer on the same schedule.
+                const renderer = customRenderer;
+                setTimeout(() => { var _a; return (_a = renderer.dispose) === null || _a === void 0 ? void 0 : _a.call(renderer); }, 0);
+            }
         }
         return {
             dispose: () => {

package/dist/esm/dockview/components/titlebar/tabGroupIndicator.js

@@ -241,7 +241,7 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
         let svg = underline.firstElementChild;
         let path;
         if (!svg || svg.tagName !== 'svg') {
-            underline.innerHTML = '';
+            underline.replaceChildren();
             svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.style.display = 'block';
             path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
@@ -339,7 +339,7 @@ export class NoneTabGroupIndicator extends BaseTabGroupIndicator {
         underline.style.display = '';
         // Clear any SVG content left over from a mode switch
         if (underline.firstElementChild) {
-            underline.innerHTML = '';
+            underline.replaceChildren();
         }
         underline.style.backgroundColor = color;
         if (isVertical) {

package/dist/esm/dockview/components/titlebar/tabs.js

@@ -987,11 +987,15 @@ export class Tabs extends CompositeDisposable {
                 if (!isInsideRange && !isJustBeforeGroup) {
                     continue;
                 }
-                if (isGroupDrag) {
+                if (isGroupDrag && isInsideRange) {
                     // A group cannot be dropped inside another group.
                     // Snap the insertion index to just before or just
                     // after this group based on cursor position relative
-                    // to the group's midpoint.
+                    // to the group's midpoint. Only applies when the
+                    // insertion would land *inside* the group — for
+                    // `isJustBeforeGroup`, the index is already outside
+                    // (immediately left of the group) and is a valid
+                    // drop position, so leave it untouched (issue #1264).
                     const groupMid = (firstIdx + lastIdx + 1) / 2;
                     if (insertionIndex < groupMid) {
                         insertionIndex = firstIdx;
@@ -1002,6 +1006,12 @@ export class Tabs extends CompositeDisposable {
                     // targetTabGroupId stays null
                     break;
                 }
+                if (isGroupDrag && isJustBeforeGroup) {
+                    // Cursor is just before the group — accept this
+                    // index as-is. Groups can be dropped at the slot
+                    // immediately left of another group's first tab.
+                    break;
+                }
                 if (isJustBeforeGroup) {
                     // Check whether only the source tab (or source group
                     // tabs) sits between insertionIndex and firstIdx.

package/dist/esm/dockview/components/titlebar/voidContainer.js

@@ -27,6 +27,12 @@ export class VoidContainer extends CompositeDisposable {
         this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
+                if (this.group.api.locked) {
+                    // Dropping on the void/header space adds the panel
+                    // to this group, which `locked` is meant to prevent
+                    // (both `true` and `'no-drop-target'`).
+                    return false;
+                }
                 const data = getPanelData();
                 if (data && this.accessor.id === data.viewId) {
                     return true;

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

@@ -262,6 +262,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _popoutGroups;
     private readonly _rootDropTarget;
     private _popoutRestorationPromise;
+    private readonly _popoutRestorationCleanups;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;