@camstack/ui-library 1.2.272 → 1.2.273

package/dist/index.cjs

@@ -58421,12 +58421,23 @@ function ItemFormDialog({ open, onClose, title, icon: Icon, error, width = "lg",
 * Tiny URL query sync for surfaces that cannot assume react-router
 * (federated addon pages) or that only need a handful of params.
 *
-* Reads on mount + `popstate`; writes with `history.replaceState`. Empty /
-* null values are deleted so the URL stays short.
+* Reads on mount + whenever the query string changes (our writes, other
+* hook instances, react-router `setSearchParams`, back/forward). Writes
+* with `history.replaceState`. Empty / null values are deleted so the URL
+* stays short.
+*
+* Multiple `useUrlQueryParam` mounts (and a parent reading the same key via
+* this hook while a child writes) must stay in sync — otherwise a Rules
+* area pill updates `?section=` while the Notifications header still shows
+* "New rule" from a stale snapshot.
 */
+var URL_QUERY_EVENT = "camstack:url-query";
 function readParam(key) {
 	return new URLSearchParams(window.location.search).get(key);
 }
+function notifyUrlQuery() {
+	window.dispatchEvent(new Event(URL_QUERY_EVENT));
+}
 function writeParam(key, value) {
 	const params = new URLSearchParams(window.location.search);
 	if (value === null || value === "") params.delete(key);
@@ -58435,16 +58446,37 @@ function writeParam(key, value) {
 	const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
 	window.history.replaceState(null, "", url);
 }
+var historyPatched = false;
+/** So react-router (and anyone else) replaceState/pushState refresh every hook. */
+function ensureHistoryPatched() {
+	if (historyPatched || typeof window === "undefined") return;
+	historyPatched = true;
+	const originalReplace = window.history.replaceState.bind(window.history);
+	const originalPush = window.history.pushState.bind(window.history);
+	window.history.replaceState = (...args) => {
+		originalReplace(...args);
+		notifyUrlQuery();
+	};
+	window.history.pushState = (...args) => {
+		originalPush(...args);
+		notifyUrlQuery();
+	};
+}
 /**
 * One query param as React state. `null` means absent.
 * Changing it replaces the URL without a navigation.
 */
 function useUrlQueryParam(key) {
+	ensureHistoryPatched();
 	const [value, setValue] = (0, react$1.useState)(() => readParam(key));
 	(0, react$1.useEffect)(() => {
-		const onPop = () => setValue(readParam(key));
-		window.addEventListener("popstate", onPop);
-		return () => window.removeEventListener("popstate", onPop);
+		const sync = () => setValue(readParam(key));
+		window.addEventListener("popstate", sync);
+		window.addEventListener(URL_QUERY_EVENT, sync);
+		return () => {
+			window.removeEventListener("popstate", sync);
+			window.removeEventListener(URL_QUERY_EVENT, sync);
+		};
 	}, [key]);
 	return [value, (0, react$1.useCallback)((next) => {
 		writeParam(key, next);

package/dist/index.js

@@ -58397,12 +58397,23 @@ function ItemFormDialog({ open, onClose, title, icon: Icon, error, width = "lg",
 * Tiny URL query sync for surfaces that cannot assume react-router
 * (federated addon pages) or that only need a handful of params.
 *
-* Reads on mount + `popstate`; writes with `history.replaceState`. Empty /
-* null values are deleted so the URL stays short.
+* Reads on mount + whenever the query string changes (our writes, other
+* hook instances, react-router `setSearchParams`, back/forward). Writes
+* with `history.replaceState`. Empty / null values are deleted so the URL
+* stays short.
+*
+* Multiple `useUrlQueryParam` mounts (and a parent reading the same key via
+* this hook while a child writes) must stay in sync — otherwise a Rules
+* area pill updates `?section=` while the Notifications header still shows
+* "New rule" from a stale snapshot.
 */
+var URL_QUERY_EVENT = "camstack:url-query";
 function readParam(key) {
 	return new URLSearchParams(window.location.search).get(key);
 }
+function notifyUrlQuery() {
+	window.dispatchEvent(new Event(URL_QUERY_EVENT));
+}
 function writeParam(key, value) {
 	const params = new URLSearchParams(window.location.search);
 	if (value === null || value === "") params.delete(key);
@@ -58411,16 +58422,37 @@ function writeParam(key, value) {
 	const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
 	window.history.replaceState(null, "", url);
 }
+var historyPatched = false;
+/** So react-router (and anyone else) replaceState/pushState refresh every hook. */
+function ensureHistoryPatched() {
+	if (historyPatched || typeof window === "undefined") return;
+	historyPatched = true;
+	const originalReplace = window.history.replaceState.bind(window.history);
+	const originalPush = window.history.pushState.bind(window.history);
+	window.history.replaceState = (...args) => {
+		originalReplace(...args);
+		notifyUrlQuery();
+	};
+	window.history.pushState = (...args) => {
+		originalPush(...args);
+		notifyUrlQuery();
+	};
+}
 /**
 * One query param as React state. `null` means absent.
 * Changing it replaces the URL without a navigation.
 */
 function useUrlQueryParam(key) {
+	ensureHistoryPatched();
 	const [value, setValue] = useState(() => readParam(key));
 	useEffect(() => {
-		const onPop = () => setValue(readParam(key));
-		window.addEventListener("popstate", onPop);
-		return () => window.removeEventListener("popstate", onPop);
+		const sync = () => setValue(readParam(key));
+		window.addEventListener("popstate", sync);
+		window.addEventListener(URL_QUERY_EVENT, sync);
+		return () => {
+			window.removeEventListener("popstate", sync);
+			window.removeEventListener(URL_QUERY_EVENT, sync);
+		};
 	}, [key]);
 	return [value, useCallback((next) => {
 		writeParam(key, next);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.272",
+  "version": "1.2.273",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",