@gradio/tabs 0.5.10 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/tabs
 
+## 0.6.0
+
+### Features
+
+- [#13467](https://github.com/gradio-app/gradio/pull/13467) [`feba2e1`](https://github.com/gradio-app/gradio/commit/feba2e1e41c68f4bbdacf4c963d8d9689d4b3346) - `Tab`, `TabItem`, `Plot` Unit tests.  Thanks @dawoodkhan82!
+
+## 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

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/Tabs.test.ts

@@ -0,0 +1,269 @@
+import { test, describe, afterEach, expect } from "vitest";
+import { cleanup, render, fireEvent } from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
+import type { Tab } from "./shared/Tabs.svelte";
+
+import Tabs from "./Index.svelte";
+import TabsWithChild from "./WithChild.svelte";
+
+const make_tab = (over: Partial<Tab>): Tab => ({
+	label: "Tab",
+	id: "t1",
+	elem_id: undefined,
+	visible: true,
+	interactive: true,
+	scale: null,
+	component_id: 1,
+	...over
+});
+
+const tabs: Tab[] = [
+	make_tab({ label: "First", id: "t1", component_id: 1 }),
+	make_tab({ label: "Second", id: "t2", component_id: 2 }),
+	make_tab({ label: "Third", id: "t3", component_id: 3 })
+];
+
+const default_props = {
+	initial_tabs: tabs,
+	selected: "t1",
+	name: "tabs" as const,
+	visible: true
+};
+
+run_shared_prop_tests({
+	component: Tabs,
+	name: "Tabs",
+	base_props: { initial_tabs: tabs, selected: "t1", name: "tabs" },
+	has_label: false,
+	has_validation_error: false,
+	has_block_wrapper: false,
+	visible_false_hides: true
+});
+
+describe("Tabs", () => {
+	afterEach(() => cleanup());
+
+	test("renders a tab button for each visible tab", async () => {
+		const { getByRole } = await render(Tabs, default_props);
+
+		expect(getByRole("tab", { name: "First" })).toBeInTheDocument();
+		expect(getByRole("tab", { name: "Second" })).toBeInTheDocument();
+		expect(getByRole("tab", { name: "Third" })).toBeInTheDocument();
+	});
+
+	test("does not render a button for a tab with visible: false", async () => {
+		const { queryByRole } = await render(Tabs, {
+			...default_props,
+			initial_tabs: [
+				make_tab({ label: "Shown", id: "t1", component_id: 1 }),
+				make_tab({ label: "Gone", id: "t2", visible: false, component_id: 2 })
+			]
+		});
+
+		expect(queryByRole("tab", { name: "Gone" })).toBeNull();
+		expect(queryByRole("tab", { name: "Shown" })).toBeInTheDocument();
+	});
+
+	test("the selected tab is marked aria-selected", async () => {
+		const { getByRole } = await render(Tabs, {
+			...default_props,
+			selected: "t2"
+		});
+
+		expect(getByRole("tab", { name: "Second" })).toHaveAttribute(
+			"aria-selected",
+			"true"
+		);
+		expect(getByRole("tab", { name: "First" })).toHaveAttribute(
+			"aria-selected",
+			"false"
+		);
+	});
+});
+
+describe("Props: interactive", () => {
+	afterEach(() => cleanup());
+
+	test("a non-interactive tab is disabled", async () => {
+		const { getByRole } = await render(Tabs, {
+			...default_props,
+			initial_tabs: [
+				make_tab({ label: "Active", id: "t1", component_id: 1 }),
+				make_tab({
+					label: "Locked",
+					id: "t2",
+					interactive: false,
+					component_id: 2
+				})
+			]
+		});
+
+		expect(getByRole("tab", { name: "Locked" })).toBeDisabled();
+		expect(getByRole("tab", { name: "Active" })).toBeEnabled();
+	});
+});
+
+describe("Events: select", () => {
+	afterEach(() => cleanup());
+
+	test("clicking a tab dispatches select with its details", async () => {
+		const { listen, getByRole } = await render(Tabs, default_props);
+
+		const select = listen("select");
+
+		await fireEvent.click(getByRole("tab", { name: "Second" }));
+
+		expect(select).toHaveBeenCalledTimes(1);
+		expect(select).toHaveBeenCalledWith({
+			value: "Second",
+			index: 1,
+			id: "t2",
+			component_id: 2
+		});
+	});
+
+	test("clicking the already-selected tab does not dispatch select", async () => {
+		const { listen, getByRole } = await render(Tabs, default_props);
+
+		const select = listen("select");
+
+		await fireEvent.click(getByRole("tab", { name: "First" }));
+
+		expect(select).not.toHaveBeenCalled();
+	});
+
+	test("clicking a disabled tab does not make it the selected tab", async () => {
+		const { listen, get_data, getByRole } = await render(Tabs, {
+			...default_props,
+			selected: "t1",
+			initial_tabs: [
+				make_tab({ label: "Active", id: "t1", component_id: 1 }),
+				make_tab({
+					label: "Locked",
+					id: "t2",
+					interactive: false,
+					component_id: 2
+				})
+			]
+		});
+
+		const change = listen("change");
+
+		await fireEvent.click(getByRole("tab", { name: "Locked" }));
+
+		expect(change).not.toHaveBeenCalled();
+		expect(getByRole("tab", { name: "Locked" })).toHaveAttribute(
+			"aria-selected",
+			"false"
+		);
+		expect((await get_data()).selected).toBe("t1");
+	});
+});
+
+describe("Events: change", () => {
+	afterEach(() => cleanup());
+
+	test("clicking a different tab dispatches change once", async () => {
+		const { listen, getByRole } = await render(Tabs, default_props);
+
+		const change = listen("change");
+
+		await fireEvent.click(getByRole("tab", { name: "Third" }));
+
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("clicking the already-selected tab does not dispatch change", async () => {
+		const { listen, getByRole } = await render(Tabs, default_props);
+
+		const change = listen("change");
+
+		await fireEvent.click(getByRole("tab", { name: "First" }));
+
+		expect(change).not.toHaveBeenCalled();
+	});
+});
+
+describe("Events: gradio_tab_select", () => {
+	afterEach(() => cleanup());
+
+	test("fires when the selected tab changes via set_data", async () => {
+		const { listen, set_data } = await render(Tabs, default_props);
+
+		const gradio_tab_select = listen("gradio_tab_select");
+
+		await set_data({ selected: "t3" });
+
+		expect(gradio_tab_select).toHaveBeenCalledTimes(1);
+		expect(gradio_tab_select).toHaveBeenCalledWith({
+			value: "Third",
+			index: 2,
+			id: "t3",
+			component_id: 3
+		});
+	});
+});
+
+describe("get_data / set_data", () => {
+	afterEach(() => cleanup());
+
+	test("get_data returns the initial selection", async () => {
+		const { get_data } = await render(Tabs, default_props);
+
+		const data = await get_data();
+		expect(data.selected).toBe("t1");
+	});
+
+	test("clicking a tab updates the selection returned by get_data", async () => {
+		const { get_data, getByRole } = await render(Tabs, default_props);
+
+		await fireEvent.click(getByRole("tab", { name: "Second" }));
+
+		const data = await get_data();
+		expect(data.selected).toBe("t2");
+	});
+
+	test("set_data updates which tab is marked aria-selected", async () => {
+		const { set_data, getByRole } = await render(Tabs, default_props);
+
+		await set_data({ selected: "t3" });
+
+		expect(getByRole("tab", { name: "Third" })).toHaveAttribute(
+			"aria-selected",
+			"true"
+		);
+	});
+
+	test("set_data then get_data round-trips the selection", async () => {
+		const { set_data, get_data } = await render(Tabs, default_props);
+
+		await set_data({ selected: "t2" });
+
+		const data = await get_data();
+		expect(data.selected).toBe("t2");
+	});
+});
+
+describe("Children / slot", () => {
+	afterEach(() => cleanup());
+
+	test("renders slot children inside the tabs container", async () => {
+		const { getByTestId } = await render(TabsWithChild, default_props);
+
+		expect(getByTestId("slot-content")).toBeVisible();
+	});
+});
+
+describe("Edge cases", () => {
+	afterEach(() => cleanup());
+
+	test("no select or change events fire on initial mount", async () => {
+		const { listen } = await render(Tabs, default_props);
+
+		const select = listen("select", { retrospective: true });
+		const change = listen("change", { retrospective: true });
+
+		expect(select).not.toHaveBeenCalled();
+		expect(change).not.toHaveBeenCalled();
+	});
+});

package/WithChild.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Tabs from "./Index.svelte";
+	let props = $props();
+</script>
+
+<Tabs {...props}>
+	<div data-testid="slot-content">tab panel content</div>
+</Tabs>

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/WithChild.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Tabs from "./Index.svelte";
+	let props = $props();
+</script>
+
+<Tabs {...props}>
+	<div data-testid="slot-content">tab panel content</div>
+</Tabs>

package/dist/WithChild.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WithChild: import("svelte").Component<$$ComponentProps, {}, "">;
+type WithChild = ReturnType<typeof WithChild>;
+export default WithChild;

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;
@@ -138,6 +142,8 @@
 		await tick();
 		await new Promise((r) => requestAnimationFrame(r));
 
+		if (!tab_nav_el) return;
+
 		const available = tab_nav_el.clientWidth;
 
 		let cumulative = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.5.10",
+  "version": "0.6.0",
   "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;
@@ -138,6 +142,8 @@
 		await tick();
 		await new Promise((r) => requestAnimationFrame(r));
 
+		if (!tab_nav_el) return;
+
 		const available = tab_nav_el.clientWidth;
 
 		let cumulative = 0;