@gradio/tabs 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/tabs
 
+## 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

@@ -10,7 +10,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	export let visible = true;
+	export let visible: boolean | "hidden" = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;

package/dist/Index.svelte.d.ts

@@ -4,7 +4,7 @@ import type { Gradio, SelectData } from "@gradio/utils";
 import { type Tab } from "./shared/Tabs.svelte";
 declare const __propDef: {
     props: {
-        visible?: boolean;
+        visible?: boolean | "hidden";
         elem_id?: string;
         elem_classes?: string[];
         selected: number | string;

package/dist/shared/Tabs.svelte

@@ -36,7 +36,7 @@ onMount(() => {
 setContext(TABS, {
   register_tab: (tab, order) => {
     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;
     }
@@ -53,7 +53,7 @@ setContext(TABS, {
 });
 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) {
+  if (id !== void 0 && 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);
@@ -114,7 +114,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 +123,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 +132,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}
@@ -155,7 +156,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 +169,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 +197,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

@@ -4,14 +4,14 @@ 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;
+        visible?: boolean | "hidden";
         elem_id?: string;
         elem_classes?: string[];
         selected: number | string;

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

@@ -3,7 +3,7 @@ import { type Tab } from "./Tabs.svelte";
 import type { SelectData } from "@gradio/utils";
 declare const __propDef: {
     props: {
-        visible?: boolean;
+        visible?: boolean | "hidden";
         elem_id?: string;
         elem_classes?: string[];
         selected: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabs",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",

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;
@@ -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}
@@ -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;