dockview-core 6.2.2 → 6.3.0

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 6.2.2
+ * @version 6.3.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -472,8 +472,10 @@ function quasiPreventDefault(event) {
 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');
@@ -481,6 +483,10 @@ 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 {
@@ -491,11 +497,16 @@ 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);
     }
 }
 function getDomNodePagePosition(domNode) {
@@ -5487,19 +5498,41 @@ 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: () => {
@@ -5532,6 +5565,12 @@ 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;
@@ -6113,7 +6152,7 @@ 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');
@@ -6211,7 +6250,7 @@ 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) {
@@ -7604,11 +7643,15 @@ 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;
@@ -7619,6 +7662,12 @@ 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.
@@ -8460,6 +8509,7 @@ const PROPERTY_KEYS_DOCKVIEW = (() => {
         disableFloatingGroups: undefined,
         floatingGroupBounds: undefined,
         popoutUrl: undefined,
+        nonce: undefined,
         defaultRenderer: undefined,
         defaultHeaderPosition: undefined,
         debug: undefined,
@@ -8475,6 +8525,7 @@ const PROPERTY_KEYS_DOCKVIEW = (() => {
         getTabContextMenuItems: undefined,
         getTabGroupChipContextMenuItems: undefined,
         createTabGroupChipComponent: undefined,
+        createGroupDragGhostComponent: undefined,
         tabGroupColors: undefined,
         tabGroupAccent: undefined,
     };
@@ -9167,6 +9218,15 @@ 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);
     }
@@ -9997,6 +10057,18 @@ 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;
@@ -10587,6 +10659,11 @@ 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 });
         }
     }
@@ -10747,6 +10824,14 @@ 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);
@@ -11666,7 +11751,9 @@ 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
@@ -12856,6 +12943,7 @@ 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();
@@ -12961,6 +13049,14 @@ 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();
@@ -13057,7 +13153,7 @@ 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
@@ -13092,6 +13188,7 @@ 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();
@@ -13509,7 +13606,7 @@ 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) {
@@ -13550,8 +13647,19 @@ 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) {
@@ -13977,7 +14085,23 @@ 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
@@ -13990,6 +14114,7 @@ class DockviewComponent extends BaseGrid {
                         });
                         resolve();
                     }, index * DESERIALIZATION_POPOUT_DELAY_MS); // 100ms delay between each popup
+                    this._popoutRestorationCleanups.add(cleanup);
                 });
                 popoutPromises.push(popoutPromise);
             });
@@ -14520,8 +14645,11 @@ 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], {
@@ -14529,7 +14657,8 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dockview-core",
-    "version": "6.2.2",
+    "version": "6.3.0",
     "description": "Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript",
     "keywords": [
         "splitview",