@gradio/tabs 0.5.8 → 0.5.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/tabs
 
+## 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;
@@ -59,6 +78,7 @@
 
 	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 +88,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;
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "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;
@@ -59,6 +78,7 @@
 
 	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 +88,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;
 			}