dockview-react 8.4.0 → 8.5.0

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.4.0
+ * @version 8.5.0
  * @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.5.0
 	* @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) => {
@@ -5988,24 +5996,25 @@ react_dom = __toESM(react_dom);
 			else this._element.removeAttribute("aria-labelledby");
 		}
 		renderPanel(panel, options) {
-			var _options$asActive, _this$panel;
-			const doRender = ((_options$asActive = options === null || options === void 0 ? void 0 : options.asActive) !== null && _options$asActive !== void 0 ? _options$asActive : true) || this.panel && this.group.isPanelActive(this.panel);
-			if (((_this$panel = this.panel) === null || _this$panel === void 0 ? void 0 : _this$panel.view.content.element.parentElement) === this._element) {
-				var _this$panel$view$cont, _this$panel$view$cont2;
-				this.panel.view.content.element.remove();
-				(_this$panel$view$cont = (_this$panel$view$cont2 = this.panel.view.content).onHide) === null || _this$panel$view$cont === void 0 || _this$panel$view$cont.call(_this$panel$view$cont2);
+			var _options$asActive;
+			const doRender = ((_options$asActive = options === null || options === void 0 ? void 0 : options.asActive) !== null && _options$asActive !== void 0 ? _options$asActive : true) || this.group.isPanelActive(panel);
+			if (doRender || this.panel === panel) {
+				var _this$panel;
+				if (((_this$panel = this.panel) === null || _this$panel === void 0 ? void 0 : _this$panel.view.content.element.parentElement) === this._element) {
+					var _this$panel$view$cont, _this$panel$view$cont2;
+					this.panel.view.content.element.remove();
+					(_this$panel$view$cont = (_this$panel$view$cont2 = this.panel.view.content).onHide) === null || _this$panel$view$cont === void 0 || _this$panel$view$cont.call(_this$panel$view$cont2);
+				}
+				this.panel = panel;
 			}
-			this.panel = panel;
 			let container;
 			switch (panel.api.renderer) {
 				case "onlyWhenVisible":
 					this.group.renderContainer.detatch(panel);
-					if (this.panel) {
-						if (doRender) {
-							var _this$panel$view$cont3, _this$panel$view$cont4;
-							this._element.appendChild(this.panel.view.content.element);
-							(_this$panel$view$cont3 = (_this$panel$view$cont4 = this.panel.view.content).onShow) === null || _this$panel$view$cont3 === void 0 || _this$panel$view$cont3.call(_this$panel$view$cont4);
-						}
+					if (doRender) {
+						var _panel$view$content$o, _panel$view$content;
+						this._element.appendChild(panel.view.content.element);
+						(_panel$view$content$o = (_panel$view$content = panel.view.content).onShow) === null || _panel$view$content$o === void 0 || _panel$view$content$o.call(_panel$view$content);
 					}
 					container = this._element;
 					break;
@@ -6034,9 +6043,9 @@ react_dom = __toESM(react_dom);
 		closePanel() {
 			if (this.panel) {
 				if (this.panel.api.renderer === "onlyWhenVisible") {
-					var _this$panel$view$cont5, _this$panel$view$cont6;
+					var _this$panel$view$cont3, _this$panel$view$cont4;
 					this.panel.view.content.element.remove();
-					(_this$panel$view$cont5 = (_this$panel$view$cont6 = this.panel.view.content).onHide) === null || _this$panel$view$cont5 === void 0 || _this$panel$view$cont5.call(_this$panel$view$cont6);
+					(_this$panel$view$cont3 = (_this$panel$view$cont4 = this.panel.view.content).onHide) === null || _this$panel$view$cont3 === void 0 || _this$panel$view$cont3.call(_this$panel$view$cont4);
 				}
 			}
 			this.panel = void 0;
@@ -10089,16 +10098,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 +10133,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 +10163,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
 			};
 		}
 		/**
@@ -10987,7 +11020,6 @@ react_dom = __toESM(react_dom);
 				this.rerender(panel);
 			});
 			if (this._activePanel) {
-				this.contentContainer.renderPanel(this._activePanel, { asActive: true });
 				const { width, height } = this.contentDimensions();
 				this._activePanel.layout(width, height);
 			}
@@ -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) => {
@@ -19622,6 +19700,87 @@ react_dom = __toESM(react_dom);
 		*/
 		return typeof component === "function" || !!(component === null || component === void 0 ? void 0 : component.$$typeof);
 	}
+	/**
+	* Calls `onRemoved` once `element` leaves the document. Only its ancestors are
+	* observed, since any removal above it is a child-list change on one of them.
+	*/
+	function watchForRemoval(element, onRemoved) {
+		const parentOf = (node) => node instanceof ShadowRoot ? node.host : node.parentNode;
+		const ancestors = /* @__PURE__ */ new Set();
+		const observer = new MutationObserver((records) => {
+			if (!element.isConnected) {
+				observer.disconnect();
+				onRemoved();
+				return;
+			}
+			for (const record of records) for (const node of record.removedNodes) if (ancestors.has(node)) {
+				observeAncestors();
+				return;
+			}
+		});
+		const observeAncestors = () => {
+			observer.disconnect();
+			ancestors.clear();
+			for (let node = parentOf(element); node; node = parentOf(node)) {
+				ancestors.add(node);
+				observer.observe(node, { childList: true });
+			}
+		};
+		observeAncestors();
+		return Disposable.from(() => observer.disconnect());
+	}
+	const canHideWithoutUnmount = Number.parseInt(react.default.version, 10) >= 18;
+	/**
+	* Creates the instance once and keeps it across effect cleanups that are not
+	* unmounts (`<Activity mode="hidden">`, StrictMode). A real unmount removes the
+	* host before cleanup, so a still-connected host means hidden; the instance is
+	* then disposed only if the host later leaves the document.
+	*/
+	function useKeptInstance(domRef, instanceRef, create) {
+		const removalWatcher = react.default.useRef(void 0);
+		react.default.useEffect(() => {
+			var _removalWatcher$curre, _instanceRef$current;
+			const element = domRef.current;
+			if (!element) return;
+			(_removalWatcher$curre = removalWatcher.current) === null || _removalWatcher$curre === void 0 || _removalWatcher$curre.dispose();
+			removalWatcher.current = void 0;
+			const instance = (_instanceRef$current = instanceRef.current) !== null && _instanceRef$current !== void 0 ? _instanceRef$current : create(element);
+			instanceRef.current = instance;
+			return () => {
+				const dispose = () => {
+					removalWatcher.current = void 0;
+					instanceRef.current = void 0;
+					instance.dispose();
+				};
+				if (canHideWithoutUnmount && element.isConnected && typeof MutationObserver !== "undefined") removalWatcher.current = watchForRemoval(element, dispose);
+				else dispose();
+			};
+		}, []);
+	}
+	/**
+	* Returns a check for option effects: true when the instance already holds the
+	* given values. The first values seen count as applied, since the instance was
+	* created from them, so effect replays skip redundant `updateOptions` calls.
+	*/
+	function useAppliedOptions(instanceRef) {
+		const applied = react.default.useRef({
+			instance: void 0,
+			values: /* @__PURE__ */ new Map()
+		});
+		return react.default.useCallback((values) => {
+			if (applied.current.instance !== instanceRef.current) applied.current = {
+				instance: instanceRef.current,
+				values: /* @__PURE__ */ new Map()
+			};
+			const known = applied.current.values;
+			let unchanged = true;
+			for (const [key, value] of Object.entries(values)) {
+				if (known.has(key) && known.get(key) !== value) unchanged = false;
+				known.set(key, value);
+			}
+			return unchanged;
+		}, [instanceRef]);
+	}
 
 //#endregion
 //#region src/dockview/reactContentPart.ts
@@ -19893,6 +20052,7 @@ react_dom = __toESM(react_dom);
 		const domRef = react.default.useRef(null);
 		const dockviewRef = react.default.useRef(void 0);
 		const [portals, addPortal] = usePortalsLifecycle();
+		const isApplied = useAppliedOptions(dockviewRef);
 		react.default.useImperativeHandle(ref, () => domRef.current, []);
 		const prevProps = react.default.useRef({});
 		react.default.useEffect(() => {
@@ -19902,11 +20062,10 @@ react_dom = __toESM(react_dom);
 				const propValue = props[key];
 				if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
 			});
-			if (dockviewRef.current) dockviewRef.current.updateOptions(changes);
+			if (dockviewRef.current && Object.keys(changes).length > 0) dockviewRef.current.updateOptions(changes);
 			prevProps.current = props;
 		}, PROPERTY_KEYS_DOCKVIEW.map((key) => props[key]));
-		react.default.useEffect(() => {
-			if (!domRef.current) return;
+		useKeptInstance(domRef, dockviewRef, (element) => {
 			const frameworkTabComponents = _objectSpread2({}, props.tabComponents);
 			if (props.defaultTabComponent) frameworkTabComponents[DEFAULT_REACT_TAB] = props.defaultTabComponent;
 			const frameworkOptions = {
@@ -19941,16 +20100,12 @@ react_dom = __toESM(react_dom);
 					return new ReactGroupDragGhostPart(ghostComponent, { addPortal });
 				};
 			}
-			const api = createDockview(domRef.current, _objectSpread2(_objectSpread2({}, coreOptions), frameworkOptions));
-			const { clientWidth, clientHeight } = domRef.current;
+			const api = createDockview(element, _objectSpread2(_objectSpread2({}, coreOptions), frameworkOptions));
+			const { clientWidth, clientHeight } = element;
 			api.layout(clientWidth, clientHeight);
 			if (props.onReady) props.onReady({ api });
-			dockviewRef.current = api;
-			return () => {
-				dockviewRef.current = void 0;
-				api.dispose();
-			};
-		}, []);
+			return api;
+		});
 		react.default.useEffect(() => {
 			if (!dockviewRef.current) return () => {};
 			const disposable = dockviewRef.current.onDidDrop((event) => {
@@ -19970,25 +20125,28 @@ react_dom = __toESM(react_dom);
 			};
 		}, [props.onWillDrop]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ tabGroupChipComponent: props.tabGroupChipComponent })) return;
 			dockviewRef.current.updateOptions({ createTabGroupChipComponent: props.tabGroupChipComponent ? () => {
 				return new ReactTabGroupChipPart(props.tabGroupChipComponent, { addPortal });
 			} : void 0 });
 		}, [props.tabGroupChipComponent]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ groupDragGhostComponent: props.groupDragGhostComponent })) return;
 			dockviewRef.current.updateOptions({ createGroupDragGhostComponent: props.groupDragGhostComponent ? () => {
 				return new ReactGroupDragGhostPart(props.groupDragGhostComponent, { addPortal });
 			} : void 0 });
 		}, [props.groupDragGhostComponent]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ components: props.components })) return;
 			dockviewRef.current.updateOptions({ createComponent: (options) => {
 				return new ReactPanelContentPart(options.id, props.components[options.name], { addPortal });
 			} });
 		}, [props.components]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({
+				tabComponents: props.tabComponents,
+				defaultTabComponent: props.defaultTabComponent
+			})) return;
 			const frameworkTabComponents = _objectSpread2({}, props.tabComponents);
 			if (props.defaultTabComponent) frameworkTabComponents[DEFAULT_REACT_TAB] = props.defaultTabComponent;
 			dockviewRef.current.updateOptions({
@@ -19999,21 +20157,21 @@ react_dom = __toESM(react_dom);
 			});
 		}, [props.tabComponents, props.defaultTabComponent]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ watermarkComponent: props.watermarkComponent })) return;
 			dockviewRef.current.updateOptions({ createWatermarkComponent: props.watermarkComponent ? () => {
 				return new ReactWatermarkPart("watermark", props.watermarkComponent, { addPortal });
 			} : void 0 });
 		}, [props.watermarkComponent]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ rightHeaderActionsComponent: props.rightHeaderActionsComponent })) return;
 			dockviewRef.current.updateOptions({ createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }) });
 		}, [props.rightHeaderActionsComponent]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ leftHeaderActionsComponent: props.leftHeaderActionsComponent })) return;
 			dockviewRef.current.updateOptions({ createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }) });
 		}, [props.leftHeaderActionsComponent]);
 		react.default.useEffect(() => {
-			if (!dockviewRef.current) return;
+			if (!dockviewRef.current || isApplied({ prefixHeaderActionsComponent: props.prefixHeaderActionsComponent })) return;
 			dockviewRef.current.updateOptions({ createPrefixHeaderActionComponent: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }) });
 		}, [props.prefixHeaderActionsComponent]);
 		return /* @__PURE__ */ react.default.createElement("div", {
@@ -20184,6 +20342,7 @@ react_dom = __toESM(react_dom);
 		const domRef = react.default.useRef(null);
 		const splitviewRef = react.default.useRef(void 0);
 		const [portals, addPortal] = usePortalsLifecycle();
+		const isApplied = useAppliedOptions(splitviewRef);
 		react.default.useImperativeHandle(ref, () => domRef.current, []);
 		const prevProps = react.default.useRef({});
 		react.default.useEffect(() => {
@@ -20193,25 +20352,20 @@ react_dom = __toESM(react_dom);
 				const propValue = props[key];
 				if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
 			});
-			if (splitviewRef.current) splitviewRef.current.updateOptions(changes);
+			if (splitviewRef.current && Object.keys(changes).length > 0) splitviewRef.current.updateOptions(changes);
 			prevProps.current = props;
 		}, PROPERTY_KEYS_SPLITVIEW.map((key) => props[key]));
-		react.default.useEffect(() => {
-			if (!domRef.current) return () => {};
-			const api = createSplitview(domRef.current, _objectSpread2(_objectSpread2({}, extractCoreOptions$2(props)), { createComponent: (options) => {
+		useKeptInstance(domRef, splitviewRef, (element) => {
+			const api = createSplitview(element, _objectSpread2(_objectSpread2({}, extractCoreOptions$2(props)), { createComponent: (options) => {
 				return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
 			} }));
-			const { clientWidth, clientHeight } = domRef.current;
+			const { clientWidth, clientHeight } = element;
 			api.layout(clientWidth, clientHeight);
 			if (props.onReady) props.onReady({ api });
-			splitviewRef.current = api;
-			return () => {
-				splitviewRef.current = void 0;
-				api.dispose();
-			};
-		}, []);
+			return api;
+		});
 		react.default.useEffect(() => {
-			if (!splitviewRef.current) return;
+			if (!splitviewRef.current || isApplied({ components: props.components })) return;
 			splitviewRef.current.updateOptions({ createComponent: (options) => {
 				return new ReactPanelView(options.id, options.name, props.components[options.name], { addPortal });
 			} });
@@ -20256,6 +20410,7 @@ react_dom = __toESM(react_dom);
 		const domRef = react.default.useRef(null);
 		const gridviewRef = react.default.useRef(void 0);
 		const [portals, addPortal] = usePortalsLifecycle();
+		const isApplied = useAppliedOptions(gridviewRef);
 		react.default.useImperativeHandle(ref, () => domRef.current, []);
 		const prevProps = react.default.useRef({});
 		react.default.useEffect(() => {
@@ -20265,25 +20420,20 @@ react_dom = __toESM(react_dom);
 				const propValue = props[key];
 				if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
 			});
-			if (gridviewRef.current) gridviewRef.current.updateOptions(changes);
+			if (gridviewRef.current && Object.keys(changes).length > 0) gridviewRef.current.updateOptions(changes);
 			prevProps.current = props;
 		}, PROPERTY_KEYS_GRIDVIEW.map((key) => props[key]));
-		react.default.useEffect(() => {
-			if (!domRef.current) return () => {};
-			const api = createGridview(domRef.current, _objectSpread2(_objectSpread2({}, extractCoreOptions$1(props)), { createComponent: (options) => {
+		useKeptInstance(domRef, gridviewRef, (element) => {
+			const api = createGridview(element, _objectSpread2(_objectSpread2({}, extractCoreOptions$1(props)), { createComponent: (options) => {
 				return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
 			} }));
-			const { clientWidth, clientHeight } = domRef.current;
+			const { clientWidth, clientHeight } = element;
 			api.layout(clientWidth, clientHeight);
 			if (props.onReady) props.onReady({ api });
-			gridviewRef.current = api;
-			return () => {
-				gridviewRef.current = void 0;
-				api.dispose();
-			};
-		}, []);
+			return api;
+		});
 		react.default.useEffect(() => {
-			if (!gridviewRef.current) return;
+			if (!gridviewRef.current || isApplied({ components: props.components })) return;
 			gridviewRef.current.updateOptions({ createComponent: (options) => {
 				return new ReactGridPanelView(options.id, options.name, props.components[options.name], { addPortal });
 			} });
@@ -20345,6 +20495,7 @@ react_dom = __toESM(react_dom);
 		const domRef = react.default.useRef(null);
 		const paneviewRef = react.default.useRef(void 0);
 		const [portals, addPortal] = usePortalsLifecycle();
+		const isApplied = useAppliedOptions(paneviewRef);
 		react.default.useImperativeHandle(ref, () => domRef.current, []);
 		const prevProps = react.default.useRef({});
 		react.default.useEffect(() => {
@@ -20354,14 +20505,13 @@ react_dom = __toESM(react_dom);
 				const propValue = props[key];
 				if (key in props && propValue !== prevProps.current[key]) changes[key] = propValue;
 			});
-			if (paneviewRef.current) paneviewRef.current.updateOptions(changes);
+			if (paneviewRef.current && Object.keys(changes).length > 0) paneviewRef.current.updateOptions(changes);
 			prevProps.current = props;
 		}, PROPERTY_KEYS_PANEVIEW.map((key) => props[key]));
-		react.default.useEffect(() => {
+		useKeptInstance(domRef, paneviewRef, (element) => {
 			var _props$headerComponen;
-			if (!domRef.current) return () => {};
 			const headerComponents = (_props$headerComponen = props.headerComponents) !== null && _props$headerComponen !== void 0 ? _props$headerComponen : {};
-			const api = createPaneview(domRef.current, _objectSpread2(_objectSpread2({}, extractCoreOptions(props)), {
+			const api = createPaneview(element, _objectSpread2(_objectSpread2({}, extractCoreOptions(props)), {
 				createComponent: (options) => {
 					return new PanePanelSection(options.id, props.components[options.name], { addPortal });
 				},
@@ -20369,24 +20519,20 @@ react_dom = __toESM(react_dom);
 					return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
 				}
 			}));
-			const { clientWidth, clientHeight } = domRef.current;
+			const { clientWidth, clientHeight } = element;
 			api.layout(clientWidth, clientHeight);
 			if (props.onReady) props.onReady({ api });
-			paneviewRef.current = api;
-			return () => {
-				paneviewRef.current = void 0;
-				api.dispose();
-			};
-		}, []);
+			return api;
+		});
 		react.default.useEffect(() => {
-			if (!paneviewRef.current) return;
+			if (!paneviewRef.current || isApplied({ components: props.components })) return;
 			paneviewRef.current.updateOptions({ createComponent: (options) => {
 				return new PanePanelSection(options.id, props.components[options.name], { addPortal });
 			} });
 		}, [props.components]);
 		react.default.useEffect(() => {
 			var _props$headerComponen2;
-			if (!paneviewRef.current) return;
+			if (!paneviewRef.current || isApplied({ headerComponents: props.headerComponents })) return;
 			const headerComponents = (_props$headerComponen2 = props.headerComponents) !== null && _props$headerComponen2 !== void 0 ? _props$headerComponen2 : {};
 			paneviewRef.current.updateOptions({ createHeaderComponent: (options) => {
 				return new PanePanelSection(options.id, headerComponents[options.name], { addPortal });
@@ -20550,5 +20696,7 @@ exports.themeSolarizedLight = themeSolarizedLight;
 exports.themeSolarizedLightSpaced = themeSolarizedLightSpaced;
 exports.themeVisualStudio = themeVisualStudio;
 exports.toTarget = toTarget;
+exports.useAppliedOptions = useAppliedOptions;
+exports.useKeptInstance = useKeptInstance;
 exports.usePortalsLifecycle = usePortalsLifecycle;
 });