@tangle-network/ui 11.15.1 → 11.15.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @tangle-network/ui
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.15.1",
+  "version": "11.15.2",
   "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>(