dockview-react 8.4.0 → 8.5.0

package/dist/package/main.esm.mjs

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 8.4.0
+ * @version 8.5.0
  * @link https://github.com/dockview/dockview
  * @license MIT
  */
@@ -189,6 +189,87 @@ function isReactComponent(component) {
 	*/
 	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 DockviewDisposable.from(() => observer.disconnect());
+}
+const canHideWithoutUnmount = Number.parseInt(React.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.useRef(void 0);
+	React.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.useRef({
+		instance: void 0,
+		values: /* @__PURE__ */ new Map()
+	});
+	return React.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
@@ -460,6 +541,7 @@ const DockviewReact = React.forwardRef((props, ref) => {
 	const domRef = React.useRef(null);
 	const dockviewRef = React.useRef(void 0);
 	const [portals, addPortal] = usePortalsLifecycle();
+	const isApplied = useAppliedOptions(dockviewRef);
 	React.useImperativeHandle(ref, () => domRef.current, []);
 	const prevProps = React.useRef({});
 	React.useEffect(() => {
@@ -469,11 +551,10 @@ const DockviewReact = React.forwardRef((props, ref) => {
 			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.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 = {
@@ -508,16 +589,12 @@ const DockviewReact = React.forwardRef((props, ref) => {
 				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.useEffect(() => {
 		if (!dockviewRef.current) return () => {};
 		const disposable = dockviewRef.current.onDidDrop((event) => {
@@ -537,25 +614,28 @@ const DockviewReact = React.forwardRef((props, ref) => {
 		};
 	}, [props.onWillDrop]);
 	React.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.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.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.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({
@@ -566,21 +646,21 @@ const DockviewReact = React.forwardRef((props, ref) => {
 		});
 	}, [props.tabComponents, props.defaultTabComponent]);
 	React.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.useEffect(() => {
-		if (!dockviewRef.current) return;
+		if (!dockviewRef.current || isApplied({ rightHeaderActionsComponent: props.rightHeaderActionsComponent })) return;
 		dockviewRef.current.updateOptions({ createRightHeaderActionComponent: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }) });
 	}, [props.rightHeaderActionsComponent]);
 	React.useEffect(() => {
-		if (!dockviewRef.current) return;
+		if (!dockviewRef.current || isApplied({ leftHeaderActionsComponent: props.leftHeaderActionsComponent })) return;
 		dockviewRef.current.updateOptions({ createLeftHeaderActionComponent: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }) });
 	}, [props.leftHeaderActionsComponent]);
 	React.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.createElement("div", {
@@ -751,6 +831,7 @@ const SplitviewReact = React.forwardRef((props, ref) => {
 	const domRef = React.useRef(null);
 	const splitviewRef = React.useRef(void 0);
 	const [portals, addPortal] = usePortalsLifecycle();
+	const isApplied = useAppliedOptions(splitviewRef);
 	React.useImperativeHandle(ref, () => domRef.current, []);
 	const prevProps = React.useRef({});
 	React.useEffect(() => {
@@ -760,25 +841,20 @@ const SplitviewReact = React.forwardRef((props, ref) => {
 			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.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.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 });
 		} });
@@ -823,6 +899,7 @@ const GridviewReact = React.forwardRef((props, ref) => {
 	const domRef = React.useRef(null);
 	const gridviewRef = React.useRef(void 0);
 	const [portals, addPortal] = usePortalsLifecycle();
+	const isApplied = useAppliedOptions(gridviewRef);
 	React.useImperativeHandle(ref, () => domRef.current, []);
 	const prevProps = React.useRef({});
 	React.useEffect(() => {
@@ -832,25 +909,20 @@ const GridviewReact = React.forwardRef((props, ref) => {
 			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.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.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 });
 		} });
@@ -912,6 +984,7 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 	const domRef = React.useRef(null);
 	const paneviewRef = React.useRef(void 0);
 	const [portals, addPortal] = usePortalsLifecycle();
+	const isApplied = useAppliedOptions(paneviewRef);
 	React.useImperativeHandle(ref, () => domRef.current, []);
 	const prevProps = React.useRef({});
 	React.useEffect(() => {
@@ -921,14 +994,13 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 			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.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 });
 			},
@@ -936,24 +1008,20 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 				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.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.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 });
@@ -979,4 +1047,4 @@ const PaneviewReact = React.forwardRef((props, ref) => {
 PaneviewReact.displayName = "PaneviewComponent";
 
 //#endregion
-export { DockviewDefaultTab, DockviewReact, GridviewReact, PaneviewReact, ReactPart, ReactPartContext, SplitviewReact, isReactComponent, usePortalsLifecycle };
+export { DockviewDefaultTab, DockviewReact, GridviewReact, PaneviewReact, ReactPart, ReactPartContext, SplitviewReact, isReactComponent, useAppliedOptions, useKeptInstance, usePortalsLifecycle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-react",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "description": "React docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels",
   "keywords": [
     "splitview",
@@ -85,7 +85,7 @@
     "format:check": "biome format src"
   },
   "dependencies": {
-    "dockview": "^8.4.0"
+    "dockview": "^8.5.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",