@gradio/gallery 0.17.7 → 0.18.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @gradio/gallery
 
+## 0.18.0
+
+### Features
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/statustracker@0.15.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+- @gradio/upload@0.18.0
+- @gradio/image@0.27.0
+- @gradio/file@0.15.0
+- @gradio/video@0.21.0
+
+## 0.17.8
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
+## 0.17.8
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
+## 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

package/Gallery.stories.svelte

@@ -2,8 +2,6 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Gallery from "./Index.svelte";
 	import { allModes } from "../storybook/modes";
-	import { within } from "@testing-library/dom";
-	import { userEvent } from "storybook/test";
 	import { wrapProps } from "../storybook/wrapProps";
 
 	const cheetah = "/cheetah.jpg";
@@ -157,15 +155,6 @@
 		buttons: ["fullscreen", "download", "share"],
 		sources: ["upload"]
 	}}
-	play={async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		const image = await canvas.findByLabelText("Thumbnail 1 of 8");
-		await userEvent.click(image);
-		const expand_btn = await canvas.findByRole("button", {
-			name: "Fullscreen"
-		});
-		await userEvent.click(expand_btn);
-	}}
 >
 	{#snippet template(args)}
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
@@ -186,37 +175,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with rows=3 and columns=3"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		rows: 3,
-		columns: 3,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with columns=4"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		columns: 4,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with height=600"
 	args={{
@@ -231,21 +189,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with allow_preview=false"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		allow_preview: false,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with preview"
 	args={{
@@ -261,36 +204,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with object_fit=scale-down"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		object_fit: "scale-down",
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with object_fit=contain"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		object_fit: "contain",
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with object_fit=cover"
 	args={{
@@ -306,21 +219,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with object_fit=none"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		object_fit: "none",
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with object_fit=fill"
 	args={{
@@ -336,69 +234,6 @@
 	{/snippet}
 </Story>
 
-<Story
-	name="Gallery with share button"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		buttons: ["share"],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with overflow of images"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		rows: 2,
-		columns: 2,
-		height: 400,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with overflow of images and short height"
-	args={{
-		label: "My Cheetah Gallery",
-		show_label: true,
-		rows: 2,
-		columns: 2,
-		height: 200,
-		buttons: [],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
-<Story
-	name="Gallery with download button"
-	args={{
-		label: "My Cheetah Gallery",
-		rows: 2,
-		height: 400,
-		buttons: ["download"],
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>
-
 <Story
 	name="Gallery with fit_columns false"
 	args={{
@@ -413,18 +248,3 @@
 		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
 	{/snippet}
 </Story>
-
-<Story
-	name="Gallery with fit_columns true"
-	args={{
-		label: "My Cheetah Gallery",
-		columns: 10,
-		buttons: ["download"],
-		fit_columns: true,
-		sources: ["upload"]
-	}}
->
-	{#snippet template(args)}
-		<Gallery {...wrapProps({ value: galleryValue, ...args })} />
-	{/snippet}
-</Story>

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/Index.svelte

@@ -30,7 +30,7 @@
 	}
 
 	const props = $props();
-	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
+	const gradio = new GalleryGradio(props, {
 		selected_index: null,
 		file_types: ["image", "video"]
 	});
@@ -192,7 +192,7 @@
 					gradio.dispatch("upload", gradio.props.value);
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				onerror={({ detail }) => {
+				onerror={(detail) => {
 					gradio.shared.loading_status = gradio.shared.loading_status || {};
 					gradio.shared.loading_status.status = "error";
 					gradio.dispatch("error", detail);
@@ -206,6 +206,7 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
+					if (!(e.detail instanceof Blob)) return;
 					const f = await handle_save(
 						e.detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
@@ -231,7 +232,8 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
-					const f = { ...e.detail };
+					if (!e.detail) return;
+					const f = { ...(e.detail as FileData) };
 					f.mime_type = "video/webm";
 					const processed_files = await process_upload_files([f]);
 					gradio.props.value?.push(...processed_files);
@@ -254,7 +256,7 @@
 				{sources}
 				bind:active_source
 				handle_clear={() => gradio.dispatch("clear")}
-				handle_select={handle_select_source}
+				handle_select={(source) => handle_select_source(source as any)}
 			/>
 		{/if}
 	{:else}
@@ -282,7 +284,7 @@
 				gradio.dispatch("change", gradio.props.value);
 			}}
 			{sources}
-			{onsource_change}
+			onsource_change={(source) => onsource_change(source as any)}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			columns={gradio.props.columns}

package/dist/Index.svelte

@@ -30,7 +30,7 @@
 	}
 
 	const props = $props();
-	const gradio = new GalleryGradio<GalleryEvents, GalleryProps>(props, {
+	const gradio = new GalleryGradio(props, {
 		selected_index: null,
 		file_types: ["image", "video"]
 	});
@@ -192,7 +192,7 @@
 					gradio.dispatch("upload", gradio.props.value);
 					gradio.dispatch("change", gradio.props.value);
 				}}
-				onerror={({ detail }) => {
+				onerror={(detail) => {
 					gradio.shared.loading_status = gradio.shared.loading_status || {};
 					gradio.shared.loading_status.status = "error";
 					gradio.dispatch("error", detail);
@@ -206,6 +206,7 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
+					if (!(e.detail instanceof Blob)) return;
 					const f = await handle_save(
 						e.detail,
 						(f) => gradio.shared.client.upload(f, gradio.shared.root),
@@ -231,7 +232,8 @@
 				root={gradio.shared.root}
 				value={null}
 				on:capture={async (e) => {
-					const f = { ...e.detail };
+					if (!e.detail) return;
+					const f = { ...(e.detail as FileData) };
 					f.mime_type = "video/webm";
 					const processed_files = await process_upload_files([f]);
 					gradio.props.value?.push(...processed_files);
@@ -254,7 +256,7 @@
 				{sources}
 				bind:active_source
 				handle_clear={() => gradio.dispatch("clear")}
-				handle_select={handle_select_source}
+				handle_select={(source) => handle_select_source(source as any)}
 			/>
 		{/if}
 	{:else}
@@ -282,7 +284,7 @@
 				gradio.dispatch("change", gradio.props.value);
 			}}
 			{sources}
-			{onsource_change}
+			onsource_change={(source) => onsource_change(source as any)}
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
 			columns={gradio.props.columns}

package/dist/shared/Gallery.svelte

@@ -112,7 +112,7 @@
 	} = $props();
 
 	let upload_promise: Promise<any> | null = null;
-	let mode: "normal" | "minimal" = "normal";
+	let mode = $state<"normal" | "minimal">("normal");
 	let display_icon_button_wrapper_top_corner = false;
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -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/dist/shared/utils.d.ts

@@ -1,3 +1,3 @@
-import { FileData, Client } from "@gradio/client";
+import { FileData } from "@gradio/client";
 export declare function format_gallery_for_sharing(value: [FileData, string | null][] | null): Promise<string>;
-export declare function handle_save(img_blob: Blob, upload: Client["upload"], filename?: string): Promise<FileData[]>;
+export declare function handle_save(img_blob: Blob, upload: (files: FileData[]) => Promise<(FileData | null)[] | null>, filename?: string): Promise<FileData[]>;

package/dist/shared/utils.js

@@ -1,5 +1,5 @@
 import { uploadToHuggingFace } from "@gradio/utils";
-import { FileData, Client } from "@gradio/client";
+import { FileData } from "@gradio/client";
 export async function format_gallery_for_sharing(value) {
     if (!value)
         return "";
@@ -25,5 +25,5 @@ export async function handle_save(img_blob, upload, filename = "uploaded_file")
             is_stream: false
         })
     ];
-    return (await upload(...files));
+    return ((await upload(files)) ?? []).filter((file) => file !== null);
 }

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import type { FileData, SelectData } from "@gradio/client";
-import type { CustomButton } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { CustomButton, SelectData } from "@gradio/utils";
 export interface GalleryImage {
     image: FileData;
     caption: string | null;
@@ -34,6 +34,7 @@ export interface GalleryEvents {
     };
     preview_open: never;
     preview_close: never;
+    clear: never;
     clear_status: any;
     share: any;
     error: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.17.7",
+  "version": "0.18.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.24.0",
-    "@gradio/client": "^2.2.0",
+    "@gradio/atoms": "^0.25.0",
+    "@gradio/file": "^0.15.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/file": "^0.14.8",
-    "@gradio/utils": "^0.12.2",
-    "@gradio/image": "^0.26.3",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/video": "^0.20.8",
-    "@gradio/statustracker": "^0.14.1"
+    "@gradio/client": "^2.3.0",
+    "@gradio/image": "^0.27.0",
+    "@gradio/statustracker": "^0.15.0",
+    "@gradio/utils": "^0.13.0",
+    "@gradio/upload": "^0.18.0",
+    "@gradio/video": "^0.21.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Gallery.svelte

@@ -112,7 +112,7 @@
 	} = $props();
 
 	let upload_promise: Promise<any> | null = null;
-	let mode: "normal" | "minimal" = "normal";
+	let mode = $state<"normal" | "minimal">("normal");
 	let display_icon_button_wrapper_top_corner = false;
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -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/shared/utils.ts

@@ -1,5 +1,5 @@
 import { uploadToHuggingFace } from "@gradio/utils";
-import { FileData, Client } from "@gradio/client";
+import { FileData } from "@gradio/client";
 
 export async function format_gallery_for_sharing(
 	value: [FileData, string | null][] | null
@@ -19,8 +19,8 @@ export async function format_gallery_for_sharing(
 
 export async function handle_save(
 	img_blob: Blob,
-	upload: Client["upload"],
-	filename: string = "uploaded_file"
+	upload: (files: FileData[]) => Promise<(FileData | null)[] | null>,
+	filename = "uploaded_file"
 ): Promise<FileData[]> {
 	const ext = img_blob.type.split("/")[1] || "png";
 	const f_ = new File([img_blob], `${filename}.${ext}`);
@@ -34,5 +34,7 @@ export async function handle_save(
 			is_stream: false
 		})
 	];
-	return (await upload(...files)) as FileData[];
+	return ((await upload(files)) ?? []).filter(
+		(file): file is FileData => file !== null
+	);
 }

package/types.ts

@@ -1,5 +1,5 @@
-import type { FileData, SelectData } from "@gradio/client";
-import type { CustomButton } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { CustomButton, SelectData } from "@gradio/utils";
 
 export interface GalleryImage {
 	image: FileData;
@@ -36,6 +36,7 @@ export interface GalleryEvents {
 	delete: { file: FileData; index: number };
 	preview_open: never;
 	preview_close: never;
+	clear: never;
 	clear_status: any;
 	share: any;
 	error: any;