@gradio/dataframe 0.22.0 → 0.23.1

package/dist/shared/EditableCell.svelte

@@ -1,48 +1,71 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { MarkdownCode } from "@gradio/markdown-code";
 	import type { I18nFormatter } from "@gradio/utils";
 	import type { CellValue } from "./types";
 	import SelectionButtons from "./icons/SelectionButtons.svelte";
 	import BooleanCell from "./BooleanCell.svelte";
 
-	export let edit: boolean;
-	export let value: CellValue = "";
-	export let display_value: string | null = null;
-	export let styling = "";
-	export let header = false;
-	export let datatype:
-		| "str"
-		| "markdown"
-		| "html"
-		| "number"
-		| "bool"
-		| "date"
-		| "image" = "str";
-	export let latex_delimiters: {
-		left: string;
-		right: string;
-		display: boolean;
-	}[];
-	export let line_breaks = true;
-	export let editable = true;
-	export let is_static = false;
-	export let max_chars: number | null = null;
-	export let components: Record<string, any> = {};
-	export let i18n: I18nFormatter;
-	export let is_dragging = false;
-	export let wrap_text = false;
-
-	export let show_selection_buttons = false;
-	export let coords: [number, number];
-	export let on_select_column: ((col: number) => void) | null = null;
-	export let on_select_row: ((row: number) => void) | null = null;
-	export let el: HTMLTextAreaElement | null;
-
-	const dispatch = createEventDispatcher<{
-		blur: { blur_event: FocusEvent; coords: [number, number] };
-		keydown: KeyboardEvent;
-	}>();
+	let {
+		edit,
+		value = $bindable(""),
+		display_value = null,
+		styling = "",
+		header = false,
+		datatype = "str",
+		latex_delimiters,
+		line_breaks = true,
+		editable = true,
+		is_static = false,
+		max_chars = null,
+		components = {},
+		i18n,
+		is_dragging = false,
+		wrap_text = false,
+		show_selection_buttons = false,
+		coords,
+		on_select_column = null,
+		on_select_row = null,
+		el = $bindable(null),
+		onblur,
+		onkeydown
+	}: {
+		edit: boolean;
+		value?: CellValue;
+		display_value?: string | null;
+		styling?: string;
+		header?: boolean;
+		datatype?:
+			| "str"
+			| "markdown"
+			| "html"
+			| "number"
+			| "bool"
+			| "date"
+			| "image";
+		latex_delimiters: {
+			left: string;
+			right: string;
+			display: boolean;
+		}[];
+		line_breaks?: boolean;
+		editable?: boolean;
+		is_static?: boolean;
+		max_chars?: number | null;
+		components?: Record<string, any>;
+		i18n: I18nFormatter;
+		is_dragging?: boolean;
+		wrap_text?: boolean;
+		show_selection_buttons?: boolean;
+		coords: [number, number];
+		on_select_column?: ((col: number) => void) | null;
+		on_select_row?: ((row: number) => void) | null;
+		el?: HTMLTextAreaElement | null;
+		onblur?: (detail: {
+			blur_event: FocusEvent;
+			coords: [number, number];
+		}) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+	} = $props();
 
 	function truncate_text(
 		text: CellValue,
@@ -56,17 +79,17 @@
 		return str.slice(0, max_length) + "...";
 	}
 
-	$: should_truncate = !edit && max_chars !== null && max_chars > 0;
+	let should_truncate = $derived(!edit && max_chars !== null && max_chars > 0);
 
-	$: display_content = editable
-		? value
-		: display_value !== null
-			? display_value
-			: value;
+	let display_content = $derived(
+		editable ? value : display_value !== null ? display_value : value
+	);
 
-	$: display_text = should_truncate
-		? truncate_text(display_content, max_chars, datatype === "image")
-		: display_content;
+	let display_text = $derived(
+		should_truncate
+			? truncate_text(display_content, max_chars, datatype === "image")
+			: display_content
+	);
 
 	function use_focus(node: HTMLTextAreaElement): any {
 		requestAnimationFrame(() => {
@@ -77,24 +100,26 @@
 	}
 
 	function handle_blur(event: FocusEvent): void {
-		dispatch("blur", {
+		onblur?.({
 			blur_event: event,
 			coords: coords
 		});
 	}
 
 	function handle_keydown(event: KeyboardEvent): void {
-		dispatch("keydown", event);
+		onkeydown?.(event);
 	}
 
 	function commit_change(checked: boolean): void {
 		handle_blur({ target: { value } } as unknown as FocusEvent);
 	}
 
-	$: if (!edit) {
-		// Shim blur on removal for Safari and Firefox
-		handle_blur({ target: { value } } as unknown as FocusEvent);
-	}
+	$effect(() => {
+		if (!edit) {
+			// Shim blur on removal for Safari and Firefox
+			handle_blur({ target: { value } } as unknown as FocusEvent);
+		}
+	});
 </script>
 
 {#if edit && datatype !== "bool"}
@@ -106,11 +131,11 @@
 		bind:value
 		class:header
 		tabindex="-1"
-		on:blur={handle_blur}
-		on:mousedown|stopPropagation
-		on:click|stopPropagation
+		onblur={handle_blur}
+		onmousedown={(e: MouseEvent) => e.stopPropagation()}
+		onclick={(e: MouseEvent) => e.stopPropagation()}
 		use:use_focus
-		on:keydown={handle_keydown}
+		onkeydown={handle_keydown}
 	/>
 {/if}
 
@@ -119,13 +144,13 @@
 {:else}
 	<span
 		class:dragging={is_dragging}
-		on:keydown={handle_keydown}
+		onkeydown={handle_keydown}
 		tabindex="0"
 		role="button"
 		class:edit
 		class:expanded={edit}
 		class:multiline={header}
-		on:focus|preventDefault
+		onfocus={(e) => e.preventDefault()}
 		style={styling}
 		data-editable={editable}
 		data-max-chars={max_chars}
@@ -135,8 +160,8 @@
 		class:wrap={wrap_text}
 	>
 		{#if datatype === "image" && components.image}
-			<svelte:component
-				this={components.image}
+			{@const ImageComponent = components.image}
+			<ImageComponent
 				value={{ url: display_text }}
 				show_label={false}
 				label="cell-image"
@@ -201,7 +226,7 @@
 	span {
 		flex: 1 1 0%;
 		position: relative;
-		display: inline-block;
+		display: block;
 		outline: none;
 		-webkit-user-select: text;
 		-moz-user-select: text;
@@ -209,8 +234,7 @@
 		user-select: text;
 		cursor: text;
 		width: 100%;
-		height: 100%;
-		overflow: hidden;
+		overflow-wrap: break-word;
 	}
 
 	span.text.expanded {

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

@@ -1,19 +1,6 @@
 import type { I18nFormatter } from "@gradio/utils";
 import type { CellValue } from "./types";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const EditableCell: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     edit: boolean;
     value?: CellValue;
     display_value?: string | null;
@@ -37,18 +24,13 @@ declare const EditableCell: $$__sveltets_2_IsomorphicComponent<{
     coords: [number, number];
     on_select_column?: ((col: number) => void) | null;
     on_select_row?: ((row: number) => void) | null;
-    el: HTMLTextAreaElement | null;
-}, {
-    mousedown: MouseEvent;
-    click: PointerEvent;
-    focus: FocusEvent;
-    blur: CustomEvent<{
+    el?: HTMLTextAreaElement | null;
+    onblur?: (detail: {
         blur_event: FocusEvent;
         coords: [number, number];
-    }>;
-    keydown: CustomEvent<KeyboardEvent>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EditableCell = InstanceType<typeof EditableCell>;
+    }) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+};
+declare const EditableCell: import("svelte").Component<$$ComponentProps, {}, "value" | "el">;
+type EditableCell = ReturnType<typeof EditableCell>;
 export default EditableCell;

package/dist/shared/EmptyRowButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	export let on_click: () => void;
+	let { on_click }: { on_click: () => void } = $props();
 </script>
 
-<button class="add-row-button" on:click={on_click} aria-label="Add row">
+<button class="add-row-button" onclick={on_click} aria-label="Add row">
 	+
 </button>
 

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

@@ -1,20 +1,6 @@
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const EmptyRowButton: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     on_click: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type EmptyRowButton = InstanceType<typeof EmptyRowButton>;
+};
+declare const EmptyRowButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyRowButton = ReturnType<typeof EmptyRowButton>;
 export default EmptyRowButton;

package/dist/shared/FilterMenu.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { Check, DropdownArrow } from "@gradio/icons";
-	import type { FilterDatatype } from "./context/dataframe_context";
-
-	export let on_filter: (
-		datatype: FilterDatatype,
-		selected_filter: string,
-		value: string
-	) => void = () => {};
+	import type { FilterDatatype } from "./types";
+
+	let {
+		on_filter = () => {}
+	}: {
+		on_filter?: (
+			datatype: FilterDatatype,
+			selected_filter: string,
+			value: string
+		) => void;
+	} = $props();
 
 	let menu_element: HTMLDivElement;
-	let datatype: "string" | "number" = "string";
-	let current_filter = "Contains";
-	let filter_dropdown_open = false;
-	let filter_input_value = "";
+	let datatype: "string" | "number" = $state("string");
+	let current_filter = $state("Contains");
+	let filter_dropdown_open = $state(false);
+	let filter_input_value = $state("");
 
 	const filter_options = {
 		string: [
@@ -59,7 +63,8 @@
 		<div class="filter-datatype-container">
 			<span>Filter as</span>
 			<button
-				on:click|stopPropagation={() => {
+				onclick={(e) => {
+					e.stopPropagation();
 					datatype = datatype === "string" ? "number" : "string";
 					current_filter = filter_options[datatype][0];
 				}}
@@ -72,8 +77,10 @@
 		<div class="input-container">
 			<div class="filter-dropdown">
 				<button
-					on:click|stopPropagation={() =>
-						(filter_dropdown_open = !filter_dropdown_open)}
+					onclick={(e) => {
+						e.stopPropagation();
+						filter_dropdown_open = !filter_dropdown_open;
+					}}
 					aria-label={`Change filter. Using '${current_filter}'`}
 				>
 					{current_filter}
@@ -84,7 +91,8 @@
 					<div class="dropdown-filter-options">
 						{#each filter_options[datatype] as opt}
 							<button
-								on:click|stopPropagation={() => {
+								onclick={(e) => {
+									e.stopPropagation();
 									current_filter = opt;
 									filter_dropdown_open = !filter_dropdown_open;
 								}}
@@ -100,8 +108,8 @@
 			<input
 				type="text"
 				value={filter_input_value}
-				on:click|stopPropagation
-				on:input={handle_filter_input}
+				onclick={(e) => e.stopPropagation()}
+				oninput={handle_filter_input}
 				placeholder="Type a value"
 				class="filter-input"
 			/>
@@ -109,7 +117,7 @@
 
 		<button
 			class="check-button"
-			on:click={() => on_filter(datatype, current_filter, filter_input_value)}
+			onclick={() => on_filter(datatype, current_filter, filter_input_value)}
 		>
 			<Check />
 		</button>

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

@@ -1,23 +1,7 @@
-import type { FilterDatatype } from "./context/dataframe_context";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FilterMenu: $$__sveltets_2_IsomorphicComponent<{
+import type { FilterDatatype } from "./types";
+type $$ComponentProps = {
     on_filter?: (datatype: FilterDatatype, selected_filter: string, value: string) => void;
-}, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FilterMenu = InstanceType<typeof FilterMenu>;
+};
+declare const FilterMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type FilterMenu = ReturnType<typeof FilterMenu>;
 export default FilterMenu;

package/dist/shared/HeaderCell.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import EditableCell from "./EditableCell.svelte";
+	import CellMenuButton from "./CellMenuButton.svelte";
+	import Padlock from "./icons/Padlock.svelte";
+	import FilterIcon from "./icons/FilterIcon.svelte";
+	import SortButtonUp from "./icons/SortButtonUp.svelte";
+	import SortButtonDown from "./icons/SortButtonDown.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { SortDirection } from "./types";
+
+	let {
+		value,
+		col_idx,
+		is_editing = false,
+		is_selected = false,
+		is_static = false,
+		sort_direction = null,
+		sort_priority = null,
+		multi_sort = false,
+		is_filtered = false,
+		show_menu_button = false,
+		is_first_column = false,
+		latex_delimiters,
+		line_breaks = true,
+		editable = true,
+		max_chars = undefined,
+		i18n,
+		onclick,
+		on_menu_click,
+		on_end_edit
+	}: {
+		value: string;
+		col_idx: number;
+		is_editing?: boolean;
+		is_selected?: boolean;
+		is_static?: boolean;
+		sort_direction?: SortDirection | null;
+		sort_priority?: number | null;
+		multi_sort?: boolean;
+		is_filtered?: boolean;
+		show_menu_button?: boolean;
+		is_first_column?: boolean;
+		latex_delimiters: { left: string; right: string; display: boolean }[];
+		line_breaks?: boolean;
+		editable?: boolean;
+		max_chars?: number | undefined;
+		i18n: I18nFormatter;
+		onclick: (event: MouseEvent, col: number) => void;
+		on_menu_click: (event: MouseEvent, col: number) => void;
+		on_end_edit: (key: string) => void;
+	} = $props();
+</script>
+
+<th
+	class="header-cell"
+	class:focus={is_editing || is_selected}
+	class:sorted={sort_direction !== null}
+	class:filtered={is_filtered}
+	class:first-column={is_first_column}
+	onclick={(e) => onclick(e, col_idx)}
+	onmousedown={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}}
+	title={value}
+>
+	<div class="cell-wrap">
+		<div class="header-content">
+			<EditableCell
+				{value}
+				{latex_delimiters}
+				{line_breaks}
+				edit={is_editing}
+				onkeydown={(event) => {
+					if (["Enter", "Escape", "Tab"].includes(event.key)) {
+						on_end_edit(event.key);
+					}
+				}}
+				header
+				{editable}
+				{is_static}
+				{i18n}
+				{max_chars}
+				coords={[col_idx, 0]}
+			/>
+		</div>
+		{#if sort_direction || is_filtered || is_static}
+			<span class="header-icons">
+				{#if is_filtered}
+					<span class="filter-indicator" aria-label="Filtered">
+						<FilterIcon />
+					</span>
+				{/if}
+				{#if sort_direction}
+					<span
+						class="sort-indicator"
+						aria-label="Sorted {sort_direction}ending"
+					>
+						{#if sort_direction === "asc"}
+							<SortButtonUp size={13} />
+						{:else}
+							<SortButtonDown size={13} />
+						{/if}
+						{#if multi_sort && sort_priority != null}
+							<span class="sort-priority">{sort_priority}</span>
+						{/if}
+					</span>
+				{/if}
+
+				{#if is_static}
+					<Padlock size={11} />
+				{/if}
+			</span>
+		{/if}
+		{#if show_menu_button}
+			<CellMenuButton on_click={(e) => on_menu_click(e, col_idx)} />
+		{/if}
+	</div>
+</th>
+
+<style>
+	.header-cell {
+		--ring-color: transparent;
+		position: relative;
+		outline: none;
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		background: var(--table-even-background-fill) !important;
+		font-weight: var(--weight-bold, 700);
+	}
+
+	.header-cell.first-column {
+		box-shadow: inset 0 0 0 1px var(--ring-color);
+	}
+
+	.header-cell:hover :global(.cell-menu-button),
+	.header-cell.focus :global(.cell-menu-button) {
+		display: flex;
+	}
+
+	.header-cell.focus {
+		--ring-color: var(--color-accent);
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 2px var(--ring-color);
+		z-index: 4;
+	}
+
+	.header-cell.focus.first-column {
+		box-shadow: inset 0 0 0 2px var(--ring-color);
+	}
+
+	.header-content {
+		display: flex;
+		align-items: center;
+		gap: var(--size-1);
+		overflow: hidden;
+		min-width: 0;
+	}
+
+	.header-icons {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		flex-shrink: 0;
+		margin-left: auto;
+		opacity: 0.6;
+	}
+
+	.sort-indicator {
+		display: flex;
+		align-items: center;
+		position: relative;
+		margin-left: -5px;
+	}
+
+	.sort-priority {
+		font-size: 8px;
+		background: var(--button-secondary-background-fill);
+		border-radius: var(--radius-full);
+		width: 12px;
+		height: 12px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.filter-indicator {
+		display: flex;
+		align-items: center;
+		width: 16px;
+		height: 16px;
+		margin-top: 3px;
+	}
+
+	.filter-indicator :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.cell-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		outline: none;
+		min-height: var(--size-9);
+		position: relative;
+		height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		gap: var(--size-1);
+		overflow: visible;
+		min-width: 0;
+	}
+</style>

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

@@ -0,0 +1,30 @@
+import type { I18nFormatter } from "js/core/src/gradio_helper";
+import type { SortDirection } from "./types";
+type $$ComponentProps = {
+    value: string;
+    col_idx: number;
+    is_editing?: boolean;
+    is_selected?: boolean;
+    is_static?: boolean;
+    sort_direction?: SortDirection | null;
+    sort_priority?: number | null;
+    multi_sort?: boolean;
+    is_filtered?: boolean;
+    show_menu_button?: boolean;
+    is_first_column?: boolean;
+    latex_delimiters: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    line_breaks?: boolean;
+    editable?: boolean;
+    max_chars?: number | undefined;
+    i18n: I18nFormatter;
+    onclick: (event: MouseEvent, col: number) => void;
+    on_menu_click: (event: MouseEvent, col: number) => void;
+    on_end_edit: (key: string) => void;
+};
+declare const HeaderCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type HeaderCell = ReturnType<typeof HeaderCell>;
+export default HeaderCell;

package/dist/shared/RowNumber.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	export let index: number | null = null;
-	export let is_header = false;
+	let {
+		index = null,
+		is_header = false
+	}: { index?: number | null; is_header?: boolean } = $props();
 </script>
 
 {#if is_header}