@tangle-network/ui 11.38.0 → 11.38.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.38.1
+
+### Patch Changes
+
+- c049dc4: Bound shared surface dismissal by its scoped role deadline so missing CSS animation events cannot strand Radix cleanup or focus return. Preserve retained motion values on reopen.
+
 ## 11.38.0
 
 ### Minor Changes

package/dist/lib/surface-motion.js

@@ -4,9 +4,10 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { animate, motionValue, styleEffect } from "motion";
 //#region src/lib/surface-motion.tsx
-/** Radix owns state, focus and presence; Motion only retargets the visible object. */
+/** Radix owns state and focus; visual retirement cannot wait for a CSS event. */
 const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-state": state, ...props }, forwardedRef) => {
 	const element = React.useRef(null);
+	const [retired, setRetired] = React.useState(false);
 	const values = React.useRef(null);
 	const controls = React.useRef([]);
 	const ref = React.useCallback((node) => {
@@ -24,7 +25,10 @@ const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-s
 		if (!node) return;
 		const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : void 0;
 		let cancelRender;
+		let retirement;
 		const run = () => {
+			clearTimeout(retirement);
+			setRetired(false);
 			const closed = state === "closed";
 			const bounds = node.getBoundingClientRect();
 			const hidden = {
@@ -46,6 +50,10 @@ const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-s
 				node.style.opacity = String(value.opacity);
 				node.style.transform = `translateX(${value.x}px) translateY(${value.y}px) scale(${value.scale})`;
 			};
+			if (closed) {
+				if (preference?.matches || seconds <= 0 || style.animationName === "none") setRetired(true);
+				else retirement = setTimeout(() => setRetired(true), seconds * 1e3);
+			}
 			if (preference?.matches || seconds <= 0 || style.animationName === "none") {
 				controls.current.forEach((control) => control.stop());
 				if (values.current) for (const key of [
@@ -84,6 +92,7 @@ const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-s
 		run();
 		preference?.addEventListener("change", run);
 		return () => {
+			clearTimeout(retirement);
 			preference?.removeEventListener("change", run);
 			cancelRender?.();
 		};
@@ -94,7 +103,7 @@ const SurfaceMotion = React.forwardRef(({ kind, side = "right", asChild, "data-s
 		props.style?.animation
 	]);
 	React.useEffect(() => () => controls.current.forEach((control) => control.stop()), []);
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+	return state === "closed" && retired ? null : /* @__PURE__ */ jsx(asChild ? Slot : "div", {
 		...props,
 		"data-state": state,
 		ref

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.38.0",
+  "version": "11.38.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/lib/surface-motion.tsx

@@ -12,10 +12,11 @@ type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
   "data-state"?: string;
 };
 
-/** Radix owns state, focus and presence; Motion only retargets the visible object. */
+/** Radix owns state and focus; visual retirement cannot wait for a CSS event. */
 export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
   ({ kind, side = "right", asChild, "data-state": state, ...props }, forwardedRef) => {
     const element = React.useRef<HTMLDivElement | null>(null);
+    const [retired, setRetired] = React.useState(false);
     const values = React.useRef<Record<"opacity" | "scale" | "x" | "y", MotionValue<number>> | null>(null);
     const controls = React.useRef<Array<ReturnType<typeof animate>>>([]);
     const ref = React.useCallback<React.RefCallback<HTMLDivElement>>((node) => {
@@ -31,7 +32,10 @@ export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
       if (!node) return;
       const preference = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : undefined;
       let cancelRender: (() => void) | undefined;
+      let retirement: ReturnType<typeof setTimeout> | undefined;
       const run = () => {
+        clearTimeout(retirement);
+        setRetired(false);
         const closed = state === "closed";
         const bounds = node.getBoundingClientRect();
         const hidden = {
@@ -49,6 +53,14 @@ export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
           node.style.opacity = String(value.opacity);
           node.style.transform = `translateX(${value.x}px) translateY(${value.y}px) scale(${value.scale})`;
         };
+        // Radix may retain an exit until animationend. Retire this DOM node at
+        // the scoped deadline even when keyframes/events are missing or paused;
+        // its null ref lets Radix release presence, focus and modal resources.
+        // Reopen cancels retirement and keeps the same node and Motion values.
+        if (closed) {
+          if (preference?.matches || seconds <= 0 || style.animationName === "none") setRetired(true);
+          else retirement = setTimeout(() => setRetired(true), seconds * 1000);
+        }
         // Missing styles and reduced motion settle synchronously. No semantic
         // transition waits for a JavaScript completion callback.
         if (preference?.matches || seconds <= 0 || style.animationName === "none") {
@@ -73,13 +85,13 @@ export const SurfaceMotion = React.forwardRef<HTMLDivElement, SurfaceProps>(
       };
       run();
       preference?.addEventListener("change", run);
-      return () => { preference?.removeEventListener("change", run); cancelRender?.(); };
+      return () => { clearTimeout(retirement); preference?.removeEventListener("change", run); cancelRender?.(); };
     // Radix Popper temporarily suppresses animation until placement resolves.
     // Start the same retained values when that inline override clears.
     }, [state, kind, side, props.style?.animation]);
     React.useEffect(() => () => controls.current.forEach(control => control.stop()), []);
     const Component = asChild ? Slot : "div";
-    return <Component {...props} data-state={state} ref={ref} />;
+    return state === "closed" && retired ? null : <Component {...props} data-state={state} ref={ref} />;
   },
 );
 SurfaceMotion.displayName = "SurfaceMotion";