@gradio/gallery 0.15.32 → 0.15.34

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/gallery
 
+## 0.15.34
+
+### Fixes
+
+- [#11938](https://github.com/gradio-app/gradio/pull/11938) [`beddde5`](https://github.com/gradio-app/gradio/commit/beddde5d432904d6384b7285acdbf1fd78469af7) - Fix bug where Gallery scrollbar would not show up.  Thanks @freddyaboulton!
+
+## 0.15.33
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.1
+- @gradio/atoms@0.18.0
+- @gradio/client@1.19.0
+- @gradio/upload@0.17.0
+- @gradio/image@0.23.0
+- @gradio/file@0.13.0
+- @gradio/video@0.16.0
+
 ## 0.15.32
 
 ### Fixes

package/Gallery.stories.svelte

@@ -34,7 +34,7 @@
 				defaultValue: 2
 			},
 			height: {
-				options: ["auto", 500, 600],
+				options: ["auto", 200, 500, 600],
 				description: "The height of the grid",
 				control: { type: "select" },
 				defaultValue: "auto"
@@ -258,7 +258,16 @@
 		height: 400
 	}}
 />
-
+<Story
+	name="Gallery with overflow of images and short height"
+	args={{
+		label: "My Cheetah Gallery",
+		show_label: true,
+		rows: 2,
+		columns: 2,
+		height: 200
+	}}
+/>
 <Story
 	name="Gallery with download button"
 	args={{

package/Index.svelte

@@ -22,7 +22,7 @@
 	export let root: string;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let value: GalleryData[] | null = null;
 	export let file_types: string[] | null = ["image", "video"];
 	export let container = true;

package/dist/Index.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
         root: string;
         elem_id?: string;
         elem_classes?: string[];
-        visible?: boolean;
+        visible?: boolean | "hidden";
         value?: (GalleryImage | GalleryVideo)[] | null;
         file_types?: string[] | null;
         container?: boolean;

package/dist/shared/Gallery.svelte

@@ -378,6 +378,7 @@ let uploading = false;
 			class:minimal={mode === "minimal"}
 			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
 			class:hidden={is_full_screen}
+			style:height={height !== "auto" ? height + "px" : null}
 		>
 			{#if interactive && selected_index === null}
 				<ModifyUpload {i18n} on:clear={() => (value = [])}>
@@ -401,7 +402,7 @@ let uploading = false;
 			{/if}
 			<div
 				class="grid-container"
-				style="--grid-cols:{effective_columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
+				style="--grid-cols:{effective_columns}; --grid-rows:{rows}; --object-fit: {object_fit};"
 				class:pt-6={show_label}
 			>
 				{#each resolved_value as entry, i}
@@ -639,7 +640,6 @@ let uploading = false;
 	.grid-wrap {
 		position: relative;
 		padding: var(--size-2);
-		height: var(--size-full);
 		overflow-y: scroll;
 	}
 

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

@@ -43,7 +43,7 @@ declare const __propDef: {
             file: FileData;
             index: number;
         }>;
-        upload: CustomEvent<FileData | FileData[]>;
+        upload: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.15.32",
+  "version": "0.15.34",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,15 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.17.0",
-    "@gradio/client": "^1.18.0",
     "@gradio/icons": "^0.14.0",
-    "@gradio/image": "^0.22.18",
-    "@gradio/statustracker": "^0.11.0",
-    "@gradio/upload": "^0.16.17",
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/image": "^0.23.0",
+    "@gradio/client": "^1.19.0",
+    "@gradio/upload": "^0.17.0",
+    "@gradio/statustracker": "^0.11.1",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.15.1",
-    "@gradio/file": "^0.12.29"
+    "@gradio/video": "^0.16.0",
+    "@gradio/file": "^0.13.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.14.0"

package/shared/Gallery.svelte

@@ -461,6 +461,7 @@
 			class:minimal={mode === "minimal"}
 			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
 			class:hidden={is_full_screen}
+			style:height={height !== "auto" ? height + "px" : null}
 		>
 			{#if interactive && selected_index === null}
 				<ModifyUpload {i18n} on:clear={() => (value = [])}>
@@ -484,7 +485,7 @@
 			{/if}
 			<div
 				class="grid-container"
-				style="--grid-cols:{effective_columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
+				style="--grid-cols:{effective_columns}; --grid-rows:{rows}; --object-fit: {object_fit};"
 				class:pt-6={show_label}
 			>
 				{#each resolved_value as entry, i}
@@ -722,7 +723,6 @@
 	.grid-wrap {
 		position: relative;
 		padding: var(--size-2);
-		height: var(--size-full);
 		overflow-y: scroll;
 	}