@gradio/gallery 0.15.36 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gradio/gallery
 
+## 0.16.0
+
+### Features
+
+- [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components.  Thanks @abidlabs!
+
+### Fixes
+
+- [#12577](https://github.com/gradio-app/gradio/pull/12577) [`b4c00d2`](https://github.com/gradio-app/gradio/commit/b4c00d2f531d38e2677ea76cfeb412a7bd3bb1a3) - Fix Gallery preview_close event not firing on ESC key.  Thanks @majiayu000!
+
+### Dependency updates
+
+- @gradio/atoms@0.20.0
+- @gradio/utils@0.11.0
+- @gradio/client@2.0.1
+- @gradio/statustracker@0.12.1
+- @gradio/upload@0.17.3
+- @gradio/file@0.14.0
+- @gradio/image@0.25.0
+- @gradio/video@0.19.0
+
 ## 0.15.36
 
 ### Dependency updates

package/Gallery.test.ts

@@ -104,4 +104,41 @@ describe("Gallery", () => {
 		});
 		assert.equal(change_event.callCount, 0);
 	});
+
+	test("triggers preview_close event when pressing Escape key", async () => {
+		const { listen, getByTestId } = await render(Gallery, {
+			show_label: true,
+			label: "Gallery",
+			loading_status: loading_status,
+			preview: true,
+			buttons: ["share", "download", "fullscreen"],
+			value: [
+				{
+					image: {
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
+					},
+					caption: null
+				}
+			]
+		});
+
+		const preview_close_event = listen("preview_close");
+
+		// Find the preview container and dispatch Escape key event
+		const preview = document.querySelector(".preview");
+		if (preview) {
+			const escapeEvent = new KeyboardEvent("keydown", {
+				code: "Escape",
+				key: "Escape",
+				bubbles: true
+			});
+			preview.dispatchEvent(escapeEvent);
+		}
+
+		assert.isTrue(
+			preview_close_event.callCount >= 1,
+			"preview_close event should be triggered when pressing Escape"
+		);
+	});
 });

package/Index.svelte

@@ -152,12 +152,22 @@
 			allow_preview={gradio.props.allow_preview}
 			bind:selected_index={gradio.props.selected_index}
 			bind:value={gradio.props.value}
-			show_share_button={gradio.props.buttons.includes("share")}
-			show_download_button={gradio.props.buttons.includes("download")}
+			show_share_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "share"
+			)}
+			show_download_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "download"
+			)}
 			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.shared.client.fetch(...args)}
-			show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
+			show_fullscreen_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "fullscreen"
+			)}
+			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 			{fullscreen}
 			root={gradio.shared.root}
 			file_types={gradio.props.file_types}

package/dist/Index.svelte

@@ -152,12 +152,22 @@
 			allow_preview={gradio.props.allow_preview}
 			bind:selected_index={gradio.props.selected_index}
 			bind:value={gradio.props.value}
-			show_share_button={gradio.props.buttons.includes("share")}
-			show_download_button={gradio.props.buttons.includes("download")}
+			show_share_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "share"
+			)}
+			show_download_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "download"
+			)}
 			fit_columns={gradio.props.fit_columns}
 			i18n={gradio.i18n}
 			_fetch={(...args) => gradio.shared.client.fetch(...args)}
-			show_fullscreen_button={gradio.props.buttons.includes("fullscreen")}
+			show_fullscreen_button={gradio.props.buttons.some(
+				(btn) => typeof btn === "string" && btn === "fullscreen"
+			)}
+			buttons={gradio.props.buttons}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 			{fullscreen}
 			root={gradio.shared.root}
 			file_types={gradio.props.file_types}

package/dist/shared/Gallery.svelte

@@ -7,6 +7,7 @@
 		IconButtonWrapper,
 		FullscreenButton
 	} from "@gradio/atoms";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 	import { ModifyUpload, Upload as UploadComponent } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
 	import { Image } from "@gradio/image/shared";
@@ -57,6 +58,8 @@
 	export let stream_handler: Client["stream"] | undefined = undefined;
 	export let fit_columns = true;
 	export let upload_promise: Promise<any> | null = null;
+	export let buttons: (string | CustomButtonType)[] | null = null;
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -161,6 +164,7 @@
 			case "Escape":
 				e.preventDefault();
 				selected_index = null;
+				dispatch("preview_close");
 				break;
 			case "ArrowLeft":
 				e.preventDefault();
@@ -330,6 +334,8 @@
 			>
 				<IconButtonWrapper
 					display_top_corner={display_icon_button_wrapper_top_corner}
+					{buttons}
+					{on_custom_button_click}
 				>
 					{#if show_download_button}
 						<IconButton

package/dist/shared/Gallery.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { CustomButton as CustomButtonType } from "@gradio/utils";
 import type { SelectData } from "@gradio/utils";
 import type { GalleryImage, GalleryVideo } from "../types";
 import { FileData } from "@gradio/client";
@@ -43,6 +44,8 @@ declare const Gallery: $$__sveltets_2_IsomorphicComponent<{
     stream_handler?: Client["stream"] | undefined;
     fit_columns?: boolean;
     upload_promise?: Promise<any> | null;
+    buttons?: (string | CustomButtonType)[] | null;
+    on_custom_button_click?: ((id: number) => void) | null;
 }, {
     fullscreen: CustomEvent<any>;
     share: CustomEvent<import("@gradio/utils").ShareData>;

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { FileData, SelectData } from "@gradio/client";
+import type { CustomButton } from "@gradio/utils";
 export interface GalleryImage {
     image: FileData;
     caption: string | null;
@@ -18,7 +19,7 @@ export interface GalleryProps {
     allow_preview: boolean;
     selected_index: number | null;
     object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
-    buttons: string[];
+    buttons: (string | CustomButton)[];
     type: "numpy" | "pil" | "filepath";
     fit_columns: boolean;
 }
@@ -35,4 +36,7 @@ export interface GalleryEvents {
     clear_status: any;
     share: any;
     error: any;
+    custom_button_click: {
+        id: number;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.15.36",
+  "version": "0.16.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.3",
-    "@gradio/atoms": "^0.19.0",
-    "@gradio/client": "^2.0.0",
-    "@gradio/file": "^0.13.1",
-    "@gradio/image": "^0.24.0",
+    "@gradio/atoms": "^0.20.0",
+    "@gradio/client": "^2.0.1",
     "@gradio/icons": "^0.15.0",
-    "@gradio/statustracker": "^0.12.0",
-    "@gradio/upload": "^0.17.2",
-    "@gradio/utils": "^0.10.4",
-    "@gradio/video": "^0.18.0"
+    "@gradio/file": "^0.14.0",
+    "@gradio/statustracker": "^0.12.1",
+    "@gradio/upload": "^0.17.3",
+    "@gradio/image": "^0.25.0",
+    "@gradio/utils": "^0.11.0",
+    "@gradio/video": "^0.19.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.15.1"

package/shared/Gallery.svelte

@@ -7,6 +7,7 @@
 		IconButtonWrapper,
 		FullscreenButton
 	} from "@gradio/atoms";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 	import { ModifyUpload, Upload as UploadComponent } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
 	import { Image } from "@gradio/image/shared";
@@ -57,6 +58,8 @@
 	export let stream_handler: Client["stream"] | undefined = undefined;
 	export let fit_columns = true;
 	export let upload_promise: Promise<any> | null = null;
+	export let buttons: (string | CustomButtonType)[] | null = null;
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 
 	let is_full_screen = false;
 	let image_container: HTMLElement;
@@ -161,6 +164,7 @@
 			case "Escape":
 				e.preventDefault();
 				selected_index = null;
+				dispatch("preview_close");
 				break;
 			case "ArrowLeft":
 				e.preventDefault();
@@ -330,6 +334,8 @@
 			>
 				<IconButtonWrapper
 					display_top_corner={display_icon_button_wrapper_top_corner}
+					{buttons}
+					{on_custom_button_click}
 				>
 					{#if show_download_button}
 						<IconButton

package/types.ts

@@ -1,4 +1,5 @@
 import type { FileData, SelectData } from "@gradio/client";
+import type { CustomButton } from "@gradio/utils";
 
 export interface GalleryImage {
 	image: FileData;
@@ -22,7 +23,7 @@ export interface GalleryProps {
 	allow_preview: boolean;
 	selected_index: number | null;
 	object_fit: "contain" | "cover" | "fill" | "none" | "scale-down";
-	buttons: string[];
+	buttons: (string | CustomButton)[];
 	type: "numpy" | "pil" | "filepath";
 	fit_columns: boolean;
 }
@@ -37,4 +38,5 @@ export interface GalleryEvents {
 	clear_status: any;
 	share: any;
 	error: any;
+	custom_button_click: { id: number };
 }