dockview-react 8.4.0 → 8.4.1

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.4.0
+ * @version 8.4.1
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -51,7 +51,7 @@ react_dom = __toESM(react_dom);
 //#region ../dockview-core/dist/package/main.esm.mjs
 /**
 	* dockview-core
-	* @version 8.4.0
+	* @version 8.4.1
 	* @link https://github.com/dockview/dockview
 	* @license MIT
 	*/
@@ -372,21 +372,29 @@ react_dom = __toESM(react_dom);
 		}
 	};
 	function watchElementResize(element, cb) {
+		const pendingFrames = /* @__PURE__ */ new Set();
 		const observer = new ResizeObserver((entires) => {
 			/**
 			* Fast browser window resize produces Error: ResizeObserver loop limit exceeded.
 			* The error isn't visible in browser console, doesn't affect functionality, but degrades performance.
 			* See https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/58701523#58701523
 			*/
-			requestAnimationFrame(() => {
+			let ran = false;
+			let frame;
+			frame = requestAnimationFrame(() => {
+				ran = true;
+				if (frame !== void 0) pendingFrames.delete(frame);
 				const firstEntry = entires[0];
 				cb(firstEntry);
 			});
+			if (!ran) pendingFrames.add(frame);
 		});
 		observer.observe(element);
 		return { dispose: () => {
 			observer.unobserve(element);
 			observer.disconnect();
+			for (const frame of pendingFrames) cancelAnimationFrame(frame);
+			pendingFrames.clear();
 		} };
 	}
 	const removeClasses = (element, ...classes) => {
@@ -10089,16 +10097,21 @@ react_dom = __toESM(react_dom);
 					y: event.clientY,
 					zIndex: (relativeParent === null || relativeParent === void 0 ? void 0 : relativeParent.style.zIndex) ? `calc(${relativeParent.style.zIndex} * 2)` : void 0
 				};
-				const context = this.createOverflowRenderContext(root, anchor);
+				const { context, rowRenderers } = this.createOverflowRenderContext(root, anchor);
 				const advancedOverflow = this.accessor.advancedOverflowService;
-				if (advancedOverflow) advancedOverflow.renderOverflow({
-					group: this.group,
-					overflowTabs: [...this._overflowTabs],
-					overflowTabGroups: [...this._overflowTabGroups],
-					pinnedOverflowTabs: [...this._overflowPinnedTabs],
-					context
-				});
-				else context.open(this.renderFreeOverflowList(context));
+				try {
+					if (advancedOverflow) advancedOverflow.renderOverflow({
+						group: this.group,
+						overflowTabs: [...this._overflowTabs],
+						overflowTabGroups: [...this._overflowTabGroups],
+						pinnedOverflowTabs: [...this._overflowPinnedTabs],
+						context
+					});
+					else context.open(this.renderFreeOverflowList(context));
+				} catch (err) {
+					rowRenderers.dispose();
+					throw err;
+				}
 			}));
 		}
 		/**
@@ -10119,6 +10132,7 @@ react_dom = __toESM(react_dom);
 				if (overflowGroupSet.has(tg.id)) for (const pid of tg.panelIds) panelToGroup.set(pid, tg);
 			}
 			const popup = () => this.accessor.getPopupServiceForGroup(this.group);
+			const rowRenderers = new CompositeDisposable();
 			const buildGroupHeader = (tg) => {
 				const groupHeader = document.createElement("div");
 				groupHeader.className = "dv-tabs-overflow-group-header";
@@ -10148,69 +10162,87 @@ react_dom = __toESM(react_dom);
 				return groupHeader;
 			};
 			return {
-				overflowGroupIdForPanel: (panelId) => {
-					var _panelToGroup$get;
-					return (_panelToGroup$get = panelToGroup.get(panelId)) === null || _panelToGroup$get === void 0 ? void 0 : _panelToGroup$get.id;
-				},
-				buildGroupHeader: (tabGroupId) => {
-					const tg = groupById.get(tabGroupId);
-					if (!tg || !overflowGroupSet.has(tg.id)) return;
-					return buildGroupHeader(tg);
-				},
-				buildPinnedHeader: () => {
-					const header = document.createElement("div");
-					header.className = "dv-tabs-overflow-group-header dv-tabs-overflow-pinned-header";
-					const glyph = createPinButton();
-					glyph.classList.add("dv-tabs-overflow-pinned-icon");
-					header.appendChild(glyph);
-					const labelSpan = document.createElement("span");
-					labelSpan.className = "dv-tabs-overflow-group-label";
-					labelSpan.textContent = "Pinned";
-					header.appendChild(labelSpan);
-					return header;
-				},
-				buildRow: (panelId) => {
-					const panel = this.group.panels.find((p) => p.id === panelId);
-					if (!panel) return;
-					const tab = this.tabs.tabs.find((t) => t.panel.id === panelId);
-					const tg = panelToGroup.get(panelId);
-					const child = panel.view.createTabRenderer("headerOverflow").element;
-					const wrapper = document.createElement("div");
-					toggleClass(wrapper, "dv-tab", true);
-					toggleClass(wrapper, "dv-active-tab", panel.api.isActive);
-					toggleClass(wrapper, "dv-inactive-tab", !panel.api.isActive);
-					if (tg) toggleClass(wrapper, "dv-tab--grouped", true);
-					const doActivate = () => {
-						if (tg === null || tg === void 0 ? void 0 : tg.collapsed) tg.expand();
-						tab === null || tab === void 0 || tab.element.scrollIntoView({
-							block: "nearest",
-							inline: "nearest"
+				context: {
+					overflowGroupIdForPanel: (panelId) => {
+						var _panelToGroup$get;
+						return (_panelToGroup$get = panelToGroup.get(panelId)) === null || _panelToGroup$get === void 0 ? void 0 : _panelToGroup$get.id;
+					},
+					buildGroupHeader: (tabGroupId) => {
+						const tg = groupById.get(tabGroupId);
+						if (!tg || !overflowGroupSet.has(tg.id)) return;
+						return buildGroupHeader(tg);
+					},
+					buildPinnedHeader: () => {
+						const header = document.createElement("div");
+						header.className = "dv-tabs-overflow-group-header dv-tabs-overflow-pinned-header";
+						const glyph = createPinButton();
+						glyph.classList.add("dv-tabs-overflow-pinned-icon");
+						header.appendChild(glyph);
+						const labelSpan = document.createElement("span");
+						labelSpan.className = "dv-tabs-overflow-group-label";
+						labelSpan.textContent = "Pinned";
+						header.appendChild(labelSpan);
+						return header;
+					},
+					buildRow: (panelId) => {
+						const panel = this.group.panels.find((p) => p.id === panelId);
+						if (!panel) return;
+						const tab = this.tabs.tabs.find((t) => t.panel.id === panelId);
+						const tg = panelToGroup.get(panelId);
+						const tabComponent = panel.view.createTabRenderer("headerOverflow");
+						let rowDisposed = false;
+						const disposeRow = Disposable.from(() => {
+							if (!rowDisposed) {
+								var _tabComponent$dispose;
+								rowDisposed = true;
+								(_tabComponent$dispose = tabComponent.dispose) === null || _tabComponent$dispose === void 0 || _tabComponent$dispose.call(tabComponent);
+							}
 						});
-						this.accessor.withOrigin("user", () => panel.api.setActive());
-					};
-					wrapper.addEventListener("click", (event) => {
-						popup().close();
-						if (event.defaultPrevented) return;
-						doActivate();
-					});
-					wrapper.appendChild(child);
-					return {
-						element: wrapper,
-						panel,
-						activate: () => {
+						if (rowRenderers.isDisposed) disposeRow.dispose();
+						else rowRenderers.addDisposables(disposeRow);
+						const child = tabComponent.element;
+						const wrapper = document.createElement("div");
+						toggleClass(wrapper, "dv-tab", true);
+						toggleClass(wrapper, "dv-active-tab", panel.api.isActive);
+						toggleClass(wrapper, "dv-inactive-tab", !panel.api.isActive);
+						if (tg) toggleClass(wrapper, "dv-tab--grouped", true);
+						const doActivate = () => {
+							if (tg === null || tg === void 0 ? void 0 : tg.collapsed) tg.expand();
+							tab === null || tab === void 0 || tab.element.scrollIntoView({
+								block: "nearest",
+								inline: "nearest"
+							});
+							this.accessor.withOrigin("user", () => panel.api.setActive());
+						};
+						wrapper.addEventListener("click", (event) => {
 							popup().close();
+							if (event.defaultPrevented) return;
 							doActivate();
-						}
-					};
-				},
-				open: (body) => {
-					popup().openPopover(body, anchor);
+						});
+						wrapper.appendChild(child);
+						return {
+							element: wrapper,
+							panel,
+							activate: () => {
+								popup().close();
+								doActivate();
+							},
+							dispose: () => {
+								rowRenderers.removeDisposable(disposeRow);
+								disposeRow.dispose();
+							}
+						};
+					},
+					open: (body) => {
+						popup().openPopover(body, anchor, { onClose: () => rowRenderers.dispose() });
+					},
+					close: () => popup().close(),
+					focusTrigger: () => {
+						root.tabIndex = -1;
+						root.focus();
+					}
 				},
-				close: () => popup().close(),
-				focusTrigger: () => {
-					root.tabIndex = -1;
-					root.focus();
-				}
+				rowRenderers
 			};
 		}
 		/**
@@ -11121,6 +11153,7 @@ react_dom = __toESM(react_dom);
 			this.tabsContainer.setRightActionsElement(element);
 		}
 		setActive(isGroupActive, force = false) {
+			if (this.isDisposed) return;
 			if (!force && this.isActive === isGroupActive) return;
 			this._isGroupActive = isGroupActive;
 			toggleClass(this.container, "dv-active-group", isGroupActive);
@@ -14084,13 +14117,14 @@ react_dom = __toESM(react_dom);
 		* menu passes the `tabGroup`. No-op when no renderer could be created (no
 		* factory configured, or the factory declined the component).
 		*/
-		appendComponentItem(menuEl, item, identity, group, close) {
+		appendComponentItem(menuEl, item, identity, group, close, renderers) {
 			var _this$accessor$option4, _this$accessor$option5;
 			const renderer = (_this$accessor$option4 = (_this$accessor$option5 = this.accessor.options).createContextMenuItemComponent) === null || _this$accessor$option4 === void 0 ? void 0 : _this$accessor$option4.call(_this$accessor$option5, {
 				id: nextContextMenuItemId(),
 				component: item.component
 			});
 			if (!renderer) return;
+			renderers.addDisposables(renderer);
 			renderer.init(_objectSpread2$1(_objectSpread2$1({}, identity), {}, {
 				group,
 				api: this.accessor.api,
@@ -14141,9 +14175,9 @@ react_dom = __toESM(react_dom);
 		* default row; an item carrying none of the three renders nothing. Shared
 		* by both menus, which differ only in `identity`.
 		*/
-		appendConfigItem(menuEl, item, identity, group, close) {
+		appendConfigItem(menuEl, item, identity, group, close, renderers) {
 			if (item.element) menuEl.appendChild(item.element);
-			else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close);
+			else if (item.component) this.appendComponentItem(menuEl, item, identity, group, close, renderers);
 			else if (item.label) menuEl.appendChild(buildItem(item.label, close, () => {
 				var _item$action;
 				return (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item);
@@ -14155,22 +14189,28 @@ react_dom = __toESM(react_dom);
 			event.preventDefault();
 			const popupService = this.accessor.getPopupServiceForGroup(group);
 			const close = () => popupService.close();
+			const renderers = new CompositeDisposable();
 			const menuEl = document.createElement("div");
 			menuEl.className = "dv-context-menu";
 			menuEl.setAttribute("role", "menu");
-			for (const item of items) {
-				if (isItemConfig(item)) {
-					this.appendConfigItem(menuEl, item, { panel }, group, close);
-					continue;
+			try {
+				for (const item of items) {
+					if (isItemConfig(item)) {
+						this.appendConfigItem(menuEl, item, { panel }, group, close, renderers);
+						continue;
+					}
+					const el = this.buildBuiltInTabItem(item, panel, group, close);
+					if (el) menuEl.appendChild(el);
 				}
-				const el = this.buildBuiltInTabItem(item, panel, group, close);
-				if (el) menuEl.appendChild(el);
+			} catch (err) {
+				renderers.dispose();
+				throw err;
 			}
 			popupService.openPopover(menuEl, {
 				x: event.clientX,
 				y: event.clientY,
 				zIndex: popoverZIndexFor(event.target, group)
-			});
+			}, { onClose: () => renderers.dispose() });
 		}
 		showForChip(tabGroup, group, event) {
 			if (!this.accessor.options.getTabGroupChipContextMenuItems) return;
@@ -14184,22 +14224,28 @@ react_dom = __toESM(react_dom);
 			event.preventDefault();
 			const popupService = this.accessor.getPopupServiceForGroup(group);
 			const close = () => popupService.close();
+			const renderers = new CompositeDisposable();
 			const menuEl = document.createElement("div");
 			menuEl.className = "dv-context-menu";
 			menuEl.setAttribute("role", "menu");
-			for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
-			else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
-			else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
-			else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
-			else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
-				group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
-			}));
-			else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close);
+			try {
+				for (const item of items) if (item === "separator") menuEl.appendChild(buildSeparator());
+				else if (item === "rename") menuEl.appendChild(buildRenameInput(tabGroup));
+				else if (item === "colorPicker") menuEl.appendChild(buildColorPicker(tabGroup, this.accessor.tabGroupColorPalette));
+				else if (item === "collapse") menuEl.appendChild(this.buildCollapseItem(tabGroup, close));
+				else if (item === "close") menuEl.appendChild(buildItem("Close All", close, () => {
+					group.panels.filter((p) => tabGroup.containsPanel(p.id)).forEach((p) => p.api.close());
+				}));
+				else if (isItemConfig(item)) this.appendConfigItem(menuEl, item, { tabGroup }, group, close, renderers);
+			} catch (err) {
+				renderers.dispose();
+				throw err;
+			}
 			popupService.openPopover(menuEl, {
 				x: event.clientX,
 				y: event.clientY,
 				zIndex: popoverZIndexFor(event.target, group)
-			});
+			}, { onClose: () => renderers.dispose() });
 		}
 	};
 	const ContextMenuModule = defineModule({
@@ -14483,6 +14529,7 @@ react_dom = __toESM(react_dom);
 			const observerDisposable = new MutableDisposable();
 			const correctLayerPosition = () => {
 				if (panel.api.location.type === "floating") queueMicrotask(() => {
+					if (disposable.isDisposed) return;
 					const floatingGroup = this.accessor.getFloatingWindowForGroup(panel.api.group);
 					if (!floatingGroup) return;
 					const element = floatingGroup.overlay.element;
@@ -14708,7 +14755,7 @@ react_dom = __toESM(react_dom);
 			newRoot.prepend(this._element);
 			this._root = newRoot;
 		}
-		openPopover(element, position) {
+		openPopover(element, position, options) {
 			var _position$zIndex;
 			this.close();
 			const wrapper = this._window.document.createElement("div");
@@ -14723,14 +14770,14 @@ react_dom = __toESM(react_dom);
 			this._element.appendChild(wrapper);
 			this._active = wrapper;
 			const POINTERDOWN_GRACE_MS = 200;
-			this._activeDisposable.value = createDismissableLayer({
+			this._activeDisposable.value = new CompositeDisposable(createDismissableLayer({
 				window: this._window,
 				onDismiss: () => this.close(),
 				elements: () => this._active ? [this._active] : [],
 				keys: ["Enter"],
 				pointerDownGraceMs: POINTERDOWN_GRACE_MS,
 				resize: true
-			});
+			}), (options === null || options === void 0 ? void 0 : options.onClose) ? Disposable.from(options.onClose) : Disposable.NONE);
 			this._window.requestAnimationFrame(() => {
 				shiftAbsoluteElementIntoView(wrapper, this._root);
 			});
@@ -16033,7 +16080,9 @@ react_dom = __toESM(react_dom);
 			this._onWillDrop = new Emitter();
 			this.onWillDrop = this._onWillDrop.event;
 			this._mutationDepth = 0;
+			this._syncMutationDepth = 0;
 			this._pendingLocationChanges = /* @__PURE__ */ new Map();
+			this._openingPopoutWindows = /* @__PURE__ */ new Set();
 			this._origin = "user";
 			this._originDepth = 0;
 			this._onWillMutateLayout = new Emitter();
@@ -16117,6 +16166,10 @@ react_dom = __toESM(react_dom);
 				});
 			}));
 			this.popupService = new PopupService(this.element);
+			this.addDisposables(this.popupService, Disposable.from(() => {
+				for (const opening of this._openingPopoutWindows) opening.dispose();
+				this._openingPopoutWindows.clear();
+			}));
 			this._api = new DockviewApi(this);
 			this.disableResizing = true;
 			this.element.remove();
@@ -16265,9 +16318,15 @@ react_dom = __toESM(react_dom);
 			const popoutWindowDisposable = new CompositeDisposable(_window, _window.onDidClose(() => {
 				popoutWindowDisposable.dispose();
 			}));
+			this._openingPopoutWindows.add(popoutWindowDisposable);
 			const openError = getPopoutUrlError(popoutUrl);
 			return (openError ? Promise.resolve(null) : _window.open()).then((popoutContainer) => {
 				var _options$referenceGro, _options$overridePopo4;
+				this._openingPopoutWindows.delete(popoutWindowDisposable);
+				if (this.isDisposed) {
+					popoutWindowDisposable.dispose();
+					return false;
+				}
 				if (_window.isDisposed) {
 					const failure = _window.failure;
 					if (failure && !this.isDisposed) {
@@ -16461,6 +16520,7 @@ react_dom = __toESM(react_dom);
 				for (const { panel, from } of movedPanels) this.fireDidMovePanel(panel, from);
 				return true;
 			}).catch((err) => {
+				this._openingPopoutWindows.delete(popoutWindowDisposable);
 				console.error("dockview: failed to create popout.", err);
 				return false;
 			});
@@ -17000,6 +17060,7 @@ react_dom = __toESM(react_dom);
 				group.dispose();
 				this._groups.delete(group.id);
 				this._onDidRemoveGroup.fire(group);
+				this.activateFallbackGroupIfRemoved(group);
 			});
 		}
 		setEdgeGroupCollapsed(group, collapsed) {
@@ -17196,6 +17257,7 @@ react_dom = __toESM(react_dom);
 					const record = this._groups.get(temporaryGroup.api.id);
 					this._groups.delete(temporaryGroup.api.id);
 					temporaryGroupDisposables.push(Disposable.from(() => {
+						var _this$headerActionsSe2;
 						/**
 						* Reclaim the group's own resources, never its panels.
 						* Staging is driven by the ids in `data.panels` while
@@ -17213,6 +17275,7 @@ react_dom = __toESM(react_dom);
 							for (const panel of temporaryGroup.panels.slice()) temporaryGroup.model.removePanel(panel);
 						});
 						record === null || record === void 0 || record.disposable.dispose();
+						(_this$headerActionsSe2 = this.headerActionsService) === null || _this$headerActionsSe2 === void 0 || _this$headerActionsSe2.disposeGroup(temporaryGroup);
 						temporaryGroup.dispose();
 					}));
 					return temporaryGroup;
@@ -17877,9 +17940,12 @@ react_dom = __toESM(react_dom);
 		*/
 		mutation(kind, func) {
 			const close = this.openMutation(kind);
+			this._syncMutationDepth++;
 			try {
 				return func();
 			} finally {
+				this._syncMutationDepth--;
+				if (this._syncMutationDepth === 0) this.releaseDisposedActiveGroup();
 				close();
 			}
 		}
@@ -17926,6 +17992,7 @@ react_dom = __toESM(react_dom);
 			return () => {
 				this._mutationDepth--;
 				if (this._mutationDepth === 0) {
+					this.releaseDisposedActiveGroup();
 					this.flushLocationChanges();
 					this._onDidMutateLayout.fire({
 						kind,
@@ -17934,6 +18001,11 @@ react_dom = __toESM(react_dom);
 				}
 			};
 		}
+		/** Covers removals with `skipActive` that disposed the active group. */
+		releaseDisposedActiveGroup() {
+			var _this$_activeGroup;
+			if (!this.isDisposed && ((_this$_activeGroup = this._activeGroup) === null || _this$_activeGroup === void 0 ? void 0 : _this$_activeGroup.model.isDisposed)) this.activateFallbackGroupIfRemoved(this._activeGroup);
+		}
 		/**
 		* Coalesce a panel's `onDidLocationChange` to the end of the enclosing
 		* transaction, or fire it immediately when no transaction is in flight.
@@ -18071,7 +18143,7 @@ react_dom = __toESM(react_dom);
 					skipSetActiveGroup: true
 				}));
 				if (!removedPanel) throw new Error(`dockview: No panel with id ${sourceItemId}`);
-				if (!options.keepEmptyGroups && sourceGroup.model.size === 0) this.doRemoveGroup(sourceGroup, { skipActive: true });
+				if (!options.keepEmptyGroups && sourceGroup.model.size === 0 && sourceGroup !== destinationGroup) this.doRemoveGroup(sourceGroup, { skipActive: true });
 				const isDestinationGroupEmpty = destinationGroup.model.size === 0;
 				this.movingLock(() => {
 					var _options$skipSetActiv;
@@ -18236,6 +18308,7 @@ react_dom = __toESM(react_dom);
 			const from = options.from.group;
 			const to = options.to.group;
 			const target = options.to.position;
+			if (target === "center" && from === to) return;
 			let source = from;
 			let mergedPanels;
 			if (target === "center") {
@@ -19255,6 +19328,7 @@ react_dom = __toESM(react_dom);
 			const queue = [];
 			const width = this.width;
 			const height = this.height;
+			this.paneview.dispose();
 			this.paneview = new Paneview(this.element, {
 				orientation: "VERTICAL",
 				descriptor: {
@@ -19318,7 +19392,11 @@ react_dom = __toESM(react_dom);
 		clear() {
 			for (const [_, value] of this._viewDisposables.entries()) value.dispose();
 			this._viewDisposables.clear();
+			const width = this.width;
+			const height = this.height;
 			this.paneview.dispose();
+			this.paneview = new Paneview(this.element, { orientation: "VERTICAL" });
+			this.layout(width, height);
 		}
 		doAddPanel(panel) {
 			const disposable = new CompositeDisposable(panel.onDidDrop((event) => {