@gradio/dataframe 0.24.2 → 0.24.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/dataframe
 
+## 0.24.3
+
+### Fixes
+
+- [#13744](https://github.com/gradio-app/gradio/pull/13744) [`ca9dec0`](https://github.com/gradio-app/gradio/commit/ca9dec0e2e07d33cf3551f5062ff35ab9acf3026) - Re-read the Dataframe virtual window whenever the row count changes.  Thanks @abidlabs!
+
+## 0.24.2
+
+### Dependency updates
+
+- @gradio/client@2.5.0
+
 ## 0.24.2
 
 ### Fixes

package/Dataframe.test.ts

@@ -96,6 +96,34 @@ describe("Dataframe rendering", () => {
 		expect(rows.length).toBe(3);
 	});
 
+	test("resets inherited table padding so headers align with body cells", async () => {
+		const global_style = document.createElement("style");
+		global_style.textContent = "table { padding: 10px; }";
+		document.head.appendChild(global_style);
+
+		try {
+			const { container } = await render(Dataframe, default_props);
+			await wait();
+
+			const header_table = container.querySelector(
+				".header-table"
+			) as HTMLTableElement;
+			const first_header = get_header_cells(container)[0];
+			const first_body_cell = get_cell(container, 0, 0)!;
+			const header_rect = first_header.getBoundingClientRect();
+			const body_rect = first_body_cell.getBoundingClientRect();
+
+			expect(getComputedStyle(header_table).padding).toBe("0px");
+			expect(header_table.getBoundingClientRect().height).toBe(
+				header_rect.height
+			);
+			expect(header_rect.left).toBeCloseTo(body_rect.left);
+			expect(header_rect.right).toBeCloseTo(body_rect.right);
+		} finally {
+			global_style.remove();
+		}
+	});
+
 	test("renders label when show_label is true", async () => {
 		const { container } = await render(Dataframe, {
 			...default_props,

package/Example.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">
-	export let value: (string | number)[][] | string;
-	export let type: "gallery" | "table";
-	export let selected = false;
-	export let index: number;
+	let {
+		value,
+		type,
+		selected = false,
+		index
+	}: {
+		value: (string | number)[][] | string;
+		type: "gallery" | "table";
+		selected?: boolean;
+		index: number;
+	} = $props();
 
-	let hovered = false;
-	let loaded = Array.isArray(value);
-	let is_empty = loaded && (value.length === 0 || value[0].length === 0);
+	let hovered = $state(false);
+	let loaded = $derived(Array.isArray(value));
+	let is_empty = $derived(
+		loaded && (value.length === 0 || value[0].length === 0)
+	);
 </script>
 
 {#if loaded}
 	<!-- TODO: fix-->
-	<!-- svelte-ignore a11y-no-static-element-interactions-->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class:table={type === "table"}
 		class:gallery={type === "gallery"}
 		class:selected
-		on:mouseenter={() => (hovered = true)}
-		on:mouseleave={() => (hovered = false)}
+		onmouseenter={() => (hovered = true)}
+		onmouseleave={() => (hovered = false)}
 	>
 		{#if typeof value === "string"}
 			{value}

package/dist/Example.svelte

@@ -1,23 +1,32 @@
 <script lang="ts">
-	export let value: (string | number)[][] | string;
-	export let type: "gallery" | "table";
-	export let selected = false;
-	export let index: number;
+	let {
+		value,
+		type,
+		selected = false,
+		index
+	}: {
+		value: (string | number)[][] | string;
+		type: "gallery" | "table";
+		selected?: boolean;
+		index: number;
+	} = $props();
 
-	let hovered = false;
-	let loaded = Array.isArray(value);
-	let is_empty = loaded && (value.length === 0 || value[0].length === 0);
+	let hovered = $state(false);
+	let loaded = $derived(Array.isArray(value));
+	let is_empty = $derived(
+		loaded && (value.length === 0 || value[0].length === 0)
+	);
 </script>
 
 {#if loaded}
 	<!-- TODO: fix-->
-	<!-- svelte-ignore a11y-no-static-element-interactions-->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		class:table={type === "table"}
 		class:gallery={type === "gallery"}
 		class:selected
-		on:mouseenter={() => (hovered = true)}
-		on:mouseleave={() => (hovered = false)}
+		onmouseenter={() => (hovered = true)}
+		onmouseleave={() => (hovered = false)}
 	>
 		{#if typeof value === "string"}
 			{value}

package/dist/Example.svelte.d.ts

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: (string | number)[][] | string;
     type: "gallery" | "table";
     selected?: boolean;
     index: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/shared/EditableCell.svelte

@@ -106,7 +106,10 @@
 	}
 
 	// grow the edit-mode textarea to fit its content so the overlay
-	// expands the same way the display span does.
+	// expands the same way the display span does. `rows="1"` on the element
+	// matters: without it `height: auto` falls back to the HTML default of two
+	// rows, so scrollHeight reports two lines and a single-line cell renders an
+	// edit box roughly twice the row height.
 	function use_autosize(node: HTMLTextAreaElement): any {
 		function resize(): void {
 			node.style.height = "auto";
@@ -151,6 +154,7 @@
 		readonly={is_static}
 		aria-readonly={is_static}
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
+		rows="1"
 		bind:this={el}
 		bind:value
 		class:header

package/dist/shared/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: (string | number)[][];
+	let { value }: { value: (string | number)[][] } = $props();
 </script>
 
 <table class="input-dataframe-example">

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

@@ -1,20 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: (string | number)[][];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+};
+declare const Example: import("svelte").Component<$$ComponentProps, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/shared/Table.svelte

@@ -1338,6 +1338,7 @@
 	/* Header table: auto-sizes columns by content, sticky */
 	.header-table {
 		width: 100%;
+		padding: 0;
 		color: var(--body-text-color);
 		font-size: var(--input-text-size);
 		line-height: var(--line-md);

package/dist/shared/tanstack/virtual.svelte.js

@@ -53,8 +53,8 @@ export function createSvelteVirtualizer(options) {
                 options.onChange?.(instance, sync);
             }
         });
-        if (prev_count === 0 && current_count > 0) {
-            virtualizer.measure();
+        if (current_count !== prev_count) {
+            version += 1;
         }
         prev_count = current_count;
     });

package/dist/standalone/stubs/Upload.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-	export const aria_label = "";
-	export const root = "";
-	export const upload: any = null;
-	export const stream_handler: any = null;
+	import type { Snippet } from "svelte";
+
+	let {
+		children
+	}: {
+		aria_label?: string;
+		root?: string;
+		upload?: any;
+		stream_handler?: any;
+		children?: Snippet;
+	} = $props();
 </script>
 
 <div>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/dist/standalone/stubs/Upload.svelte.d.ts

@@ -1,37 +1,11 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Upload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    aria_label?: "";
-    root?: "";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    aria_label?: string;
+    root?: string;
     upload?: any;
     stream_handler?: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    aria_label: "";
-    root: "";
-    upload: any;
-    stream_handler: any;
-}, string>;
-type Upload = InstanceType<typeof Upload>;
+    children?: Snippet;
+};
+declare const Upload: import("svelte").Component<$$ComponentProps, {}, "">;
+type Upload = ReturnType<typeof Upload>;
 export default Upload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.24.2",
+  "version": "0.24.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "@tanstack/table-core": "^8.21.3",
     "@tanstack/virtual-core": "^3.13.6",
     "@gradio/atoms": "^0.26.1",
-    "@gradio/client": "^2.4.0",
     "@gradio/button": "^0.8.2",
     "@gradio/checkbox": "^0.8.2",
     "@gradio/icons": "^0.16.0",
     "@gradio/markdown-code": "^0.10.0",
-    "@gradio/statustracker": "^0.15.2",
+    "@gradio/client": "^2.5.0",
+    "@gradio/statustracker": "^0.15.3",
     "@gradio/upload": "^0.18.2",
     "@gradio/utils": "^0.14.0"
   },

package/shared/EditableCell.svelte

@@ -106,7 +106,10 @@
 	}
 
 	// grow the edit-mode textarea to fit its content so the overlay
-	// expands the same way the display span does.
+	// expands the same way the display span does. `rows="1"` on the element
+	// matters: without it `height: auto` falls back to the HTML default of two
+	// rows, so scrollHeight reports two lines and a single-line cell renders an
+	// edit box roughly twice the row height.
 	function use_autosize(node: HTMLTextAreaElement): any {
 		function resize(): void {
 			node.style.height = "auto";
@@ -151,6 +154,7 @@
 		readonly={is_static}
 		aria-readonly={is_static}
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
+		rows="1"
 		bind:this={el}
 		bind:value
 		class:header

package/shared/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: (string | number)[][];
+	let { value }: { value: (string | number)[][] } = $props();
 </script>
 
 <table class="input-dataframe-example">

package/shared/Table.svelte

@@ -1338,6 +1338,7 @@
 	/* Header table: auto-sizes columns by content, sticky */
 	.header-table {
 		width: 100%;
+		padding: 0;
 		color: var(--body-text-color);
 		font-size: var(--input-text-size);
 		line-height: var(--line-md);

package/shared/tanstack/virtual.svelte.ts

@@ -80,8 +80,8 @@ export function createSvelteVirtualizer<
 			}
 		});
 
-		if (prev_count === 0 && current_count > 0) {
-			virtualizer.measure();
+		if (current_count !== prev_count) {
+			version += 1;
 		}
 		prev_count = current_count;
 	});

package/standalone/stubs/Upload.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-	export const aria_label = "";
-	export const root = "";
-	export const upload: any = null;
-	export const stream_handler: any = null;
+	import type { Snippet } from "svelte";
+
+	let {
+		children
+	}: {
+		aria_label?: string;
+		root?: string;
+		upload?: any;
+		stream_handler?: any;
+		children?: Snippet;
+	} = $props();
 </script>
 
 <div>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>