@gradio/gallery 0.17.6 → 0.17.8

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @gradio/gallery
 
+## 0.17.8
+
+### Fixes
+
+- [#13335](https://github.com/gradio-app/gradio/pull/13335) [`953efe0`](https://github.com/gradio-app/gradio/commit/953efe06fa6d0742a9dd899b846d45fbc6ea3ccf) - Prevent Gallery Select Event From Triggering When Value Updated Programmatically.  Thanks @freddyaboulton!
+
+## 0.17.7
+
+### Dependency updates
+
+- @gradio/atoms@0.24.0
+- @gradio/statustracker@0.14.1
+- @gradio/upload@0.17.9
+- @gradio/file@0.14.8
+- @gradio/image@0.26.3
+- @gradio/video@0.20.8
+
 ## 0.17.6
 
 ### Features

package/Gallery.test.ts

@@ -627,7 +627,7 @@ describe("Events: select", () => {
 		expect(select).toHaveBeenCalledWith(expect.objectContaining({ index: 1 }));
 	});
 
-	test("select: fired when selected_index changes via set_data", async () => {
+	test("select: not fired when selected_index changes via set_data", async () => {
 		const { listen, set_data } = await render(Gallery, {
 			...default_props,
 			preview: true,
@@ -639,8 +639,25 @@ describe("Events: select", () => {
 
 		await set_data({ selected_index: 2 });
 
-		expect(select).toHaveBeenCalled();
-		expect(select).toHaveBeenCalledWith(expect.objectContaining({ index: 2 }));
+		expect(select).not.toHaveBeenCalled();
+	});
+
+	test("select: not fired when value and selected_index update together via set_data", async () => {
+		const { listen, set_data } = await render(Gallery, {
+			...default_props,
+			preview: true,
+			selected_index: 0,
+			value: [img("a"), img("b")]
+		});
+
+		const select = listen("select");
+
+		await set_data({
+			value: [img("a"), img("b"), img("c")],
+			selected_index: 2
+		});
+
+		expect(select).not.toHaveBeenCalled();
 	});
 });
 
@@ -976,7 +993,7 @@ describe("Regression: #13170 — selected_index points to newly appended image",
 		expect(preview_img.src).toBe("https://example.com/img3.png");
 	});
 
-	test("selected_index pointing to newly appended item dispatches select with correct data", async () => {
+	test("selected_index pointing to newly appended item does not dispatch select", async () => {
 		const initial_value = [img("a"), img("b")];
 
 		const { set_data, listen } = await render(Gallery, {
@@ -993,9 +1010,7 @@ describe("Regression: #13170 — selected_index points to newly appended image",
 			selected_index: 2
 		});
 
-		expect(select).toHaveBeenCalled();
-		const last_call = select.mock.calls[select.mock.calls.length - 1][0];
-		expect(last_call.index).toBe(2);
+		expect(select).not.toHaveBeenCalled();
 	});
 
 	test("rapidly appending images with selected_index tracking last always shows the latest", async () => {

package/dist/shared/Gallery.svelte

@@ -160,7 +160,6 @@
 	if (selected_index == null && preview && value?.length) {
 		selected_index = 0;
 	}
-	let old_selected_index: number | null = $state(selected_index);
 
 	$effect(() => {
 		if (!dequal(prev_value, value)) {
@@ -195,6 +194,15 @@
 		() => ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0)
 	);
 
+	function dispatch_select(index: number): void {
+		if (resolved_value !== null) {
+			onselect({
+				index,
+				value: resolved_value?.[index]
+			});
+		}
+	}
+
 	function handle_preview_click(event: MouseEvent): void {
 		const element = event.target as HTMLElement;
 		const x = event.offsetX;
@@ -206,6 +214,7 @@
 		} else {
 			selected_index = next;
 		}
+		dispatch_select(selected_index);
 	}
 
 	function on_keydown(e: KeyboardEvent): void {
@@ -218,32 +227,18 @@
 			case "ArrowLeft":
 				e.preventDefault();
 				selected_index = previous;
+				dispatch_select(selected_index);
 				break;
 			case "ArrowRight":
 				e.preventDefault();
 				selected_index = next;
+				dispatch_select(selected_index);
 				break;
 			default:
 				break;
 		}
 	}
 
-	$effect(() => {
-		// Only trigger the effect if the selected_index has actually changed
-		if (selected_index !== old_selected_index) {
-			old_selected_index = selected_index;
-
-			// Ensure we have a valid selection and data to work with
-			if (selected_index !== null && resolved_value !== null) {
-				// Notify the parent component or listener about the updated selection
-				onselect({
-					index: selected_index,
-					value: resolved_value?.[selected_index]
-				});
-			}
-		}
-	});
-
 	$effect(() => {
 		if (allow_preview && container_element) {
 			scroll_to_img(selected_index);
@@ -495,7 +490,10 @@
 					{#each resolved_value as media, i}
 						<button
 							bind:this={el[i]}
-							on:click={() => (selected_index = i)}
+							on:click={() => {
+								selected_index = i;
+								dispatch_select(i);
+							}}
 							class="thumbnail-item thumbnail-small"
 							class:selected={selected_index === i && mode !== "minimal"}
 							aria-label={"Thumbnail " +
@@ -616,6 +614,7 @@
 									onpreview_open();
 								}
 								selected_index = i;
+								dispatch_select(i);
 							}}
 							aria-label={"Thumbnail " +
 								(i + 1) +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.17.6",
+  "version": "0.17.8",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.23.1",
-    "@gradio/file": "^0.14.7",
-    "@gradio/icons": "^0.15.1",
+    "@gradio/atoms": "^0.24.0",
+    "@gradio/file": "^0.14.8",
     "@gradio/client": "^2.2.0",
-    "@gradio/upload": "^0.17.8",
+    "@gradio/icons": "^0.15.1",
+    "@gradio/image": "^0.26.3",
+    "@gradio/statustracker": "^0.14.1",
     "@gradio/utils": "^0.12.2",
-    "@gradio/video": "^0.20.7",
-    "@gradio/statustracker": "^0.14.0",
-    "@gradio/image": "^0.26.2"
+    "@gradio/upload": "^0.17.9",
+    "@gradio/video": "^0.20.8"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Gallery.svelte

@@ -160,7 +160,6 @@
 	if (selected_index == null && preview && value?.length) {
 		selected_index = 0;
 	}
-	let old_selected_index: number | null = $state(selected_index);
 
 	$effect(() => {
 		if (!dequal(prev_value, value)) {
@@ -195,6 +194,15 @@
 		() => ((selected_index ?? 0) + 1) % (resolved_value?.length ?? 0)
 	);
 
+	function dispatch_select(index: number): void {
+		if (resolved_value !== null) {
+			onselect({
+				index,
+				value: resolved_value?.[index]
+			});
+		}
+	}
+
 	function handle_preview_click(event: MouseEvent): void {
 		const element = event.target as HTMLElement;
 		const x = event.offsetX;
@@ -206,6 +214,7 @@
 		} else {
 			selected_index = next;
 		}
+		dispatch_select(selected_index);
 	}
 
 	function on_keydown(e: KeyboardEvent): void {
@@ -218,32 +227,18 @@
 			case "ArrowLeft":
 				e.preventDefault();
 				selected_index = previous;
+				dispatch_select(selected_index);
 				break;
 			case "ArrowRight":
 				e.preventDefault();
 				selected_index = next;
+				dispatch_select(selected_index);
 				break;
 			default:
 				break;
 		}
 	}
 
-	$effect(() => {
-		// Only trigger the effect if the selected_index has actually changed
-		if (selected_index !== old_selected_index) {
-			old_selected_index = selected_index;
-
-			// Ensure we have a valid selection and data to work with
-			if (selected_index !== null && resolved_value !== null) {
-				// Notify the parent component or listener about the updated selection
-				onselect({
-					index: selected_index,
-					value: resolved_value?.[selected_index]
-				});
-			}
-		}
-	});
-
 	$effect(() => {
 		if (allow_preview && container_element) {
 			scroll_to_img(selected_index);
@@ -495,7 +490,10 @@
 					{#each resolved_value as media, i}
 						<button
 							bind:this={el[i]}
-							on:click={() => (selected_index = i)}
+							on:click={() => {
+								selected_index = i;
+								dispatch_select(i);
+							}}
 							class="thumbnail-item thumbnail-small"
 							class:selected={selected_index === i && mode !== "minimal"}
 							aria-label={"Thumbnail " +
@@ -616,6 +614,7 @@
 									onpreview_open();
 								}
 								selected_index = i;
+								dispatch_select(i);
 							}}
 							aria-label={"Thumbnail " +
 								(i + 1) +