@tangle-network/ui 11.15.2 → 11.15.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.15.3
+
+### Patch Changes
+
+- 2ecce2e: Cancel pending toast auto-dismiss timers when a toast is dismissed or its provider unmounts.
+
 ## 11.15.2
 
 ### Patch Changes

package/dist/primitives/toast.js

@@ -67,7 +67,20 @@ function ToastContainer({ toasts, onDismiss }) {
 const ToastContext = React.createContext(null);
 function ToastProvider({ children }) {
 	const [toasts, setToasts] = React.useState([]);
+	const timers = React.useRef(/* @__PURE__ */ new Map());
+	React.useEffect(() => {
+		const pendingTimers = timers.current;
+		return () => {
+			for (const timer of pendingTimers.values()) clearTimeout(timer);
+			pendingTimers.clear();
+		};
+	}, []);
 	const dismiss = React.useCallback((id) => {
+		const timer = timers.current.get(id);
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			timers.current.delete(id);
+		}
 		setToasts((prev) => prev.filter((t) => t.id !== id));
 	}, []);
 	const toast = React.useCallback((input) => {
@@ -78,7 +91,7 @@ function ToastProvider({ children }) {
 		};
 		setToasts((prev) => [...prev, newToast]);
 		const duration = input.duration ?? 5e3;
-		if (duration > 0) setTimeout(() => dismiss(id), duration);
+		if (duration > 0) timers.current.set(id, setTimeout(() => dismiss(id), duration));
 	}, [dismiss]);
 	const success = React.useCallback((title, description) => {
 		toast({

package/package.json

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

package/src/primitives/toast.test.tsx

@@ -0,0 +1,130 @@
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ToastProvider, useToast } from "./toast";
+
+function ToastTrigger({ title, duration }: { title: string; duration?: number }) {
+  const { toast } = useToast();
+
+  return (
+    <button type="button" onClick={() => toast({ title, duration })}>
+      Show {title}
+    </button>
+  );
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+describe("ToastProvider auto-dismiss", () => {
+  it("cancels every pending dismissal on unmount without updating after teardown", () => {
+    const view = render(
+      <ToastProvider>
+        <ToastTrigger title="First" duration={1000} />
+        <ToastTrigger title="Second" duration={2000} />
+      </ToastProvider>,
+    );
+    const scheduleTimeout = globalThis.setTimeout;
+    const timeoutFired = vi.fn();
+    // Observe the real dismissal callbacks without mocking the provider or React state.
+    vi.spyOn(globalThis, "setTimeout").mockImplementation((callback, delay, ...args) =>
+      scheduleTimeout(() => {
+        timeoutFired();
+        callback(...args);
+      }, delay),
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Show First" }));
+    fireEvent.click(screen.getByRole("button", { name: "Show Second" }));
+    expect(screen.getAllByRole("alert")).toHaveLength(2);
+    expect(vi.getTimerCount()).toBe(2);
+
+    view.unmount();
+    expect(vi.getTimerCount()).toBe(0);
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    // A cancelled callback cannot reach dismiss() or its state update after unmount.
+    expect(timeoutFired).not.toHaveBeenCalled();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("keeps a toast until its duration elapses, then removes it", () => {
+    render(
+      <ToastProvider>
+        <ToastTrigger title="Saved" duration={1000} />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Show Saved" }));
+    expect(vi.getTimerCount()).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(999);
+    });
+    expect(screen.getByRole("alert")).toHaveTextContent("Saved");
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("clears only the manually dismissed toast's timer", () => {
+    render(
+      <ToastProvider>
+        <ToastTrigger title="First" duration={1000} />
+        <ToastTrigger title="Second" duration={2000} />
+      </ToastProvider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Show First" }));
+    fireEvent.click(screen.getByRole("button", { name: "Show Second" }));
+    expect(vi.getTimerCount()).toBe(2);
+
+    fireEvent.click(within(screen.getAllByRole("alert")[0]!).getByRole("button", {
+      name: "Dismiss notification",
+    }));
+    expect(screen.queryByText("First")).not.toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveTextContent("Second");
+    expect(vi.getTimerCount()).toBe(1);
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(screen.getByRole("alert")).toHaveTextContent("Second");
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("schedules no timer when duration is zero", () => {
+    render(
+      <ToastProvider>
+        <ToastTrigger title="Persistent" duration={0} />
+      </ToastProvider>,
+    );
+    const scheduleTimeout = vi.spyOn(globalThis, "setTimeout");
+
+    fireEvent.click(screen.getByRole("button", { name: "Show Persistent" }));
+    expect(scheduleTimeout).not.toHaveBeenCalled();
+    expect(vi.getTimerCount()).toBe(0);
+
+    act(() => {
+      vi.advanceTimersByTime(10000);
+    });
+    expect(screen.getByRole("alert")).toHaveTextContent("Persistent");
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});

package/src/primitives/toast.tsx

@@ -129,8 +129,24 @@ const ToastContext = React.createContext<ToastContextValue | null>(null);
 
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const [toasts, setToasts] = React.useState<Toast[]>([]);
+  const timers = React.useRef(new Map<string, ReturnType<typeof setTimeout>>());
+
+  React.useEffect(() => {
+    const pendingTimers = timers.current;
+    return () => {
+      for (const timer of pendingTimers.values()) {
+        clearTimeout(timer);
+      }
+      pendingTimers.clear();
+    };
+  }, []);
 
   const dismiss = React.useCallback((id: string) => {
+    const timer = timers.current.get(id);
+    if (timer !== undefined) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
@@ -143,7 +159,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
       // Auto-dismiss after duration
       const duration = input.duration ?? 5000;
       if (duration > 0) {
-        setTimeout(() => dismiss(id), duration);
+        timers.current.set(id, setTimeout(() => dismiss(id), duration));
       }
     },
     [dismiss],