@elabs-ai/components-ui 4.1.0 → 4.2.0

package/src/components/tree/tree.test.tsx

@@ -141,6 +141,29 @@ describe("Tree reveal-into-view (scrollToId / scrollSelectionIntoView)", () => {
     }
   });
 
+  it("does not re-scroll on an unrelated re-render with a same-content controlled selectedIds array", async () => {
+    const scrollSpy = vi.fn();
+    const orig = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = scrollSpy;
+    try {
+      const { rerender } = render(<Tree nodes={nodes} scrollSelectionIntoView selectedIds={[]} />);
+      rerender(<Tree nodes={nodes} scrollSelectionIntoView selectedIds={["carrot"]} />);
+      await waitFor(() => expect(screen.getByText("Carrot")).toBeInTheDocument());
+      const callsAfterInitialReveal = scrollSpy.mock.calls.length;
+      expect(callsAfterInitialReveal).toBeGreaterThan(0);
+
+      // Same ids, but a FRESH array reference — a common pattern (parent
+      // recomputes `selectedIds` inline every render). Previously the
+      // controlled Set was rebuilt with a new identity every render, so the
+      // reveal effect saw a "changed" selection and re-scrolled on every
+      // unrelated re-render (scroll-jump-while-scrolling, #reviewed 1.6).
+      rerender(<Tree nodes={nodes} scrollSelectionIntoView selectedIds={["carrot"]} />);
+      expect(scrollSpy.mock.calls.length).toBe(callsAfterInitialReveal);
+    } finally {
+      Element.prototype.scrollIntoView = orig;
+    }
+  });
+
   it("scrollToId requests ancestor expansion in virtualize mode (controlled)", async () => {
     const onExpandedChange = vi.fn();
     const { rerender } = render(
@@ -395,6 +418,24 @@ describe("Tree (lazy loading)", () => {
     expect(screen.getByRole("treeitem", { name: /Category A/ })).not.toHaveAttribute("aria-busy");
   });
 
+  it("does not drop lazily-loaded children when the parent re-renders with a fresh (same-content) nodes prop", async () => {
+    const user = userEvent.setup();
+    const loadChildren = vi.fn().mockResolvedValue([{ id: "child-1", label: "Child 1" }]);
+
+    const { rerender } = render(<Tree nodes={makeLazyNodes()} loadChildren={loadChildren} />);
+    await user.click(screen.getByRole("treeitem", { name: /Category A/ }));
+    await waitFor(() => {
+      expect(screen.getByRole("treeitem", { name: /Child 1/ })).toBeInTheDocument();
+    });
+
+    // Parent re-renders with a brand-new `nodes` array literal carrying the
+    // SAME data (no `children` on root-a — the caller doesn't know about the
+    // lazy-loaded subtree). This must not wipe out what we already fetched.
+    rerender(<Tree nodes={makeLazyNodes()} loadChildren={loadChildren} />);
+
+    expect(screen.getByRole("treeitem", { name: /Child 1/ })).toBeInTheDocument();
+  });
+
   it("retries successfully after error", async () => {
     const user = userEvent.setup();
     const loadChildren = vi

package/src/components/tree/tree.tsx

@@ -6,6 +6,7 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
   type HTMLAttributes,
@@ -149,7 +150,24 @@ function useControllableSet(
     () => new Set(controlled ?? defaultValue ?? []),
   );
 
-  const value: Set<string> = isControlled ? new Set(controlled) : internal;
+  // Stable controlled Set: build a new Set only when the controlled array's
+  // CONTENT actually changed, not merely its reference (many callers pass a
+  // freshly-computed array with the same ids on every render). Without this,
+  // `selectedIds`/`expandedIds` changed identity on every render, which made
+  // effects keyed on them (the scrollToId/scrollSelectionIntoView reveal
+  // effect) fire on every re-render instead of on a real selection change —
+  // the scroll-jump-while-scrolling bug.
+  const controlledSetRef = useRef<Set<string> | null>(null);
+  let value: Set<string>;
+  if (isControlled) {
+    const prev = controlledSetRef.current;
+    const sameContent =
+      !!prev && prev.size === controlled!.length && controlled!.every((id) => prev.has(id));
+    value = sameContent ? prev! : new Set(controlled);
+    controlledSetRef.current = value;
+  } else {
+    value = internal;
+  }
 
   const setValue = useCallback(
     (next: Set<string>) => {
@@ -162,6 +180,30 @@ function useControllableSet(
   return [value, setValue];
 }
 
+/**
+ * Reconcile an incoming `nodes` prop against the previous internal tree,
+ * preserving any children merged in locally via `loadChildren` that the new
+ * prop doesn't (yet) carry. Without this, any parent re-render that hands
+ * down a new (even structurally-identical) `nodes` array wipes out every
+ * lazily-loaded subtree that isn't also present upstream.
+ */
+function reconcileNodes<T>(propNodes: TreeNode<T>[], prevNodes: TreeNode<T>[]): TreeNode<T>[] {
+  const prevById = new Map(prevNodes.map((n) => [n.id, n] as const));
+  return propNodes.map((n) => {
+    const prev = prevById.get(n.id);
+    if (!prev) return n;
+    if (!n.children?.length && prev.children?.length) {
+      // The prop still marks this node as lazily-expandable but doesn't (yet)
+      // carry the children we already fetched — keep what we loaded.
+      return { ...n, children: prev.children, hasChildren: n.hasChildren };
+    }
+    if (n.children?.length && prev.children?.length) {
+      return { ...n, children: reconcileNodes(n.children, prev.children) };
+    }
+    return n;
+  });
+}
+
 /** Merge resolved children into a tree, returning a new tree. */
 function mergeChildren<T>(
   nodes: TreeNode<T>[],
@@ -328,7 +370,7 @@ function VirtualFlatRow<T>({
           <span className="truncate">{t("ui.tree.failedToLoad")}</span>
           <button
             type="button"
-            aria-label="Retry loading children"
+            aria-label={t("ui.tree.retryLoadingChildren")}
             onClick={(e) => {
               e.stopPropagation();
               onRetry(node.id);
@@ -340,7 +382,7 @@ function VirtualFlatRow<T>({
             )}
           >
             <RotateCcw className="size-3" aria-hidden="true" />
-            Retry
+            {t("ui.tree.retry")}
           </button>
         </span>
       ) : (
@@ -379,11 +421,12 @@ function VirtualFlatRow<T>({
 // ---------------------------------------------------------------------------
 
 function LoadingRow({ level }: { level: number }) {
+  const { t } = useLocale();
   const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };
   return (
     <div
       role="treeitem"
-      aria-label="Loading…"
+      aria-label={t("loading")}
       aria-disabled="true"
       tabIndex={-1}
       className="flex min-w-0 items-center gap-1.5 px-2 py-1.5"
@@ -417,13 +460,13 @@ function ErrorRow({ level, onRetry }: { level: number; onRetry: () => void }) {
           onRetry();
         }}
         className={cn(
-          "ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-xs",
+          "ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-meta",
           "text-muted-foreground hover:text-foreground",
           "focus-ring",
         )}
       >
         <RotateCcw className="size-3" aria-hidden="true" />
-        Retry
+        {t("ui.tree.retry")}
       </button>
     </div>
   );
@@ -771,9 +814,10 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
   // Internal mutable tree (supports lazy-loaded children merge)
   const [nodes, setNodes] = useState<TreeNode[]>(() => nodesProp as TreeNode[]);
 
-  // Keep internal tree in sync with nodesProp if it changes externally
+  // Keep internal tree in sync with nodesProp if it changes externally,
+  // preserving any children merged in locally via lazy `loadChildren`.
   useEffect(() => {
-    setNodes(nodesProp as TreeNode[]);
+    setNodes((prev) => reconcileNodes(nodesProp as TreeNode[], prev));
   }, [nodesProp]);
 
   const [expandedIds, setExpandedIds] = useControllableSet(
@@ -825,8 +869,18 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
   // Flattened visible rows (for virtualized path and keyboard hook)
   // ---------------------------------------------------------------------------
 
-  const flatRows = flattenVisibleWithMeta(nodes, expandedIds, lazyState);
-  const flatNodeIds = flatRows.map((r) => r.node.id);
+  const flatRows = useMemo(
+    () => flattenVisibleWithMeta(nodes, expandedIds, lazyState),
+    [nodes, expandedIds, lazyState],
+  );
+  const flatNodeIds = useMemo(() => flatRows.map((r) => r.node.id), [flatRows]);
+  // O(1) row lookup by id — `handleToggleExpand`/`handleSelectVirtual` run on
+  // every click/keypress and previously did an O(n) `Array.find` each time.
+  const flatRowIndexById = useMemo(() => {
+    const map = new Map<string, number>();
+    flatRows.forEach((r, i) => map.set(r.node.id, i));
+    return map;
+  }, [flatRows]);
 
   // ---------------------------------------------------------------------------
   // Keyboard hook
@@ -862,9 +916,10 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
 
   const handleToggleExpand = useCallback(
     (nodeId: string) => {
-      const flatRow = flatRows.find((r) => r.node.id === nodeId);
-      if (!flatRow) return;
-      const node = flatRow.node;
+      const index = flatRowIndexById.get(nodeId);
+      if (index === undefined) return;
+      const node = flatRows[index]?.node;
+      if (!node) return;
       const hasLoadedChildren = !!node.children?.length;
       const next = new Set(expandedIds);
       if (expandedIds.has(nodeId)) {
@@ -877,15 +932,15 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
       }
       setExpandedIds(next);
     },
-    [expandedIds, flatRows, setExpandedIds, loadChildren, handleExpandLazy],
+    [expandedIds, flatRows, flatRowIndexById, setExpandedIds, loadChildren, handleExpandLazy],
   );
 
   const handleSelectVirtual = useCallback(
     (nodeId: string) => {
-      const flatRow = flatRows.find((r) => r.node.id === nodeId);
-      if (!flatRow) return;
-      const node = flatRow.node;
-      if (node.disabled || selectionMode === "none") return;
+      const index = flatRowIndexById.get(nodeId);
+      if (index === undefined) return;
+      const node = flatRows[index]?.node;
+      if (!node || node.disabled || selectionMode === "none") return;
       if (selectionMode === "single") {
         setSelectedIds(new Set([nodeId]));
       } else {
@@ -898,7 +953,7 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
         setSelectedIds(next);
       }
     },
-    [flatRows, selectionMode, selectedIds, setSelectedIds],
+    [flatRows, flatRowIndexById, selectionMode, selectedIds, setSelectedIds],
   );
 
   // ---------------------------------------------------------------------------
@@ -960,8 +1015,8 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
   // node (registered via registerAndFlush in both paths).
   const scrollNodeIntoView = useCallback(
     (id: string): boolean => {
-      const index = flatNodeIds.indexOf(id);
-      if (index < 0) return false;
+      const index = flatRowIndexById.get(id);
+      if (index === undefined) return false;
       if (virtualize) {
         virtualizerRef.current?.scrollToIndex(index, { align: "center" });
       } else {
@@ -970,7 +1025,7 @@ export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
       }
       return true;
     },
-    [flatNodeIds, virtualize],
+    [flatRowIndexById, virtualize],
   );
 
   // Reveal `id`: scroll it now if visible, else expand its (loaded) ancestors and

package/src/components/tree/use-tree-keyboard.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { TreeNode } from "./tree";
 
 /**
@@ -125,6 +125,31 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
     }
   }, []);
 
+  // Memoised O(1) lookups — rebuilt only when the tree shape / expansion
+  // actually changes, not on every keypress (a full re-flatten + `indexOf`/
+  // `findNode` walk per arrow key is O(n) on a large tree).
+  const visible = useMemo(
+    () => (virtualize && flatNodeIds ? flatNodeIds : flattenVisible(nodes, expandedIds)),
+    [virtualize, flatNodeIds, nodes, expandedIds],
+  );
+  const visibleIndexById = useMemo(() => {
+    const map = new Map<string, number>();
+    visible.forEach((id, i) => map.set(id, i));
+    return map;
+  }, [visible]);
+  const nodeById = useMemo(() => {
+    const map = new Map<string, TreeNode<T>>();
+    function walk(list: TreeNode<T>[]) {
+      for (const node of list) {
+        map.set(node.id, node);
+        if (node.children?.length) walk(node.children);
+      }
+    }
+    walk(nodes);
+    return map;
+  }, [nodes]);
+  const parentMapMemo = useMemo(() => buildParentMap(nodes), [nodes]);
+
   // Typeahead buffer
   const typeaheadBuffer = useRef<string>("");
   const typeaheadTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -156,8 +181,7 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
 
       // Element not mounted — happens when it's scrolled out of the virtual window.
       if (virtualize && scrollToVirtualIndex && pendingFocusIdRef) {
-        const ids = flatNodeIds ?? [];
-        const index = ids.indexOf(id);
+        const index = visibleIndexById.get(id) ?? -1;
         if (index >= 0) {
           pendingFocusIdRef.current = id;
           scrollToVirtualIndex(index);
@@ -165,18 +189,16 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
         }
       }
     },
-    [virtualize, flatNodeIds, pendingFocusIdRef, scrollToVirtualIndex],
+    [virtualize, visibleIndexById, pendingFocusIdRef, scrollToVirtualIndex],
   );
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLElement>) => {
       if (!activeId) return;
 
-      // In virtual mode use the pre-computed flat list so we don't re-flatten
-      const visible = virtualize && flatNodeIds ? flatNodeIds : flattenVisible(nodes, expandedIds);
-      const currentIndex = visible.indexOf(activeId);
-      const currentNode = findNode(nodes, activeId);
-      const parentMap = buildParentMap(nodes);
+      const currentIndex = visibleIndexById.get(activeId) ?? -1;
+      const currentNode = nodeById.get(activeId);
+      const parentMap = parentMapMemo;
 
       const moveTo = (id: string) => {
         e.preventDefault();
@@ -185,7 +207,7 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
 
       const selectNode = (id: string) => {
         if (selectionMode === "none") return;
-        const node = findNode(nodes, id);
+        const node = nodeById.get(id);
         if (node?.disabled) return;
         if (selectionMode === "single") {
           onSelectionChange(new Set([id]));
@@ -282,7 +304,7 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
               ...visible.slice(0, currentIndex + 1),
             ];
             for (const id of searchList) {
-              const node = findNode(nodes, id);
+              const node = nodeById.get(id);
               if (!node) continue;
               // only string labels are searchable
               if (typeof node.label !== "string") continue;
@@ -298,15 +320,16 @@ export function useTreeKeyboard<T>(options: UseTreeKeyboardOptions<T>): UseTreeK
     },
     [
       activeId,
-      nodes,
+      visible,
+      visibleIndexById,
+      nodeById,
+      parentMapMemo,
       expandedIds,
       onExpandedChange,
       selectionMode,
       selectedIds,
       onSelectionChange,
       setActiveId,
-      virtualize,
-      flatNodeIds,
     ],
   );
 

package/src/components/tree-select/tree-select.stories.tsx

@@ -51,6 +51,15 @@ const meta = {
   title: "Forms/TreeSelect",
   component: TreeSelect,
   tags: ["autodocs"],
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-72">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     nodes: {
       description: "Hierarchical tree data (`TreeNode[]`).",

package/src/components/tree-select/tree-select.test.tsx

@@ -37,4 +37,9 @@ describe("TreeSelect", () => {
     render(<TreeSelect nodes={nodes} multiple value={["apple", "banana", "carrot"]} />);
     expect(screen.getByText("+1")).toBeInTheDocument();
   });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<TreeSelect nodes={nodes} />);
+    expect(screen.getByRole("combobox").className).not.toMatch(/\bw-64\b/);
+  });
 });

package/src/components/tree-select/tree-select.tsx

@@ -7,6 +7,7 @@ import { cn } from "../../lib/cn";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { useLocale } from "../locale-provider";
 import { Tree, type TreeNode } from "../tree";
 
 export interface TreeSelectProps<T = unknown> extends Omit<
@@ -47,18 +48,11 @@ function findLabel<T>(nodes: TreeNode<T>[], id: string): ReactNode | undefined {
  * selection; composes `Tree` for all keyboard/SR behaviour.
  */
 export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(function TreeSelect(
-  {
-    nodes,
-    value,
-    defaultValue,
-    onValueChange,
-    multiple = false,
-    placeholder = "Select…",
-    className,
-    ...props
-  },
+  { nodes, value, defaultValue, onValueChange, multiple = false, placeholder, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
+  const resolvedPlaceholder = placeholder ?? t("ui.treeSelect.placeholder");
   const [open, setOpen] = useState(false);
   const treeId = useId();
   const isControlled = value !== undefined;
@@ -88,12 +82,12 @@ export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(functio
           aria-haspopup="tree"
           aria-expanded={open}
           aria-controls={treeId}
-          className={cn("h-auto min-h-9 w-64 justify-between font-normal", className)}
+          className={cn("h-auto min-h-9 w-full justify-between font-normal", className)}
           {...props}
         >
           <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
             {labels.length === 0 ? (
-              <span className="text-muted-foreground">{placeholder}</span>
+              <span className="text-muted-foreground">{resolvedPlaceholder}</span>
             ) : multiple ? (
               <>
                 {labels.slice(0, 2).map((l) => (
@@ -106,7 +100,10 @@ export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(functio
                   </Badge>
                 ))}
                 {labels.length > 2 ? (
-                  <Badge variant="secondary" aria-label={`and ${labels.length - 2} more selected`}>
+                  <Badge
+                    variant="secondary"
+                    aria-label={t("ui.treeSelect.moreSelected", { count: labels.length - 2 })}
+                  >
                     +{labels.length - 2}
                   </Badge>
                 ) : null}
@@ -118,7 +115,7 @@ export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(functio
           <ChevronsUpDown className="ms-2 size-4 shrink-0 opacity-50" aria-hidden="true" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-64 p-1" align="start">
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] min-w-64 p-1" align="start">
         <Tree
           id={treeId}
           nodes={nodes}

package/src/components/typography/prose.test.tsx

@@ -20,12 +20,13 @@ import { ProseLink } from "./prose";
 afterEach(cleanup);
 
 describe("ProseLink — #399 on-surface brand-accent rung", () => {
-  it("renders text-primary-text, never the text-primary fill rung", () => {
+  // `text-link` reads `--link`, which the reference themes alias to `--primary-text`.
+  it("renders the link ink, never the text-primary fill rung", () => {
     render(<ProseLink href="https://example.com">docs</ProseLink>);
 
     const link = screen.getByRole("link", { name: "docs" });
     const classes = link.className.split(/\s+/);
-    expect(classes).toContain("text-primary-text");
+    expect(classes).toContain("text-link");
     expect(classes).not.toContain("text-primary");
   });
 

package/src/components/typography/prose.tsx

@@ -116,10 +116,10 @@ export const ProseLink = forwardRef<HTMLAnchorElement, ProseLinkProps>(function
       ref={ref}
       href={href}
       className={cn(
-        // #399 — `text-primary-text`, not the `text-primary` FILL rung: a prose
-        // link is ordinary body text and owes WCAG 1.4.3 AA (4.5:1), which the
+        // #399 — `text-link` (defaults to `--primary-text`), not the `text-primary`
+        // FILL rung: a prose link is ordinary body text and owes WCAG 1.4.3 AA (4.5:1), which the
         // fill only guarantees at the 1.4.11 mark bar (3:1).
-        "font-medium text-primary-text underline underline-offset-4 hover:no-underline focus-ring",
+        "font-medium text-link underline underline-offset-4 hover:no-underline focus-ring",
         className,
       )}
       {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}

package/src/components/virtual-select/virtual-select.stories.tsx

@@ -58,6 +58,15 @@ const meta = {
       },
     },
   },
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-72">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     options: {
       description:

package/src/components/virtual-select/virtual-select.test.tsx

@@ -12,8 +12,8 @@
  *   - Virtualizer scroll behavior with 10,000 options
  *   - Cross-theme visual correctness
  */
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { VirtualSelect } from "./virtual-select";
 import type { VirtualSelectOption } from "./virtual-select";
 
@@ -104,3 +104,29 @@ describe("VirtualSelect defaultValue (uncontrolled)", () => {
     expect(screen.getByText("Gamma")).toBeInTheDocument();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Deferred autofocus timer — cancelled on unmount (#reviewed)
+// ---------------------------------------------------------------------------
+
+describe("VirtualSelect autofocus timer cleanup", () => {
+  it("cancels the pending search-input autofocus timeout when unmounted before it fires", () => {
+    vi.useFakeTimers();
+    try {
+      const { unmount } = render(<VirtualSelect options={OPTIONS} />);
+      const trigger = screen.getByRole("combobox");
+      // Opening schedules a deferred `searchRef.current?.focus()`.
+      fireEvent.click(trigger);
+      const pendingBeforeUnmount = vi.getTimerCount();
+      expect(pendingBeforeUnmount).toBeGreaterThan(0);
+
+      unmount();
+
+      // The pending timer must be cancelled on unmount — left uncancelled, it
+      // stays scheduled and fires later against a torn-down `searchRef`.
+      expect(vi.getTimerCount()).toBeLessThan(pendingBeforeUnmount);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});