@gradio/tabs 0.5.0 → 0.5.2-dev.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/tabs
 
+## 0.5.2-dev.0
+
+### Dependency updates
+
+- @gradio/utils@0.10.3-dev.0
+
+## 0.5.1
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
 ## 0.5.0
 
 ### Features

package/Index.svelte

@@ -3,50 +3,44 @@
 </script>
 
 <script lang="ts">
-	import type { Gradio, SelectData } from "@gradio/utils";
-	import { createEventDispatcher } from "svelte";
-	import Tabs, { type Tab } from "./shared/Tabs.svelte";
+	import { Gradio } from "@gradio/utils";
+	import Tabs from "./shared/Tabs.svelte";
 	import Walkthrough from "./shared/Walkthrough.svelte";
+	import type { TabsProps, TabsEvents } from "./types";
 
-	const dispatch = createEventDispatcher();
+	let props = $props();
+	const gradio = new Gradio<TabsEvents, TabsProps>(props);
 
-	export let visible = true;
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let selected: number | string;
-	export let initial_tabs: Tab[] = [];
-	export let name: "tabs" | "walkthrough" = "tabs";
-	export let gradio:
-		| Gradio<{
-				change: never;
-				select: SelectData;
-		  }>
-		| undefined;
+	let old_selected = $state(gradio.props.selected);
 
-	$: dispatch("prop_change", { selected });
+	$effect(() => {
+		if (old_selected !== gradio.props.selected) {
+			old_selected = gradio.props.selected;
+		}
+	});
 </script>
 
-{#if name === "walkthrough"}
+{#if gradio.props.name === "walkthrough"}
 	<Walkthrough
-		{visible}
-		{elem_id}
-		{elem_classes}
-		bind:selected
-		on:change={() => gradio?.dispatch("change")}
-		on:select={(e) => gradio?.dispatch("select", e.detail)}
-		{initial_tabs}
+		visible={gradio.shared.visible}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		bind:selected={gradio.props.selected}
+		on:change={() => gradio.dispatch("change")}
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		initial_tabs={gradio.props.initial_tabs}
 	>
 		<slot />
 	</Walkthrough>
 {:else}
 	<Tabs
-		{visible}
-		{elem_id}
-		{elem_classes}
-		bind:selected
-		on:change={() => gradio?.dispatch("change")}
-		on:select={(e) => gradio?.dispatch("select", e.detail)}
-		{initial_tabs}
+		visible={gradio.shared.visible}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		bind:selected={gradio.props.selected}
+		on:change={() => gradio.dispatch("change")}
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		initial_tabs={gradio.props.initial_tabs}
 	>
 		<slot />
 	</Tabs>

package/dist/Index.svelte

@@ -1,41 +1,46 @@
-<script context="module">export { default as BaseTabs, TABS } from "./shared/Tabs.svelte";
+<script context="module" lang="ts">
+	export { default as BaseTabs, TABS, type Tab } from "./shared/Tabs.svelte";
 </script>
 
-<script>import { createEventDispatcher } from "svelte";
-import Tabs, {} from "./shared/Tabs.svelte";
-import Walkthrough from "./shared/Walkthrough.svelte";
-const dispatch = createEventDispatcher();
-export let visible = true;
-export let elem_id = "";
-export let elem_classes = [];
-export let selected;
-export let initial_tabs = [];
-export let name = "tabs";
-export let gradio;
-$: dispatch("prop_change", { selected });
+<script lang="ts">
+	import { Gradio } from "@gradio/utils";
+	import Tabs from "./shared/Tabs.svelte";
+	import Walkthrough from "./shared/Walkthrough.svelte";
+	import type { TabsProps, TabsEvents } from "./types";
+
+	let props = $props();
+	const gradio = new Gradio<TabsEvents, TabsProps>(props);
+
+	let old_selected = $state(gradio.props.selected);
+
+	$effect(() => {
+		if (old_selected !== gradio.props.selected) {
+			old_selected = gradio.props.selected;
+		}
+	});
 </script>
 
-{#if name === "walkthrough"}
+{#if gradio.props.name === "walkthrough"}
 	<Walkthrough
-		{visible}
-		{elem_id}
-		{elem_classes}
-		bind:selected
-		on:change={() => gradio?.dispatch("change")}
-		on:select={(e) => gradio?.dispatch("select", e.detail)}
-		{initial_tabs}
+		visible={gradio.shared.visible}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		bind:selected={gradio.props.selected}
+		on:change={() => gradio.dispatch("change")}
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		initial_tabs={gradio.props.initial_tabs}
 	>
 		<slot />
 	</Walkthrough>
 {:else}
 	<Tabs
-		{visible}
-		{elem_id}
-		{elem_classes}
-		bind:selected
-		on:change={() => gradio?.dispatch("change")}
-		on:select={(e) => gradio?.dispatch("select", e.detail)}
-		{initial_tabs}
+		visible={gradio.shared.visible}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		bind:selected={gradio.props.selected}
+		on:change={() => gradio.dispatch("change")}
+		on:select={(e) => gradio.dispatch("select", e.detail)}
+		initial_tabs={gradio.props.initial_tabs}
 	>
 		<slot />
 	</Tabs>

package/dist/Index.svelte.d.ts

@@ -1,33 +1,21 @@
-import { SvelteComponent } from "svelte";
 export { default as BaseTabs, TABS, type Tab } from "./shared/Tabs.svelte";
-import type { Gradio, SelectData } from "@gradio/utils";
-import { type Tab } from "./shared/Tabs.svelte";
-declare const __propDef: {
-    props: {
-        visible?: boolean;
-        elem_id?: string;
-        elem_classes?: string[];
-        selected: number | string;
-        initial_tabs?: Tab[];
-        name?: "tabs" | "walkthrough";
-        gradio: Gradio<{
-            change: never;
-            select: SelectData;
-        }> | undefined;
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        prop_change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    z_$$bindings?: Bindings;
 }
+declare const Index: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Index = InstanceType<typeof Index>;
+export default Index;

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

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  OverflowIconProps */
-/** @typedef {typeof __propDef.events}  OverflowIconEvents */
-/** @typedef {typeof __propDef.slots}  OverflowIconSlots */
-export default class OverflowIcon extends SvelteComponent<{
+export default OverflowIcon;
+type OverflowIcon = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type OverflowIconProps = typeof __propDef.props;
-export type OverflowIconEvents = typeof __propDef.events;
-export type OverflowIconSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const OverflowIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/shared/Tabs.svelte

@@ -1,110 +1,164 @@
-<script context="module">export const TABS = {};
+<script context="module" lang="ts">
+	export const TABS = {};
+
+	export interface Tab {
+		label: string;
+		id: string | number;
+		elem_id: string | undefined;
+		visible: boolean | "hidden";
+		interactive: boolean;
+		scale: number | null;
+	}
 </script>
 
-<script>import { setContext, createEventDispatcher, tick, onMount } from "svelte";
-import OverflowIcon from "./OverflowIcon.svelte";
-import { writable } from "svelte/store";
-export let visible = true;
-export let elem_id = "";
-export let elem_classes = [];
-export let selected;
-export let initial_tabs;
-let tabs = [...initial_tabs];
-let visible_tabs = [...initial_tabs];
-let overflow_tabs = [];
-let overflow_menu_open = false;
-let overflow_menu;
-$: has_tabs = tabs.length > 0;
-let tab_nav_el;
-const selected_tab = writable(
-  selected || tabs[0]?.id || false
-);
-const selected_tab_index = writable(
-  tabs.findIndex((t) => t?.id === selected) || 0
-);
-const dispatch = createEventDispatcher();
-let is_overflowing = false;
-let overflow_has_selected_tab = false;
-let tab_els = {};
-onMount(() => {
-  if (!tab_nav_el) return;
-  const observer = new IntersectionObserver((entries) => {
-    handle_menu_overflow();
-  });
-  observer.observe(tab_nav_el);
-});
-setContext(TABS, {
-  register_tab: (tab, order) => {
-    tabs[order] = tab;
-    if ($selected_tab === false && tab.visible && tab.interactive) {
-      $selected_tab = tab.id;
-      $selected_tab_index = order;
-    }
-    return order;
-  },
-  unregister_tab: (tab, order) => {
-    if ($selected_tab === tab.id) {
-      $selected_tab = tabs[0]?.id || false;
-    }
-    tabs[order] = null;
-  },
-  selected_tab,
-  selected_tab_index
-});
-function change_tab(id) {
-  const tab_to_activate = tabs.find((t) => t?.id === id);
-  if (id !== void 0 && tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab !== tab_to_activate.id) {
-    selected = id;
-    $selected_tab = id;
-    $selected_tab_index = tabs.findIndex((t) => t?.id === id);
-    dispatch("change");
-    overflow_menu_open = false;
-  }
-}
-$: tabs, selected !== null && change_tab(selected);
-$: tabs, tab_nav_el, tab_els, handle_menu_overflow();
-function handle_outside_click(event) {
-  if (overflow_menu_open && overflow_menu && !overflow_menu.contains(event.target)) {
-    overflow_menu_open = false;
-  }
-}
-async function handle_menu_overflow() {
-  if (!tab_nav_el) return;
-  await tick();
-  const tab_nav_size = tab_nav_el.getBoundingClientRect();
-  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;
-  for (let i = tabs.length - 1; i >= 0; 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;
-      break;
-    }
-  }
-  overflow_tabs = tabs.slice(last_visible_index + 1);
-  visible_tabs = tabs.slice(0, last_visible_index + 1);
-  overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
-  is_overflowing = overflow_tabs.length > 0;
-}
-$: overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
-function handle_overflow_has_selected_tab(selected_tab2) {
-  if (selected_tab2 === false) return false;
-  return overflow_tabs.some((t) => t?.id === selected_tab2);
-}
-function get_tab_sizes(tabs2, tab_els2) {
-  const tab_sizes = {};
-  tabs2.forEach((tab) => {
-    if (!tab) return;
-    tab_sizes[tab.id] = tab_els2[tab.id]?.getBoundingClientRect();
-  });
-  return tab_sizes;
-}
-$: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
+<script lang="ts">
+	import { setContext, createEventDispatcher, tick, onMount } from "svelte";
+	import OverflowIcon from "./OverflowIcon.svelte";
+	import { writable } from "svelte/store";
+	import type { SelectData } from "@gradio/utils";
+
+	export let visible: boolean | "hidden" = true;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let selected: number | string;
+	export let initial_tabs: Tab[];
+
+	let tabs: (Tab | null)[] = [...initial_tabs];
+	let visible_tabs: (Tab | null)[] = [...initial_tabs];
+	let overflow_tabs: (Tab | null)[] = [];
+	let overflow_menu_open = false;
+	let overflow_menu: HTMLElement;
+
+	$: has_tabs = tabs.length > 0;
+
+	let tab_nav_el: HTMLDivElement;
+
+	const selected_tab = writable<false | number | string>(
+		selected || tabs[0]?.id || false
+	);
+	const selected_tab_index = writable<number>(
+		tabs.findIndex((t) => t?.id === selected) || 0
+	);
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		select: SelectData;
+	}>();
+
+	let is_overflowing = false;
+	let overflow_has_selected_tab = false;
+	let tab_els: Record<string | number, HTMLElement> = {};
+
+	onMount(() => {
+		if (!tab_nav_el) return;
+		const observer = new IntersectionObserver((entries) => {
+			handle_menu_overflow();
+		});
+		observer.observe(tab_nav_el);
+	});
+
+	setContext(TABS, {
+		register_tab: (tab: Tab, order: number) => {
+			tabs[order] = tab;
+
+			if ($selected_tab === false && tab.visible !== false && tab.interactive) {
+				$selected_tab = tab.id;
+				$selected_tab_index = order;
+			}
+			return order;
+		},
+		unregister_tab: (tab: Tab, order: number) => {
+			if ($selected_tab === tab.id) {
+				$selected_tab = tabs[0]?.id || false;
+			}
+			tabs[order] = null;
+		},
+		selected_tab,
+		selected_tab_index
+	});
+
+	function change_tab(id: string | number | undefined): void {
+		const tab_to_activate = tabs.find((t) => t?.id === id);
+		if (
+			id !== undefined &&
+			tab_to_activate &&
+			tab_to_activate.interactive &&
+			tab_to_activate.visible !== false &&
+			$selected_tab !== tab_to_activate.id
+		) {
+			selected = id;
+			$selected_tab = id;
+			$selected_tab_index = tabs.findIndex((t) => t?.id === id);
+			dispatch("change");
+			overflow_menu_open = false;
+		}
+	}
+
+	$: (tabs, selected !== null && change_tab(selected));
+	$: (tabs, tab_nav_el, tab_els, handle_menu_overflow());
+
+	function handle_outside_click(event: MouseEvent): void {
+		if (
+			overflow_menu_open &&
+			overflow_menu &&
+			!overflow_menu.contains(event.target as Node)
+		) {
+			overflow_menu_open = false;
+		}
+	}
+
+	async function handle_menu_overflow(): Promise<void> {
+		if (!tab_nav_el) return;
+
+		await tick();
+		const tab_nav_size = tab_nav_el.getBoundingClientRect();
+
+		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;
+
+		for (let i = tabs.length - 1; i >= 0; 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;
+				break;
+			}
+		}
+
+		overflow_tabs = tabs.slice(last_visible_index + 1);
+		visible_tabs = tabs.slice(0, last_visible_index + 1);
+
+		overflow_has_selected_tab = handle_overflow_has_selected_tab($selected_tab);
+		is_overflowing = overflow_tabs.length > 0;
+	}
+
+	$: overflow_has_selected_tab =
+		handle_overflow_has_selected_tab($selected_tab);
+
+	function handle_overflow_has_selected_tab(
+		selected_tab: number | string | false
+	): boolean {
+		if (selected_tab === false) return false;
+		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>
 
 <svelte:window
@@ -114,7 +168,8 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 
 <div
 	class="tabs {elem_classes.join(' ')}"
-	class:hide={!visible}
+	class:hide={visible === false}
+	class:hidden={visible === "hidden"}
 	id={elem_id}
 	style:flex-grow={tab_scale}
 >
@@ -122,7 +177,7 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 		<div class="tab-wrapper">
 			<div class="tab-container visually-hidden" aria-hidden="true">
 				{#each tabs as t, i}
-					{#if t?.visible}
+					{#if t && t?.visible !== false && t?.visible !== "hidden"}
 						<button bind:this={tab_els[t.id]}>
 							{t?.label}
 						</button>
@@ -131,7 +186,7 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 			</div>
 			<div class="tab-container" bind:this={tab_nav_el} role="tablist">
 				{#each visible_tabs as t, i}
-					{#if t?.visible}
+					{#if t && t?.visible !== false}
 						<button
 							role="tab"
 							class:selected={t.id === $selected_tab}
@@ -144,7 +199,7 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 							on:click={() => {
 								if (t.id !== $selected_tab) {
 									change_tab(t.id);
-									dispatch("select", { value: t.label, index: i });
+									dispatch("select", { value: t.label, index: i, id: t.id });
 								}
 							}}
 						>
@@ -155,7 +210,8 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 			</div>
 			<span
 				class="overflow-menu"
-				class:hide={!is_overflowing || !overflow_tabs.some((t) => t?.visible)}
+				class:hide={!is_overflowing ||
+					!overflow_tabs.some((t) => t?.visible !== false)}
 				bind:this={overflow_menu}
 			>
 				<button
@@ -167,7 +223,7 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 				</button>
 				<div class="overflow-dropdown" class:hide={!overflow_menu_open}>
 					{#each overflow_tabs as t}
-						{#if t?.visible}
+						{#if t?.visible !== false}
 							<button
 								on:click={() => change_tab(t?.id)}
 								class:selected={t?.id === $selected_tab}
@@ -195,6 +251,10 @@ $: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 		display: none;
 	}
 
+	.hidden {
+		display: none !important;
+	}
+
 	.tab-wrapper {
 		display: flex;
 		align-items: center;

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

@@ -1,37 +1,46 @@
-import { SvelteComponent } from "svelte";
 export declare const TABS: {};
 export interface Tab {
     label: string;
     id: string | number;
     elem_id: string | undefined;
-    visible: boolean;
+    visible: boolean | "hidden";
     interactive: boolean;
     scale: number | null;
 }
 import type { SelectData } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        visible?: boolean;
-        elem_id?: string;
-        elem_classes?: string[];
-        selected: number | string;
-        initial_tabs: Tab[];
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: CustomEvent<undefined>;
-        select: CustomEvent<SelectData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    visible?: boolean | "hidden";
+    elem_id?: string;
+    elem_classes?: string[];
+    selected: number | string;
+    initial_tabs: Tab[];
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<undefined>;
+    select: CustomEvent<SelectData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Tabs = InstanceType<typeof Tabs>;
+export default Tabs;

package/dist/shared/Walkthrough.svelte

@@ -1,115 +1,154 @@
-<script context="module">import { TABS } from "./Tabs.svelte";
+<script context="module" lang="ts">
+	import { TABS, type Tab } from "./Tabs.svelte";
 </script>
 
-<script>import { setContext, createEventDispatcher, tick, onMount } from "svelte";
-import { writable } from "svelte/store";
-export let visible = true;
-export let elem_id = "";
-export let elem_classes = [];
-export let selected;
-export let initial_tabs;
-let tabs = [...initial_tabs];
-let stepper_container;
-let show_labels_for_all = true;
-let measurement_container;
-let step_buttons = [];
-let step_labels = [];
-let label_height = 0;
-let compact = false;
-let recompute_overflow = true;
-$: has_tabs = tabs.length > 0;
-const selected_tab = writable(
-  selected || tabs[0]?.id || false
-);
-const selected_tab_index = writable(
-  tabs.findIndex((t) => t?.id === selected) || 0
-);
-const dispatch = createEventDispatcher();
-async function check_overflow() {
-  if (!stepper_container || !measurement_container || !recompute_overflow)
-    return;
-  recompute_overflow = false;
-  await tick();
-  show_labels_for_all = true;
-  await tick();
-  const SEP_WIDTH = 50;
-  const button_width = step_buttons[0].getBoundingClientRect().width * step_buttons.length + SEP_WIDTH * (step_buttons.length - 1);
-  const containerWidth = stepper_container.getBoundingClientRect().width;
-  const does_it_fit = button_width < containerWidth;
-  if (!does_it_fit) {
-    show_labels_for_all = false;
-    compact = true;
-    return;
-  }
-  let max_height = 0;
-  let is_overlapping = false;
-  let last_right = 0;
-  for (const label of step_labels) {
-    const { height, width, left, right } = label.getBoundingClientRect();
-    if (height > max_height) {
-      max_height = height;
-    }
-    if (last_right && left - 10 < last_right && !is_overlapping) {
-      is_overlapping = true;
-    }
-    last_right = right;
-  }
-  label_height = max_height;
-  if (is_overlapping) {
-    show_labels_for_all = false;
-  }
-}
-let last_width = 0;
-onMount(() => {
-  check_overflow();
-  const observer = new ResizeObserver((entries) => {
-    if (entries[0].contentRect.width === last_width) return;
-    last_width = entries[0].contentRect.width;
-    compact = false;
-    recompute_overflow = true;
-    check_overflow();
-  });
-  if (stepper_container) {
-    observer.observe(stepper_container);
-  }
-  return () => {
-    observer.disconnect();
-  };
-});
-setContext(TABS, {
-  register_tab: (tab, order) => {
-    tabs[order] = tab;
-    if ($selected_tab === false && tab.visible && tab.interactive) {
-      $selected_tab = tab.id;
-      $selected_tab_index = order;
-    }
-    return order;
-  },
-  unregister_tab: (tab, order) => {
-    if ($selected_tab === tab.id) {
-      $selected_tab = tabs[0]?.id || false;
-    }
-    tabs[order] = null;
-  },
-  selected_tab,
-  selected_tab_index
-});
-function change_tab(id, index) {
-  const tab_to_activate = tabs.find((t) => t?.id === id);
-  if (id !== void 0 && tab_to_activate && tab_to_activate.interactive && tab_to_activate.visible && $selected_tab !== tab_to_activate.id) {
-    selected = id;
-    $selected_tab = id;
-    $selected_tab_index = tabs.findIndex((t) => t?.id === id);
-    dispatch("change");
-  }
-}
-$: tabs, selected !== null && change_tab(
-  selected,
-  tabs.findIndex((t) => t?.id === selected)
-);
-$: tabs, check_overflow();
-$: $selected_tab_index, check_overflow();
-$: tab_scale = tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
+<script lang="ts">
+	import { setContext, createEventDispatcher, tick, onMount } from "svelte";
+	import { writable } from "svelte/store";
+	import type { SelectData } from "@gradio/utils";
+
+	export let visible: boolean | "hidden" = true;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let selected: number | string;
+	export let initial_tabs: Tab[];
+
+	let tabs: (Tab | null)[] = [...initial_tabs];
+	let stepper_container: HTMLDivElement;
+	let show_labels_for_all = true;
+	let measurement_container: HTMLDivElement;
+	let step_buttons: HTMLButtonElement[] = [];
+	let step_labels: HTMLSpanElement[] = [];
+	let label_height = 0;
+	let compact = false;
+	let recompute_overflow = true;
+	$: has_tabs = tabs.length > 0;
+
+	const selected_tab = writable<false | number | string>(
+		selected || tabs[0]?.id || false
+	);
+	const selected_tab_index = writable<number>(
+		tabs.findIndex((t) => t?.id === selected) || 0
+	);
+	const dispatch = createEventDispatcher<{
+		change: undefined;
+		select: SelectData;
+	}>();
+
+	async function check_overflow(): Promise<void> {
+		if (!stepper_container || !measurement_container || !recompute_overflow)
+			return;
+		recompute_overflow = false;
+		await tick();
+
+		// First, show all labels to measure
+		show_labels_for_all = true;
+		await tick();
+
+		const SEP_WIDTH = 50;
+		const button_width =
+			step_buttons[0].getBoundingClientRect().width * step_buttons.length +
+			SEP_WIDTH * (step_buttons.length - 1);
+
+		const containerWidth = stepper_container.getBoundingClientRect().width;
+		const does_it_fit = button_width < containerWidth;
+
+		if (!does_it_fit) {
+			show_labels_for_all = false;
+			compact = true;
+			return;
+		}
+
+		let max_height = 0;
+		let is_overlapping = false;
+		let last_right = 0;
+
+		for (const label of step_labels) {
+			const { height, width, left, right } = label.getBoundingClientRect();
+			if (height > max_height) {
+				max_height = height;
+			}
+			if (last_right && left - 10 < last_right && !is_overlapping) {
+				is_overlapping = true;
+			}
+			last_right = right;
+		}
+		label_height = max_height;
+
+		if (is_overlapping) {
+			show_labels_for_all = false;
+		}
+	}
+
+	let last_width = 0;
+
+	onMount(() => {
+		check_overflow();
+
+		const observer = new ResizeObserver((entries) => {
+			if (entries[0].contentRect.width === last_width) return;
+			last_width = entries[0].contentRect.width;
+			compact = false;
+			recompute_overflow = true;
+			check_overflow();
+		});
+
+		if (stepper_container) {
+			observer.observe(stepper_container);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	setContext(TABS, {
+		register_tab: (tab: Tab, order: number) => {
+			tabs[order] = tab;
+
+			if ($selected_tab === false && tab.visible && tab.interactive) {
+				$selected_tab = tab.id;
+				$selected_tab_index = order;
+			}
+			return order;
+		},
+		unregister_tab: (tab: Tab, order: number) => {
+			if ($selected_tab === tab.id) {
+				$selected_tab = tabs[0]?.id || false;
+			}
+			tabs[order] = null;
+		},
+		selected_tab,
+		selected_tab_index
+	});
+
+	function change_tab(id: string | number | undefined, index: number): void {
+		const tab_to_activate = tabs.find((t) => t?.id === id);
+		if (
+			id !== undefined &&
+			tab_to_activate &&
+			tab_to_activate.interactive &&
+			tab_to_activate.visible &&
+			$selected_tab !== tab_to_activate.id
+		) {
+			selected = id;
+			$selected_tab = id;
+			$selected_tab_index = tabs.findIndex((t) => t?.id === id);
+			dispatch("change");
+		}
+	}
+
+	$: (tabs,
+		selected !== null &&
+			change_tab(
+				selected,
+				tabs.findIndex((t) => t?.id === selected)
+			));
+	$: (tabs, check_overflow());
+	$: ($selected_tab_index, check_overflow());
+
+	$: tab_scale =
+		tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;
 </script>
 
 <svelte:window on:resize={check_overflow} />

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

@@ -1,29 +1,38 @@
-import { SvelteComponent } from "svelte";
 import { type Tab } from "./Tabs.svelte";
 import type { SelectData } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        visible?: boolean;
-        elem_id?: string;
-        elem_classes?: string[];
-        selected: number | string;
-        initial_tabs: Tab[];
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: CustomEvent<undefined>;
-        select: CustomEvent<SelectData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type WalkthroughProps = typeof __propDef.props;
-export type WalkthroughEvents = typeof __propDef.events;
-export type WalkthroughSlots = typeof __propDef.slots;
-export default class Walkthrough extends SvelteComponent<WalkthroughProps, WalkthroughEvents, WalkthroughSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Walkthrough: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    visible?: boolean | "hidden";
+    elem_id?: string;
+    elem_classes?: string[];
+    selected: number | string;
+    initial_tabs: Tab[];
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<undefined>;
+    select: CustomEvent<SelectData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Walkthrough = InstanceType<typeof Walkthrough>;
+export default Walkthrough;

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import type { SelectData } from "@gradio/utils";
+import type { Tab } from "./shared/Tabs.svelte";
+export interface TabsProps {
+    visible: boolean | "hidden";
+    elem_id: string;
+    elem_classes: string[];
+    selected: number | string;
+    initial_tabs: Tab[];
+    name: "tabs" | "walkthrough";
+}
+export interface TabsEvents {
+    change: never;
+    select: SelectData;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.5.0",
+  "version": "0.5.2-dev.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,13 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/utils": "^0.10.2"
+    "@gradio/utils": "^0.10.3-dev.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/shared/Tabs.svelte

@@ -5,7 +5,7 @@
 		label: string;
 		id: string | number;
 		elem_id: string | undefined;
-		visible: boolean;
+		visible: boolean | "hidden";
 		interactive: boolean;
 		scale: number | null;
 	}
@@ -17,7 +17,7 @@
 	import { writable } from "svelte/store";
 	import type { SelectData } from "@gradio/utils";
 
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
@@ -60,7 +60,7 @@
 		register_tab: (tab: Tab, order: number) => {
 			tabs[order] = tab;
 
-			if ($selected_tab === false && tab.visible && tab.interactive) {
+			if ($selected_tab === false && tab.visible !== false && tab.interactive) {
 				$selected_tab = tab.id;
 				$selected_tab_index = order;
 			}
@@ -82,7 +82,7 @@
 			id !== undefined &&
 			tab_to_activate &&
 			tab_to_activate.interactive &&
-			tab_to_activate.visible &&
+			tab_to_activate.visible !== false &&
 			$selected_tab !== tab_to_activate.id
 		) {
 			selected = id;
@@ -93,8 +93,8 @@
 		}
 	}
 
-	$: tabs, selected !== null && change_tab(selected);
-	$: tabs, tab_nav_el, tab_els, handle_menu_overflow();
+	$: (tabs, selected !== null && change_tab(selected));
+	$: (tabs, tab_nav_el, tab_els, handle_menu_overflow());
 
 	function handle_outside_click(event: MouseEvent): void {
 		if (
@@ -168,7 +168,8 @@
 
 <div
 	class="tabs {elem_classes.join(' ')}"
-	class:hide={!visible}
+	class:hide={visible === false}
+	class:hidden={visible === "hidden"}
 	id={elem_id}
 	style:flex-grow={tab_scale}
 >
@@ -176,7 +177,7 @@
 		<div class="tab-wrapper">
 			<div class="tab-container visually-hidden" aria-hidden="true">
 				{#each tabs as t, i}
-					{#if t?.visible}
+					{#if t && t?.visible !== false && t?.visible !== "hidden"}
 						<button bind:this={tab_els[t.id]}>
 							{t?.label}
 						</button>
@@ -185,7 +186,7 @@
 			</div>
 			<div class="tab-container" bind:this={tab_nav_el} role="tablist">
 				{#each visible_tabs as t, i}
-					{#if t?.visible}
+					{#if t && t?.visible !== false}
 						<button
 							role="tab"
 							class:selected={t.id === $selected_tab}
@@ -198,7 +199,7 @@
 							on:click={() => {
 								if (t.id !== $selected_tab) {
 									change_tab(t.id);
-									dispatch("select", { value: t.label, index: i });
+									dispatch("select", { value: t.label, index: i, id: t.id });
 								}
 							}}
 						>
@@ -209,7 +210,8 @@
 			</div>
 			<span
 				class="overflow-menu"
-				class:hide={!is_overflowing || !overflow_tabs.some((t) => t?.visible)}
+				class:hide={!is_overflowing ||
+					!overflow_tabs.some((t) => t?.visible !== false)}
 				bind:this={overflow_menu}
 			>
 				<button
@@ -221,7 +223,7 @@
 				</button>
 				<div class="overflow-dropdown" class:hide={!overflow_menu_open}>
 					{#each overflow_tabs as t}
-						{#if t?.visible}
+						{#if t?.visible !== false}
 							<button
 								on:click={() => change_tab(t?.id)}
 								class:selected={t?.id === $selected_tab}
@@ -249,6 +251,10 @@
 		display: none;
 	}
 
+	.hidden {
+		display: none !important;
+	}
+
 	.tab-wrapper {
 		display: flex;
 		align-items: center;

package/shared/Walkthrough.svelte

@@ -7,7 +7,7 @@
 	import { writable } from "svelte/store";
 	import type { SelectData } from "@gradio/utils";
 
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
@@ -138,14 +138,14 @@
 		}
 	}
 
-	$: tabs,
+	$: (tabs,
 		selected !== null &&
 			change_tab(
 				selected,
 				tabs.findIndex((t) => t?.id === selected)
-			);
-	$: tabs, check_overflow();
-	$: $selected_tab_index, check_overflow();
+			));
+	$: (tabs, check_overflow());
+	$: ($selected_tab_index, check_overflow());
 
 	$: tab_scale =
 		tabs[$selected_tab_index >= 0 ? $selected_tab_index : 0]?.scale;

package/types.ts

@@ -0,0 +1,16 @@
+import type { SelectData } from "@gradio/utils";
+import type { Tab } from "./shared/Tabs.svelte";
+
+export interface TabsProps {
+	visible: boolean | "hidden";
+	elem_id: string;
+	elem_classes: string[];
+	selected: number | string;
+	initial_tabs: Tab[];
+	name: "tabs" | "walkthrough";
+}
+
+export interface TabsEvents {
+	change: never;
+	select: SelectData;
+}