@gradio/tabs 0.5.8 → 0.5.10

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/tabs
 
+## 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
+
+- [#13048](https://github.com/gradio-app/gradio/pull/13048) [`a5d4096`](https://github.com/gradio-app/gradio/commit/a5d40965bba21a832da522127048926b71c1a6dd) - Fix Tab Interactive Bug.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+
+## 0.5.8
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+
 ## 0.5.8
 
 ### Dependency updates

package/dist/shared/Tabs.svelte

@@ -30,6 +30,25 @@
 	let overflow_menu_open = false;
 	let overflow_menu: HTMLElement;
 
+	// Track which tab orders have been registered by mounted TabItem components.
+	// Once a TabItem mounts and calls register_tab, it manages its own tab entry
+	// via _set_data -> register_tab, so _sync_tabs should not overwrite it.
+	let mounted_tab_orders: Set<number> = new Set();
+
+	// 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).
+	$: _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];
+			}
+		}
+	}
+
 	$: has_tabs = tabs.length > 0;
 
 	let tab_nav_el: HTMLDivElement;
@@ -51,14 +70,16 @@
 
 	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, {
 		register_tab: (tab: Tab, order: number) => {
+			mounted_tab_orders.add(order);
 			tabs[order] = tab;
 
 			if ($selected_tab === false && tab.visible !== false && tab.interactive) {
@@ -68,6 +89,7 @@
 			return order;
 		},
 		unregister_tab: (tab: Tab, order: number) => {
+			mounted_tab_orders.delete(order);
 			if ($selected_tab === tab.id) {
 				$selected_tab = tabs[0]?.id || false;
 			}
@@ -107,33 +129,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));
 
-		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;
+		const available = tab_nav_el.clientWidth;
 
-		for (let i = tabs.length - 1; i >= 0; i--) {
+		let cumulative = 0;
+		let split_index = tabs.length;
+
+		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 =
@@ -146,18 +177,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>
@@ -256,9 +275,7 @@
 <style>
 	.tabs {
 		position: relative;
-		display: flex;
 		flex-direction: column;
-		gap: var(--layout-gap);
 	}
 
 	.hide {
@@ -276,6 +293,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.8",
+  "version": "0.5.10",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,10 +17,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/utils": "^0.12.0"
+    "@gradio/utils": "^0.12.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.2"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"

package/shared/Tabs.svelte

@@ -30,6 +30,25 @@
 	let overflow_menu_open = false;
 	let overflow_menu: HTMLElement;
 
+	// Track which tab orders have been registered by mounted TabItem components.
+	// Once a TabItem mounts and calls register_tab, it manages its own tab entry
+	// via _set_data -> register_tab, so _sync_tabs should not overwrite it.
+	let mounted_tab_orders: Set<number> = new Set();
+
+	// 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).
+	$: _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];
+			}
+		}
+	}
+
 	$: has_tabs = tabs.length > 0;
 
 	let tab_nav_el: HTMLDivElement;
@@ -51,14 +70,16 @@
 
 	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, {
 		register_tab: (tab: Tab, order: number) => {
+			mounted_tab_orders.add(order);
 			tabs[order] = tab;
 
 			if ($selected_tab === false && tab.visible !== false && tab.interactive) {
@@ -68,6 +89,7 @@
 			return order;
 		},
 		unregister_tab: (tab: Tab, order: number) => {
+			mounted_tab_orders.delete(order);
 			if ($selected_tab === tab.id) {
 				$selected_tab = tabs[0]?.id || false;
 			}
@@ -107,33 +129,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));
 
-		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;
+		const available = tab_nav_el.clientWidth;
 
-		for (let i = tabs.length - 1; i >= 0; i--) {
+		let cumulative = 0;
+		let split_index = tabs.length;
+
+		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 =
@@ -146,18 +177,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>
@@ -256,9 +275,7 @@
 <style>
 	.tabs {
 		position: relative;
-		display: flex;
 		flex-direction: column;
-		gap: var(--layout-gap);
 	}
 
 	.hide {
@@ -276,6 +293,7 @@
 		position: relative;
 		height: var(--size-8);
 		padding-bottom: var(--size-2);
+		margin-bottom: var(--layout-gap);
 	}
 
 	.tab-container {