@tangle-network/ui 11.15.1 → 11.15.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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
+
+- 11d515d: Keep file-tree selection callbacks current after rerenders and synchronize controlled selection through the native item API.
+  Closing a file clears its selection so the same file can be opened again.
+
 ## 11.15.1
 
 ### Patch Changes

package/dist/files/rich-file-tree.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { FileTree, useFileTree } from "@pierre/trees/react";
 //#region src/files/rich-file-tree.tsx
@@ -66,13 +66,24 @@ function RichFileTree({ root, paths, selectedPath, onSelect, search = true, init
 		if (root) return flattenFileNode(root);
 		return [];
 	}, [paths, root]);
+	const selectionRef = useRef({
+		selectedPath,
+		onSelect
+	});
+	selectionRef.current = {
+		selectedPath,
+		onSelect
+	};
+	const syncingSelectionRef = useRef(false);
+	const previousSelectedPathRef = useRef(selectedPath);
 	const { model } = useFileTree({
 		paths: flatPaths,
 		search,
 		initialExpansion,
 		onSelectionChange: (selected) => {
 			const next = selected[0];
-			if (next && next !== selectedPath) onSelect?.(next);
+			const current = selectionRef.current;
+			if (!syncingSelectionRef.current && next && next !== current.selectedPath) current.onSelect?.(next);
 		}
 	});
 	useEffect(() => {
@@ -83,11 +94,23 @@ function RichFileTree({ root, paths, selectedPath, onSelect, search = true, init
 		model.resetPaths(flatPaths);
 	}, [model, flatPaths]);
 	useEffect(() => {
-		if (!selectedPath) return;
+		const previous = previousSelectedPathRef.current;
+		previousSelectedPathRef.current = selectedPath;
+		if (selectedPath === void 0 && previous === void 0) return;
 		const current = model.getSelectedPaths();
-		if (current.length === 1 && current[0] === selectedPath) return;
-		model.setSelectedPaths?.([selectedPath]);
-	}, [model, selectedPath]);
+		if (current.length === (selectedPath ? 1 : 0) && current[0] === selectedPath) return;
+		syncingSelectionRef.current = true;
+		try {
+			for (const path of [...current]) model.getItem(path)?.deselect();
+			if (selectedPath) model.getItem(selectedPath)?.select();
+		} finally {
+			syncingSelectionRef.current = false;
+		}
+	}, [
+		model,
+		selectedPath,
+		flatPaths
+	]);
 	const theme = {
 		...DEFAULT_THEME,
 		...themeOverrides

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.1",
+  "version": "11.15.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/files/rich-file-tree.test.tsx

@@ -1,7 +1,15 @@
-import { describe, it, expect } from "vitest"
-import { render } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { fireEvent, render, waitFor } from "@testing-library/react"
 import { RichFileTree } from "./rich-file-tree"
 
+function treeRow(container: HTMLElement, path: string): HTMLElement {
+  const host = container.querySelector("file-tree-container");
+  const row = Array.from(host?.shadowRoot?.querySelectorAll("[data-item-path]") ?? [])
+    .find((element) => element.getAttribute("data-item-path") === path);
+  if (!(row instanceof HTMLElement)) throw new Error(`Missing tree row: ${path}`);
+  return row;
+}
+
 describe("RichFileTree", () => {
   it("renders without crashing given a flat path list", () => {
     const { container } = render(
@@ -34,6 +42,46 @@ describe("RichFileTree", () => {
     expect(container.querySelectorAll("*").length).toBeGreaterThan(0)
   })
 
+  it("calls the current selection callback after its owner rerenders", async () => {
+    const original = vi.fn();
+    const current = vi.fn();
+    const paths = ["brief.md", "outreach.md"];
+    const { container, rerender } = render(<RichFileTree paths={paths} onSelect={original} />);
+    rerender(<RichFileTree paths={paths} onSelect={current} />);
+    fireEvent.click(treeRow(container, "outreach.md"));
+    await waitFor(() => expect(current).toHaveBeenCalledWith("outreach.md"));
+    expect(original).not.toHaveBeenCalled();
+  });
+
+  it("clears controlled selection so a closed file can be selected again", async () => {
+    const onSelect = vi.fn();
+    const paths = ["brief.md", "outreach.md"];
+    const { container, rerender } = render(
+      <RichFileTree paths={paths} selectedPath="brief.md" onSelect={onSelect} />,
+    );
+    rerender(<RichFileTree paths={paths} selectedPath={undefined} onSelect={onSelect} />);
+    await waitFor(() => expect(treeRow(container, "brief.md")).toHaveAttribute("aria-selected", "false"));
+    fireEvent.click(treeRow(container, "brief.md"));
+    await waitFor(() => expect(onSelect).toHaveBeenCalledExactlyOnceWith("brief.md"));
+  });
+
+  it("preserves uncontrolled selection when the file listing refreshes", async () => {
+    const { container, rerender } = render(<RichFileTree paths={["brief.md"]} />);
+    fireEvent.click(treeRow(container, "brief.md"));
+    await waitFor(() => expect(treeRow(container, "brief.md")).toHaveAttribute("aria-selected", "true"));
+    rerender(<RichFileTree paths={["brief.md", "outreach.md"]} />);
+    await waitFor(() => expect(treeRow(container, "brief.md")).toHaveAttribute("aria-selected", "true"));
+  });
+
+  it("does not notify the owner when a controlled selection is synchronized", async () => {
+    const onSelect = vi.fn();
+    const paths = ["brief.md", "outreach.md"];
+    const { container, rerender } = render(<RichFileTree paths={paths} selectedPath="brief.md" onSelect={onSelect} />);
+    rerender(<RichFileTree paths={paths} selectedPath="outreach.md" onSelect={onSelect} />);
+    await waitFor(() => expect(treeRow(container, "outreach.md")).toHaveAttribute("aria-selected", "true"));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
   it("throws when both root and paths are passed", () => {
     expect(() =>
       render(<RichFileTree root={{ name: "x", path: "x", type: "file" }} paths={["y"]} />),

package/src/files/rich-file-tree.tsx

@@ -27,7 +27,7 @@ import type {
   GitStatus,
   GitStatusEntry,
 } from "@pierre/trees";
-import { useEffect, useMemo, type CSSProperties, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, type CSSProperties, type ReactNode } from "react";
 import type { FileNode } from "./file-tree";
 
 /**
@@ -169,13 +169,22 @@ export function RichFileTree({
     return [];
   }, [paths, root]);
 
+  // Pierre creates its model once; event handlers must read the current owner.
+  const selectionRef = useRef({ selectedPath, onSelect });
+  selectionRef.current = { selectedPath, onSelect };
+  const syncingSelectionRef = useRef(false);
+  const previousSelectedPathRef = useRef(selectedPath);
+
   const { model } = usePierreFileTree({
     paths: flatPaths,
     search,
     initialExpansion,
     onSelectionChange: (selected) => {
-      const next = selected[0]
-      if (next && next !== selectedPath) onSelect?.(next)
+      const next = selected[0];
+      const current = selectionRef.current;
+      if (!syncingSelectionRef.current && next && next !== current.selectedPath) {
+        current.onSelect?.(next);
+      }
     },
   });
 
@@ -192,17 +201,21 @@ export function RichFileTree({
     model.resetPaths(flatPaths);
   }, [model, flatPaths]);
 
-  // Drive selection from props (controlled). Skip when already selected
-  // to avoid an emit loop with onSelectionChange.
+  // Drive controlled selection with Pierre's public item API, including clearing it.
   useEffect(() => {
-    if (!selectedPath) return;
+    const previous = previousSelectedPathRef.current;
+    previousSelectedPathRef.current = selectedPath;
+    if (selectedPath === undefined && previous === undefined) return;
     const current = model.getSelectedPaths();
-    if (current.length === 1 && current[0] === selectedPath) return;
-    // The public API exposes selection via `select` semantics through the
-    // controller — fall back to direct setter when present, no-op otherwise.
-    const m = model as unknown as { setSelectedPaths?: (paths: readonly string[]) => void };
-    m.setSelectedPaths?.([selectedPath]);
-  }, [model, selectedPath]);
+    if (current.length === (selectedPath ? 1 : 0) && current[0] === selectedPath) return;
+    syncingSelectionRef.current = true;
+    try {
+      for (const path of [...current]) model.getItem(path)?.deselect();
+      if (selectedPath) model.getItem(selectedPath)?.select();
+    } finally {
+      syncingSelectionRef.current = false;
+    }
+  }, [model, selectedPath, flatPaths]);
 
   const theme = { ...DEFAULT_THEME, ...themeOverrides };
   const themeStyle = useMemo<CSSProperties>(

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],