@gradio/tabs 0.5.9 → 0.5.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/tabs
 
+## 0.5.11
+
+### Fixes
+
+- [#13240](https://github.com/gradio-app/gradio/pull/13240) [`0d670ad`](https://github.com/gradio-app/gradio/commit/0d670adf41a0b510f7fd745495dce1664d38f0e5) - Fix browser freeze when a dataframe's value is set (e.g. via a tab select event), and only dispatch the tabs select event when the selected tab actually changes.  Thanks @freddyaboulton!
+
+## 0.5.10
+
+### Fixes
+
+- [#13303](https://github.com/gradio-app/gradio/pull/13303) [`79c5776`](https://github.com/gradio-app/gradio/commit/79c577680978adfb5eeaa01944635e14dc67e5f1) - Rework `Dataframe` wrapping, truncation, and column width sizing.  Thanks @pngwn!
+
 ## 0.5.9
 
 ### Fixes

package/Index.svelte

@@ -7,24 +7,26 @@
 	import Tabs from "./shared/Tabs.svelte";
 	import Walkthrough from "./shared/Walkthrough.svelte";
 	import type { TabsProps, TabsEvents } from "./types";
-	import { untrack } from "svelte";
 
 	let props = $props();
 	const gradio = new Gradio<TabsEvents, TabsProps>(props);
 
+	let old_selected = gradio.props.selected;
+
 	$effect(() => {
-		if (gradio.props.selected) {
-			untrack(() => {
-				const i = gradio.props.initial_tabs.findIndex(
-					(t) => t.id === gradio.props.selected
-				);
+		if (old_selected !== gradio.props.selected) {
+			const i = gradio.props.initial_tabs.findIndex(
+				(t) => t.id === gradio.props.selected
+			);
+			if (i >= 0) {
 				gradio.dispatch("gradio_tab_select", {
 					value: gradio.props.initial_tabs[i].label,
 					index: i,
 					id: gradio.props.initial_tabs[i].id,
 					component_id: gradio.props.initial_tabs[i].component_id
 				});
-			});
+			}
+			old_selected = gradio.props.selected;
 		}
 	});
 </script>

package/dist/Index.svelte

@@ -7,24 +7,26 @@
 	import Tabs from "./shared/Tabs.svelte";
 	import Walkthrough from "./shared/Walkthrough.svelte";
 	import type { TabsProps, TabsEvents } from "./types";
-	import { untrack } from "svelte";
 
 	let props = $props();
 	const gradio = new Gradio<TabsEvents, TabsProps>(props);
 
+	let old_selected = gradio.props.selected;
+
 	$effect(() => {
-		if (gradio.props.selected) {
-			untrack(() => {
-				const i = gradio.props.initial_tabs.findIndex(
-					(t) => t.id === gradio.props.selected
-				);
+		if (old_selected !== gradio.props.selected) {
+			const i = gradio.props.initial_tabs.findIndex(
+				(t) => t.id === gradio.props.selected
+			);
+			if (i >= 0) {
 				gradio.dispatch("gradio_tab_select", {
 					value: gradio.props.initial_tabs[i].label,
 					index: i,
 					id: gradio.props.initial_tabs[i].id,
 					component_id: gradio.props.initial_tabs[i].component_id
 				});
-			});
+			}
+			old_selected = gradio.props.selected;
 		}
 	});
 </script>

package/dist/shared/Tabs.svelte

@@ -37,16 +37,20 @@
 
 	// When initial_tabs changes (e.g. a non-mounted tab's props were updated),
 	// sync the internal tabs array so the tab buttons reflect the new state.
-	// Using a function call so the $: dependency is only on initial_tabs,
-	// not on tabs (which would cause a loop with register_tab).
+	// The tabs mutation is deferred via tick() because in Svelte 5 legacy mode
+	// $: effects track all reads inside called functions — writing tabs[i]
+	// through the $state proxy would track `tabs` as a dependency, creating
+	// an infinite self-triggering loop.
 	$: _sync_tabs(initial_tabs);
 
 	function _sync_tabs(new_tabs: Tab[]): void {
-		for (let i = 0; i < new_tabs.length; i++) {
-			if (new_tabs[i] && !mounted_tab_orders.has(i)) {
-				tabs[i] = new_tabs[i];
+		tick().then(() => {
+			for (let i = 0; i < new_tabs.length; i++) {
+				if (new_tabs[i] && !mounted_tab_orders.has(i)) {
+					tabs[i] = new_tabs[i];
+				}
 			}
-		}
+		});
 	}
 
 	$: has_tabs = tabs.length > 0;
@@ -70,10 +74,11 @@
 
 	onMount(() => {
 		if (!tab_nav_el) return;
-		const observer = new IntersectionObserver((entries) => {
+		const ro = new ResizeObserver(() => {
 			handle_menu_overflow();
 		});
-		observer.observe(tab_nav_el);
+		ro.observe(tab_nav_el);
+		return () => ro.disconnect();
 	});
 
 	setContext(TABS, {
@@ -128,33 +133,42 @@
 		}
 	}
 
+	// approximate width of the "..." overflow button including margin
+	const OVERFLOW_BTN_RESERVE = 48;
+
 	async function handle_menu_overflow(): Promise<void> {
 		if (!tab_nav_el) return;
 
 		await tick();
-		const tab_nav_size = tab_nav_el.getBoundingClientRect();
+		await new Promise((r) => requestAnimationFrame(r));
+
+		const available = tab_nav_el.clientWidth;
 
-		let max_width = tab_nav_size.width;
-		const tab_sizes = get_tab_sizes(tabs, tab_els);
-		let last_visible_index = 0;
-		const offset = tab_nav_size.left;
+		let cumulative = 0;
+		let split_index = tabs.length;
 
-		for (let i = tabs.length - 1; i >= 0; i--) {
+		for (let i = 0; i < tabs.length; i++) {
 			const tab = tabs[i];
-			if (!tab) continue;
-			const tab_rect = tab_sizes[tab.id];
-			if (!tab_rect) continue;
-			if (tab_rect.right - offset < max_width) {
-				last_visible_index = i;
+			if (!tab || tab.visible === false || tab.visible === "hidden") continue;
+			const el = tab_els[tab.id];
+			if (!el) continue;
+			cumulative += el.getBoundingClientRect().width;
+			const has_more = tabs
+				.slice(i + 1)
+				.some((t) => t && t.visible !== false && t.visible !== "hidden");
+			const limit = has_more ? available - OVERFLOW_BTN_RESERVE : available;
+			if (cumulative > limit) {
+				split_index = i;
 				break;
 			}
 		}
 
-		overflow_tabs = tabs.slice(last_visible_index + 1);
-		visible_tabs = tabs.slice(0, last_visible_index + 1);
+		visible_tabs = tabs.slice(0, split_index);
+		overflow_tabs = tabs.slice(split_index);
 
 		overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
-		is_overflowing = overflow_tabs.length > 0;
+		is_overflowing =
+			overflow_tabs.filter((t) => t && t.visible !== false).length > 0;
 	}
 
 	$: overflow_has_selected_tab =
@@ -167,18 +181,6 @@
 		return overflow_tabs.some((t) => t?.id === selected_tab);
 	}
 
-	function get_tab_sizes(
-		tabs: (Tab | null)[],
-		tab_els: Record<string | number, HTMLElement>
-	): Record<string | number, DOMRect> {
-		const tab_sizes: Record<string | number, DOMRect> = {};
-		tabs.forEach((tab) => {
-			if (!tab) return;
-			tab_sizes[tab.id] = tab_els[tab.id]?.getBoundingClientRect();
-		});
-		return tab_sizes;
-	}
-
 	$: tab_scale =
 		tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 </script>
@@ -277,9 +279,7 @@
 <style>
 	.tabs {
 		position: relative;
-		display: flex;
 		flex-direction: column;
-		gap: var(--layout-gap);
 	}
 
 	.hide {
@@ -297,6 +297,7 @@
 		position: relative;
 		height: var(--size-8);
 		padding-bottom: var(--size-2);
+		margin-bottom: var(--layout-gap);
 	}
 
 	.tab-container {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",

package/shared/Tabs.svelte

@@ -37,16 +37,20 @@
 
 	// When initial_tabs changes (e.g. a non-mounted tab's props were updated),
 	// sync the internal tabs array so the tab buttons reflect the new state.
-	// Using a function call so the $: dependency is only on initial_tabs,
-	// not on tabs (which would cause a loop with register_tab).
+	// The tabs mutation is deferred via tick() because in Svelte 5 legacy mode
+	// $: effects track all reads inside called functions — writing tabs[i]
+	// through the $state proxy would track `tabs` as a dependency, creating
+	// an infinite self-triggering loop.
 	$: _sync_tabs(initial_tabs);
 
 	function _sync_tabs(new_tabs: Tab[]): void {
-		for (let i = 0; i < new_tabs.length; i++) {
-			if (new_tabs[i] && !mounted_tab_orders.has(i)) {
-				tabs[i] = new_tabs[i];
+		tick().then(() => {
+			for (let i = 0; i < new_tabs.length; i++) {
+				if (new_tabs[i] && !mounted_tab_orders.has(i)) {
+					tabs[i] = new_tabs[i];
+				}
 			}
-		}
+		});
 	}
 
 	$: has_tabs = tabs.length > 0;
@@ -70,10 +74,11 @@
 
 	onMount(() => {
 		if (!tab_nav_el) return;
-		const observer = new IntersectionObserver((entries) => {
+		const ro = new ResizeObserver(() => {
 			handle_menu_overflow();
 		});
-		observer.observe(tab_nav_el);
+		ro.observe(tab_nav_el);
+		return () => ro.disconnect();
 	});
 
 	setContext(TABS, {
@@ -128,33 +133,42 @@
 		}
 	}
 
+	// approximate width of the "..." overflow button including margin
+	const OVERFLOW_BTN_RESERVE = 48;
+
 	async function handle_menu_overflow(): Promise<void> {
 		if (!tab_nav_el) return;
 
 		await tick();
-		const tab_nav_size = tab_nav_el.getBoundingClientRect();
+		await new Promise((r) => requestAnimationFrame(r));
+
+		const available = tab_nav_el.clientWidth;
 
-		let max_width = tab_nav_size.width;
-		const tab_sizes = get_tab_sizes(tabs, tab_els);
-		let last_visible_index = 0;
-		const offset = tab_nav_size.left;
+		let cumulative = 0;
+		let split_index = tabs.length;
 
-		for (let i = tabs.length - 1; i >= 0; i--) {
+		for (let i = 0; i < tabs.length; i++) {
 			const tab = tabs[i];
-			if (!tab) continue;
-			const tab_rect = tab_sizes[tab.id];
-			if (!tab_rect) continue;
-			if (tab_rect.right - offset < max_width) {
-				last_visible_index = i;
+			if (!tab || tab.visible === false || tab.visible === "hidden") continue;
+			const el = tab_els[tab.id];
+			if (!el) continue;
+			cumulative += el.getBoundingClientRect().width;
+			const has_more = tabs
+				.slice(i + 1)
+				.some((t) => t && t.visible !== false && t.visible !== "hidden");
+			const limit = has_more ? available - OVERFLOW_BTN_RESERVE : available;
+			if (cumulative > limit) {
+				split_index = i;
 				break;
 			}
 		}
 
-		overflow_tabs = tabs.slice(last_visible_index + 1);
-		visible_tabs = tabs.slice(0, last_visible_index + 1);
+		visible_tabs = tabs.slice(0, split_index);
+		overflow_tabs = tabs.slice(split_index);
 
 		overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
-		is_overflowing = overflow_tabs.length > 0;
+		is_overflowing =
+			overflow_tabs.filter((t) => t && t.visible !== false).length > 0;
 	}
 
 	$: overflow_has_selected_tab =
@@ -167,18 +181,6 @@
 		return overflow_tabs.some((t) => t?.id === selected_tab);
 	}
 
-	function get_tab_sizes(
-		tabs: (Tab | null)[],
-		tab_els: Record<string | number, HTMLElement>
-	): Record<string | number, DOMRect> {
-		const tab_sizes: Record<string | number, DOMRect> = {};
-		tabs.forEach((tab) => {
-			if (!tab) return;
-			tab_sizes[tab.id] = tab_els[tab.id]?.getBoundingClientRect();
-		});
-		return tab_sizes;
-	}
-
 	$: tab_scale =
 		tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 </script>
@@ -277,9 +279,7 @@
 <style>
 	.tabs {
 		position: relative;
-		display: flex;
 		flex-direction: column;
-		gap: var(--layout-gap);
 	}
 
 	.hide {
@@ -297,6 +297,7 @@
 		position: relative;
 		height: var(--size-8);
 		padding-bottom: var(--size-2);
+		margin-bottom: var(--layout-gap);
 	}
 
 	.tab-container {