dockview-react 8.4.1 → 8.5.0

package/dist/cjs/react.d.ts

@@ -32,4 +32,17 @@ type PortalLifecycleHook = () => [
  */
 export declare const usePortalsLifecycle: PortalLifecycleHook;
 export declare function isReactComponent(component: any): boolean;
+/**
+ * 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.
+ */
+export declare function useKeptInstance<T extends DockviewIDisposable>(domRef: React.RefObject<HTMLElement | null>, instanceRef: React.MutableRefObject<T | undefined>, create: (element: HTMLElement) => T): void;
+/**
+ * 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.
+ */
+export declare function useAppliedOptions(instanceRef: React.RefObject<unknown>): (values: Record<string, unknown>) => boolean;
 export {};

package/dist/dockview-react.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.4.1
+ * @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.1
+	* @version 8.5.0
 	* @link https://github.com/dockview/dockview
 	* @license MIT
 	*/
@@ -5996,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;
@@ -6042,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;
@@ -11019,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);
 			}
@@ -19700,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
@@ -19971,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(() => {
@@ -19980,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 = {
@@ -20019,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) => {
@@ -20048,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({
@@ -20077,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", {
@@ -20262,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(() => {
@@ -20271,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 });
 			} });
@@ -20334,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(() => {
@@ -20343,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 });
 			} });
@@ -20423,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(() => {
@@ -20432,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 });
 				},
@@ -20447,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 });
@@ -20628,5 +20696,7 @@ exports.themeSolarizedLight = themeSolarizedLight;
 exports.themeSolarizedLightSpaced = themeSolarizedLightSpaced;
 exports.themeVisualStudio = themeVisualStudio;
 exports.toTarget = toTarget;
+exports.useAppliedOptions = useAppliedOptions;
+exports.useKeptInstance = useKeptInstance;
 exports.usePortalsLifecycle = usePortalsLifecycle;
 });