Resolves #386, resolves #385

Author: haydenbleasel

.changeset/open-crabs-start.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Separate select and toggle actions in FileTreeFolder so clicking the chevron only expands/collapses and clicking the name only selects

packages/elements/__tests__/file-tree.test.tsx

@@ -55,7 +55,7 @@ describe("fileTreeFolder", () => {
     expect(screen.getByText("index.ts")).toBeInTheDocument();
   });
 
-  it("toggles expansion on click", async () => {
+  it("toggles expansion on chevron click", async () => {
     const user = userEvent.setup();
     render(
       <FileTree>
@@ -68,13 +68,32 @@ describe("fileTreeFolder", () => {
     // Initially collapsed
     expect(screen.queryByText("index.ts")).not.toBeInTheDocument();
 
-    // Click to expand
-    const folderButton = screen.getByRole("button");
-    await user.click(folderButton);
+    // Click chevron to expand
+    const [chevronButton] = screen.getAllByRole("button");
+    await user.click(chevronButton);
 
     expect(screen.getByText("index.ts")).toBeInTheDocument();
   });
 
+  it("selects folder without toggling expansion", async () => {
+    const onSelect = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <FileTree onSelect={onSelect}>
+        <FileTreeFolder name="src" path="src">
+          <FileTreeFile name="index.ts" path="src/index.ts" />
+        </FileTreeFolder>
+      </FileTree>
+    );
+
+    // Click folder name to select (not chevron)
+    await user.click(screen.getByText("src"));
+
+    expect(onSelect).toHaveBeenCalledWith("src");
+    // Should NOT expand
+    expect(screen.queryByText("index.ts")).not.toBeInTheDocument();
+  });
+
   it("calls onExpandedChange when toggling", async () => {
     const onExpandedChange = vi.fn();
     const user = userEvent.setup();
@@ -87,8 +106,8 @@ describe("fileTreeFolder", () => {
       </FileTree>
     );
 
-    const folderButton = screen.getByRole("button");
-    await user.click(folderButton);
+    const [chevronButton] = screen.getAllByRole("button");
+    await user.click(chevronButton);
 
     expect(onExpandedChange).toHaveBeenCalledWith(new Set(["src"]));
   });
@@ -158,13 +177,13 @@ describe("composability", () => {
 
     expect(screen.getByText("components")).toBeInTheDocument();
 
-    // Expand nested folder
-    const componentsFolderButton = screen
-      .getByText("components")
-      .closest("button");
+    // Click folder name to find its sibling chevron, then expand
+    const componentsText = screen.getByText("components");
+    const componentsRow = componentsText.closest("div");
+    const chevronButton = componentsRow?.querySelector("button:first-child");
     // oxlint-disable-next-line eslint-plugin-jest(no-conditional-in-test)
-    if (componentsFolderButton) {
-      await user.click(componentsFolderButton);
+    if (chevronButton) {
+      await user.click(chevronButton);
     }
 
     expect(screen.getByText("Button.tsx")).toBeInTheDocument();

packages/elements/src/file-tree.tsx

@@ -38,7 +38,7 @@ const FileTreeContext = createContext<FileTreeContextType>({
   togglePath: noop,
 });
 
-export type FileTreeProps = HTMLAttributes<HTMLDivElement> & {
+export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
   expanded?: Set<string>;
   defaultExpanded?: Set<string>;
   selectedPath?: string;
@@ -169,21 +169,30 @@ export const FileTreeFolder = ({
           tabIndex={0}
           {...props}
         >
-          <CollapsibleTrigger asChild>
+          <div
+            className={cn(
+              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
+              isSelected && "bg-muted"
+            )}
+          >
+            <CollapsibleTrigger asChild>
+              <button
+                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
+                type="button"
+              >
+                <ChevronRightIcon
+                  className={cn(
+                    "size-4 shrink-0 text-muted-foreground transition-transform",
+                    isExpanded && "rotate-90"
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
             <button
-              className={cn(
-                "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
-                isSelected && "bg-muted"
-              )}
+              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
               onClick={handleSelect}
               type="button"
             >
-              <ChevronRightIcon
-                className={cn(
-                  "size-4 shrink-0 text-muted-foreground transition-transform",
-                  isExpanded && "rotate-90"
-                )}
-              />
               <FileTreeIcon>
                 {isExpanded ? (
                   <FolderOpenIcon className="size-4 text-blue-500" />
@@ -193,7 +202,7 @@ export const FileTreeFolder = ({
               </FileTreeIcon>
               <FileTreeName>{name}</FileTreeName>
             </button>
-          </CollapsibleTrigger>
+          </div>
           <CollapsibleContent>
             <div className="ml-4 border-l pl-2">{children}</div>
           </CollapsibleContent>