Allows selection of directories in File Explorer (#9835)

* changes

* changes

* changes

* add changeset

* changes

* Update js/fileexplorer/shared/FileTree.svelte

Co-authored-by: Hannah <[email protected]>

---------

Co-authored-by: Ali Abid <[email protected]>
Co-authored-by: gradio-pr-bot <[email protected]>
Co-authored-by: Hannah <[email protected]>

Author: 4 people

.changeset/bumpy-crews-open.md

@@ -0,0 +1,6 @@
+---
+"@gradio/fileexplorer": patch
+"gradio": patch
+---
+
+fix:Allows selection of directories in File Explorer

js/fileexplorer/shared/FileTree.svelte

@@ -67,24 +67,27 @@
 	{#each content as { type, name, valid }, i}
 		<li>
 			<span class="wrap">
-				<Checkbox
-					disabled={!interactive ||
-						(type === "folder" && file_count === "single")}
-					value={(type === "file" ? selected_files : selected_folders).some(
-						(x) => x[0] === name && x.length === 1
-					)}
-					on:change={(e) => {
-						let checked = e.detail;
-						dispatch("check", {
-							path: [...path, name],
-							checked,
-							type
-						});
-						if (type === "folder" && checked) {
-							open_folder(i);
-						}
-					}}
-				/>
+				{#if type === "folder" && file_count === "single"}
+					<span class="no-checkbox" aria-hidden="true"></span>
+				{:else}
+					<Checkbox
+						disabled={!interactive}
+						value={(type === "file" ? selected_files : selected_folders).some(
+							(x) => x[0] === name && x.length === 1
+						)}
+						on:change={(e) => {
+							let checked = e.detail;
+							dispatch("check", {
+								path: [...path, name],
+								checked,
+								type
+							});
+							if (type === "folder" && checked) {
+								open_folder(i);
+							}
+						}}
+					/>
+				{/if}
 
 				{#if type === "folder"}
 					<span
@@ -180,6 +183,11 @@
 		color: var(--color-accent);
 	}
 
+	.no-checkbox {
+		width: 18px;
+		height: 18px;
+	}
+
 	.hidden :global(> *) {
 		transform: rotate(0);
 		color: var(--body-text-color-subdued);