@gradio/tabitem 0.6.6 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @gradio/tabitem
 
+## 0.8.0
+
+### Features
+
+- [#13509](https://github.com/gradio-app/gradio/pull/13509) [`dcd072c`](https://github.com/gradio-app/gradio/commit/dcd072cd57f09ffd2dc5f97ae6afc505894824a6) - Migrate Chatbot, Tabs, TabItem to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/tabs@0.7.0
+
+## 0.7.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!
+
+### Dependency updates
+
+- @gradio/tabs@0.6.0
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/tabs@0.5.10
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/column@0.3.3
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+- @gradio/tabs@0.5.9
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/column@0.3.2
+
 ## 0.6.6
 
 ### Dependency updates

package/Index.svelte

@@ -22,7 +22,7 @@
 	order={gradio.props.order}
 	scale={gradio.props.scale}
 	component_id={gradio.props.component_id}
-	on:select={({ detail }) => gradio.dispatch("select", detail)}
+	onselect={(data) => gradio.dispatch("select", data)}
 >
 	<slot />
 </TabItem>

package/TabItem.test.ts

@@ -0,0 +1,123 @@
+import { test, describe, afterEach, expect, vi } from "vitest";
+import { cleanup, render, waitFor } from "@self/tootils/render";
+
+import TabItemHarness from "./TabItemHarness.svelte";
+
+describe("TabItem", () => {
+	afterEach(() => cleanup());
+
+	test("renders its slot content inside a tabpanel", async () => {
+		const { getByRole, getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t1"
+		});
+
+		expect(getByRole("tabpanel", { hidden: true })).toBeInTheDocument();
+		expect(getByTestId("tab-content")).toHaveTextContent("tab panel content");
+	});
+
+	test("content is visible when this tab is the selected tab", async () => {
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t1"
+		});
+
+		expect(getByTestId("tab-content")).toBeVisible();
+	});
+
+	test("content is hidden when a different tab is selected", async () => {
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t2"
+		});
+
+		expect(getByTestId("tab-content")).not.toBeVisible();
+	});
+
+	test("content stays hidden when visible is false even if selected", async () => {
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t1",
+			tab_visible: false
+		});
+
+		expect(getByTestId("tab-content")).not.toBeVisible();
+	});
+
+	test("uses a stable internal id when no explicit id is provided", async () => {
+		const on_register = vi.fn();
+		const { getByTestId } = await render(TabItemHarness, {
+			omit_id: true,
+			tab_selected: 1,
+			on_register
+		});
+
+		expect(getByTestId("tab-content")).toBeVisible();
+		await waitFor(() => {
+			expect(on_register).toHaveBeenCalledWith(
+				expect.objectContaining({ id: 1 })
+			);
+		});
+	});
+
+	test("keeps 0 as an explicit id", async () => {
+		const on_register = vi.fn();
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_id: 0,
+			tab_selected: 0,
+			on_register
+		});
+
+		expect(getByTestId("tab-content")).toBeVisible();
+		await waitFor(() => {
+			expect(on_register).toHaveBeenCalledWith(
+				expect.objectContaining({ id: 0 })
+			);
+		});
+	});
+
+	test("keeps an empty string as an explicit id", async () => {
+		const on_register = vi.fn();
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_id: "",
+			tab_selected: "",
+			on_register
+		});
+
+		expect(getByTestId("tab-content")).toBeVisible();
+		await waitFor(() => {
+			expect(on_register).toHaveBeenCalledWith(
+				expect.objectContaining({ id: "" })
+			);
+		});
+	});
+});
+
+describe("Events: select", () => {
+	afterEach(() => cleanup());
+
+	test("fires when this tab is the active index on mount", async () => {
+		const on_tab_select = vi.fn();
+
+		await render(TabItemHarness, {
+			tab_selected: "t1",
+			tab_selected_index: 0,
+			on_tab_select
+		});
+
+		await waitFor(() => {
+			expect(on_tab_select).toHaveBeenCalledWith({
+				value: "First Tab",
+				index: 0
+			});
+		});
+	});
+
+	test("does not fire when this tab is not the active index", async () => {
+		const on_tab_select = vi.fn();
+
+		await render(TabItemHarness, {
+			tab_selected: "t2",
+			tab_selected_index: 1,
+			on_tab_select
+		});
+
+		expect(on_tab_select).not.toHaveBeenCalled();
+	});
+});

package/TabItemHarness.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import { TABS } from "@gradio/tabs";
+	import { BaseTabItem } from "./Index.svelte";
+
+	let all = $props();
+	const cfg = (all as any).props ?? {};
+
+	const selected_tab = writable<string | number | false>(
+		cfg.tab_selected ?? "t1"
+	);
+	const selected_tab_index = writable<number>(cfg.tab_selected_index ?? 0);
+
+	setContext(TABS, {
+		register_tab: (tab: any, order: number) => {
+			cfg.on_register?.(tab);
+			return order;
+		},
+		unregister_tab: () => {},
+		selected_tab,
+		selected_tab_index
+	});
+</script>
+
+<BaseTabItem
+	label="First Tab"
+	id={cfg.omit_id ? undefined : (cfg.tab_id ?? "t1")}
+	order={0}
+	visible={cfg.tab_visible ?? true}
+	interactive={true}
+	scale={0}
+	component_id={1}
+	onselect={(data) => cfg.on_tab_select?.(data)}
+>
+	<div data-testid="tab-content">tab panel content</div>
+</BaseTabItem>

package/dist/Index.svelte

@@ -22,7 +22,7 @@
 	order={gradio.props.order}
 	scale={gradio.props.scale}
 	component_id={gradio.props.component_id}
-	on:select={({ detail }) => gradio.dispatch("select", detail)}
+	onselect={(data) => gradio.dispatch("select", data)}
 >
 	<slot />
 </TabItem>

package/dist/TabItemHarness.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import { TABS } from "@gradio/tabs";
+	import { BaseTabItem } from "./Index.svelte";
+
+	let all = $props();
+	const cfg = (all as any).props ?? {};
+
+	const selected_tab = writable<string | number | false>(
+		cfg.tab_selected ?? "t1"
+	);
+	const selected_tab_index = writable<number>(cfg.tab_selected_index ?? 0);
+
+	setContext(TABS, {
+		register_tab: (tab: any, order: number) => {
+			cfg.on_register?.(tab);
+			return order;
+		},
+		unregister_tab: () => {},
+		selected_tab,
+		selected_tab_index
+	});
+</script>
+
+<BaseTabItem
+	label="First Tab"
+	id={cfg.omit_id ? undefined : (cfg.tab_id ?? "t1")}
+	order={0}
+	visible={cfg.tab_visible ?? true}
+	interactive={true}
+	scale={0}
+	component_id={1}
+	onselect={(data) => cfg.on_tab_select?.(data)}
+>
+	<div data-testid="tab-content">tab panel content</div>
+</BaseTabItem>

package/dist/TabItemHarness.svelte.d.ts

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

package/dist/shared/TabItem.svelte

@@ -1,56 +1,81 @@
 <script lang="ts">
-	import { getContext, onMount, createEventDispatcher, tick } from "svelte";
+	import { getContext, tick, untrack } from "svelte";
 	import { TABS } from "@gradio/tabs";
 	import { BaseColumn } from "@gradio/column";
 	import type { SelectData } from "@gradio/utils";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let label: string;
-	export let id: string | number | object = {};
-	export let visible: boolean | "hidden";
-	export let interactive: boolean;
-	export let order: number;
-	export let scale: number;
-	export let component_id: number;
-
-	const dispatch = createEventDispatcher<{ select: SelectData }>();
+	let {
+		elem_id = "",
+		elem_classes = [],
+		label,
+		id,
+		visible,
+		interactive,
+		order,
+		scale,
+		component_id,
+		onselect
+	}: {
+		elem_id?: string;
+		elem_classes?: string[];
+		label: string;
+		id?: string | number | null;
+		visible: boolean | "hidden";
+		interactive: boolean;
+		order: number;
+		scale: number;
+		component_id: number;
+		onselect?: (data: SelectData) => void;
+	} = $props();
 
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
 		getContext(TABS) as any;
 
-	let tab_index: number;
+	let tab_index = $state<number | undefined>(undefined);
 
 	function _register_tab(obj: string, order: number): number {
 		obj = JSON.parse(obj);
 		return register_tab(obj, order);
 	}
 
-	$: props_json = JSON.stringify({
-		label,
-		id,
-		elem_id,
-		visible,
-		interactive,
-		scale,
-		component_id
-	});
+	let tab_id = $derived(id ?? component_id);
 
-	$: tab_index = _register_tab(props_json, order);
+	let props_json = $derived(
+		JSON.stringify({
+			label,
+			id: tab_id,
+			elem_id,
+			visible,
+			interactive,
+			scale,
+			component_id
+		})
+	);
 
-	onMount(() => {
-		return (): void => unregister_tab({ label, id, elem_id }, order);
+	let is_visible = $derived(visible !== false && visible !== "hidden");
+
+	$effect(() => {
+		const tab_props = props_json;
+		tab_index = untrack(() => _register_tab(tab_props, order));
+	});
+
+	$effect(() => {
+		return (): void => unregister_tab({ label, id: tab_id, elem_id }, order);
 	});
 
-	$: $selected_tab_index === tab_index &&
-		tick().then(() => dispatch("select", { value: label, index: tab_index }));
+	$effect(() => {
+		const index = tab_index;
+		if (index !== undefined && $selected_tab_index === index) {
+			tick().then(() => onselect?.({ value: label, index }));
+		}
+	});
 </script>
 
 <div
 	id={elem_id}
 	class="tabitem {elem_classes.join(' ')}"
 	class:grow-children={scale >= 1}
-	style:display={$selected_tab === id && visible !== false ? "flex" : "none"}
+	style:display={$selected_tab === tab_id && is_visible ? "flex" : "none"}
 	style:flex-grow={scale}
 	role="tabpanel"
 >

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

@@ -1,4 +1,16 @@
 import type { SelectData } from "@gradio/utils";
+type $$ComponentProps = {
+    elem_id?: string;
+    elem_classes?: string[];
+    label: string;
+    id?: string | number | null;
+    visible: boolean | "hidden";
+    interactive: boolean;
+    order: number;
+    scale: number;
+    component_id: number;
+    onselect?: (data: SelectData) => void;
+};
 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;
@@ -17,24 +29,12 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } ? Props extends Record<string, never> ? any : {
     children?: any;
 } : {});
-declare const TabItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    elem_id?: string;
-    elem_classes?: string[];
-    label: string;
-    id?: string | number | object;
-    visible: boolean | "hidden";
-    interactive: boolean;
-    order: number;
-    scale: number;
-    component_id: number;
-}, {
+declare const TabItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
     default: {};
 }>, {
-    select: CustomEvent<SelectData>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-}, {}, string>;
+}, {}, "">;
 type TabItem = InstanceType<typeof TabItem>;
 export default TabItem;

package/dist/types.d.ts

@@ -3,7 +3,7 @@ export interface TabItemProps {
     elem_id: string;
     elem_classes: string[];
     label: string;
-    id: string | number;
+    id?: string | number | null;
     visible: boolean | "hidden";
     interactive: boolean;
     order: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.6.6",
+  "version": "0.8.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/column": "^0.3.2",
-    "@gradio/tabs": "^0.5.8",
-    "@gradio/utils": "^0.12.0"
+    "@gradio/column": "^0.3.3",
+    "@gradio/utils": "^0.12.2",
+    "@gradio/tabs": "^0.7.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.2"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"

package/shared/TabItem.svelte

@@ -1,56 +1,81 @@
 <script lang="ts">
-	import { getContext, onMount, createEventDispatcher, tick } from "svelte";
+	import { getContext, tick, untrack } from "svelte";
 	import { TABS } from "@gradio/tabs";
 	import { BaseColumn } from "@gradio/column";
 	import type { SelectData } from "@gradio/utils";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let label: string;
-	export let id: string | number | object = {};
-	export let visible: boolean | "hidden";
-	export let interactive: boolean;
-	export let order: number;
-	export let scale: number;
-	export let component_id: number;
-
-	const dispatch = createEventDispatcher<{ select: SelectData }>();
+	let {
+		elem_id = "",
+		elem_classes = [],
+		label,
+		id,
+		visible,
+		interactive,
+		order,
+		scale,
+		component_id,
+		onselect
+	}: {
+		elem_id?: string;
+		elem_classes?: string[];
+		label: string;
+		id?: string | number | null;
+		visible: boolean | "hidden";
+		interactive: boolean;
+		order: number;
+		scale: number;
+		component_id: number;
+		onselect?: (data: SelectData) => void;
+	} = $props();
 
 	const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
 		getContext(TABS) as any;
 
-	let tab_index: number;
+	let tab_index = $state<number | undefined>(undefined);
 
 	function _register_tab(obj: string, order: number): number {
 		obj = JSON.parse(obj);
 		return register_tab(obj, order);
 	}
 
-	$: props_json = JSON.stringify({
-		label,
-		id,
-		elem_id,
-		visible,
-		interactive,
-		scale,
-		component_id
-	});
+	let tab_id = $derived(id ?? component_id);
 
-	$: tab_index = _register_tab(props_json, order);
+	let props_json = $derived(
+		JSON.stringify({
+			label,
+			id: tab_id,
+			elem_id,
+			visible,
+			interactive,
+			scale,
+			component_id
+		})
+	);
 
-	onMount(() => {
-		return (): void => unregister_tab({ label, id, elem_id }, order);
+	let is_visible = $derived(visible !== false && visible !== "hidden");
+
+	$effect(() => {
+		const tab_props = props_json;
+		tab_index = untrack(() => _register_tab(tab_props, order));
+	});
+
+	$effect(() => {
+		return (): void => unregister_tab({ label, id: tab_id, elem_id }, order);
 	});
 
-	$: $selected_tab_index === tab_index &&
-		tick().then(() => dispatch("select", { value: label, index: tab_index }));
+	$effect(() => {
+		const index = tab_index;
+		if (index !== undefined && $selected_tab_index === index) {
+			tick().then(() => onselect?.({ value: label, index }));
+		}
+	});
 </script>
 
 <div
 	id={elem_id}
 	class="tabitem {elem_classes.join(' ')}"
 	class:grow-children={scale >= 1}
-	style:display={$selected_tab === id && visible !== false ? "flex" : "none"}
+	style:display={$selected_tab === tab_id && is_visible ? "flex" : "none"}
 	style:flex-grow={scale}
 	role="tabpanel"
 >

package/types.ts

@@ -4,7 +4,7 @@ export interface TabItemProps {
 	elem_id: string;
 	elem_classes: string[];
 	label: string;
-	id: string | number;
+	id?: string | number | null;
 	visible: boolean | "hidden";
 	interactive: boolean;
 	order: number;