@gradio/tabitem 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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

@@ -39,6 +39,54 @@ describe("TabItem", () => {
 
 		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", () => {

package/TabItemHarness.svelte

@@ -13,7 +13,10 @@
 	const selected_tab_index = writable<number>(cfg.tab_selected_index ?? 0);
 
 	setContext(TABS, {
-		register_tab: (_tab: any, order: number) => order,
+		register_tab: (tab: any, order: number) => {
+			cfg.on_register?.(tab);
+			return order;
+		},
 		unregister_tab: () => {},
 		selected_tab,
 		selected_tab_index
@@ -22,13 +25,13 @@
 
 <BaseTabItem
 	label="First Tab"
-	id="t1"
+	id={cfg.omit_id ? undefined : (cfg.tab_id ?? "t1")}
 	order={0}
 	visible={cfg.tab_visible ?? true}
 	interactive={true}
 	scale={0}
 	component_id={1}
-	on:select={(e) => cfg.on_tab_select?.(e.detail)}
+	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

@@ -13,7 +13,10 @@
 	const selected_tab_index = writable<number>(cfg.tab_selected_index ?? 0);
 
 	setContext(TABS, {
-		register_tab: (_tab: any, order: number) => order,
+		register_tab: (tab: any, order: number) => {
+			cfg.on_register?.(tab);
+			return order;
+		},
 		unregister_tab: () => {},
 		selected_tab,
 		selected_tab_index
@@ -22,13 +25,13 @@
 
 <BaseTabItem
 	label="First Tab"
-	id="t1"
+	id={cfg.omit_id ? undefined : (cfg.tab_id ?? "t1")}
 	order={0}
 	visible={cfg.tab_visible ?? true}
 	interactive={true}
 	scale={0}
 	component_id={1}
-	on:select={(e) => cfg.on_tab_select?.(e.detail)}
+	onselect={(data) => cfg.on_tab_select?.(data)}
 >
 	<div data-testid="tab-content">tab panel content</div>
 </BaseTabItem>

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.7.0",
+  "version": "0.8.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,9 +16,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/tabs": "^0.6.0",
     "@gradio/column": "^0.3.3",
-    "@gradio/utils": "^0.12.2"
+    "@gradio/utils": "^0.12.2",
+    "@gradio/tabs": "^0.7.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

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;