@gradio/dataframe 0.23.0 → 0.23.2

package/dist/shared/EditableCell.svelte

@@ -21,13 +21,15 @@
 		i18n,
 		is_dragging = false,
 		wrap_text = false,
+		expanded = false,
 		show_selection_buttons = false,
 		coords,
 		on_select_column = null,
 		on_select_row = null,
 		el = $bindable(null),
 		onblur,
-		onkeydown
+		onkeydown,
+		pad_left = false
 	}: {
 		edit: boolean;
 		value?: CellValue;
@@ -55,6 +57,7 @@
 		i18n: I18nFormatter;
 		is_dragging?: boolean;
 		wrap_text?: boolean;
+		expanded?: boolean;
 		show_selection_buttons?: boolean;
 		coords: [number, number];
 		on_select_column?: ((col: number) => void) | null;
@@ -65,6 +68,7 @@
 			coords: [number, number];
 		}) => void;
 		onkeydown?: (event: KeyboardEvent) => void;
+		pad_left: boolean;
 	} = $props();
 
 	function truncate_text(
@@ -79,7 +83,9 @@
 		return str.slice(0, max_length) + "...";
 	}
 
-	let should_truncate = $derived(!edit && max_chars !== null && max_chars > 0);
+	let should_truncate = $derived(
+		!edit && !expanded && max_chars !== null && max_chars > 0
+	);
 
 	let display_content = $derived(
 		editable ? value : display_value !== null ? display_value : value
@@ -99,6 +105,22 @@
 		return {};
 	}
 
+	// grow the edit-mode textarea to fit its content so the overlay
+	// expands the same way the display span does.
+	function use_autosize(node: HTMLTextAreaElement): any {
+		function resize(): void {
+			node.style.height = "auto";
+			node.style.height = `${node.scrollHeight}px`;
+		}
+		node.addEventListener("input", resize);
+		requestAnimationFrame(resize);
+		return {
+			destroy() {
+				node.removeEventListener("input", resize);
+			}
+		};
+	}
+
 	function handle_blur(event: FocusEvent): void {
 		onblur?.({
 			blur_event: event,
@@ -114,10 +136,12 @@
 		handle_blur({ target: { value } } as unknown as FocusEvent);
 	}
 
+	// returning cleanup from the effect fires the blur only when leaving edit mode, not on every render
 	$effect(() => {
-		if (!edit) {
-			// Shim blur on removal for Safari and Firefox
-			handle_blur({ target: { value } } as unknown as FocusEvent);
+		if (edit) {
+			return () => {
+				handle_blur({ target: { value } } as unknown as FocusEvent);
+			};
 		}
 	});
 </script>
@@ -135,7 +159,9 @@
 		onmousedown={(e: MouseEvent) => e.stopPropagation()}
 		onclick={(e: MouseEvent) => e.stopPropagation()}
 		use:use_focus
+		use:use_autosize
 		onkeydown={handle_keydown}
+		class:pad_left
 	/>
 {/if}
 
@@ -149,7 +175,7 @@
 		role="button"
 		class:edit
 		class:expanded={edit}
-		class:multiline={header}
+		class:header
 		onfocus={(e) => e.preventDefault()}
 		style={styling}
 		data-editable={editable}
@@ -205,7 +231,7 @@
 	textarea {
 		position: absolute;
 		flex: 1 1 0%;
-		transform: translateX(-0.1px);
+		transform: translate(0.2px, -0.5px);
 		outline: none;
 		border: none;
 		background: transparent;
@@ -217,24 +243,33 @@
 		font-size: inherit;
 		font-weight: inherit;
 		line-height: var(--line-lg);
+		left: var(--size-2);
+		user-select: text;
 	}
 
 	textarea:focus {
 		outline: none;
 	}
 
+	textarea.pad_left {
+		margin-left: var(--size-7);
+	}
+
 	span {
 		flex: 1 1 0%;
 		position: relative;
 		display: block;
 		outline: none;
-		-webkit-user-select: text;
-		-moz-user-select: text;
-		-ms-user-select: text;
-		user-select: text;
 		cursor: text;
 		width: 100%;
-		overflow-wrap: break-word;
+		min-width: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.header {
+		font-weight: var(--weight-bold);
 	}
 
 	span.text.expanded {
@@ -245,21 +280,6 @@
 		overflow: visible;
 	}
 
-	.multiline {
-		white-space: pre;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.header {
-		transform: translateX(0);
-		font-weight: var(--weight-bold);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		margin-left: var(--size-1);
-	}
-
 	.edit {
 		opacity: 0;
 		pointer-events: none;
@@ -267,6 +287,8 @@
 
 	span :global(img) {
 		max-height: 100px;
+		max-width: 100%;
+		height: auto;
 		width: auto;
 		object-fit: contain;
 	}
@@ -278,8 +300,9 @@
 	.wrap,
 	.wrap.expanded {
 		white-space: normal;
-		word-wrap: break-word;
+		overflow: visible;
+		text-overflow: clip;
 		overflow-wrap: break-word;
-		word-wrap: break-word;
+		word-break: break-word;
 	}
 </style>

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

@@ -20,6 +20,7 @@ type $$ComponentProps = {
     i18n: I18nFormatter;
     is_dragging?: boolean;
     wrap_text?: boolean;
+    expanded?: boolean;
     show_selection_buttons?: boolean;
     coords: [number, number];
     on_select_column?: ((col: number) => void) | null;
@@ -30,6 +31,7 @@ type $$ComponentProps = {
         coords: [number, number];
     }) => void;
     onkeydown?: (event: KeyboardEvent) => void;
+    pad_left: boolean;
 };
 declare const EditableCell: import("svelte").Component<$$ComponentProps, {}, "value" | "el">;
 type EditableCell = ReturnType<typeof EditableCell>;

package/dist/shared/HeaderCell.svelte

@@ -5,6 +5,7 @@
 	import FilterIcon from "./icons/FilterIcon.svelte";
 	import SortButtonUp from "./icons/SortButtonUp.svelte";
 	import SortButtonDown from "./icons/SortButtonDown.svelte";
+	import { BaseCheckbox } from "@gradio/checkbox";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { SortDirection } from "./types";
 
@@ -14,6 +15,8 @@
 		is_editing = false,
 		is_selected = false,
 		is_static = false,
+		is_bool = false,
+		select_all_state = "unchecked",
 		sort_direction = null,
 		sort_priority = null,
 		multi_sort = false,
@@ -25,15 +28,19 @@
 		editable = true,
 		max_chars = undefined,
 		i18n,
+		wrap_text = false,
 		onclick,
 		on_menu_click,
-		on_end_edit
+		on_end_edit,
+		on_select_all
 	}: {
 		value: string;
 		col_idx: number;
 		is_editing?: boolean;
 		is_selected?: boolean;
 		is_static?: boolean;
+		is_bool?: boolean;
+		select_all_state?: "checked" | "unchecked" | "indeterminate";
 		sort_direction?: SortDirection | null;
 		sort_priority?: number | null;
 		multi_sort?: boolean;
@@ -45,10 +52,16 @@
 		editable?: boolean;
 		max_chars?: number | undefined;
 		i18n: I18nFormatter;
+		wrap_text?: boolean;
 		onclick: (event: MouseEvent, col: number) => void;
 		on_menu_click: (event: MouseEvent, col: number) => void;
 		on_end_edit: (key: string) => void;
+		on_select_all?: (col: number, checked: boolean) => void;
 	} = $props();
+
+	let show_select_all = $derived(
+		is_bool && editable && !is_static && !!on_select_all
+	);
 </script>
 
 <th
@@ -57,6 +70,7 @@
 	class:sorted={sort_direction !== null}
 	class:filtered={is_filtered}
 	class:first-column={is_first_column}
+	data-heading={col_idx}
 	onclick={(e) => onclick(e, col_idx)}
 	onmousedown={(e) => {
 		e.preventDefault();
@@ -66,6 +80,25 @@
 >
 	<div class="cell-wrap">
 		<div class="header-content">
+			{#if show_select_all}
+				<div
+					class="select-all-checkbox"
+					role="button"
+					tabindex="-1"
+					onclick={(e) => e.stopPropagation()}
+					onmousedown={(e) => e.stopPropagation()}
+					onkeydown={(e) => e.stopPropagation()}
+				>
+					<BaseCheckbox
+						value={select_all_state === "checked"}
+						indeterminate={select_all_state === "indeterminate"}
+						label={`Toggle all: ${value}`}
+						interactive={true}
+						on_select={() =>
+							on_select_all?.(col_idx, select_all_state !== "checked")}
+					/>
+				</div>
+			{/if}
 			<EditableCell
 				{value}
 				{latex_delimiters}
@@ -81,7 +114,9 @@
 				{is_static}
 				{i18n}
 				{max_chars}
+				{wrap_text}
 				coords={[col_idx, 0]}
+				pad_left={show_select_all ? true : false}
 			/>
 		</div>
 		{#if sort_direction || is_filtered || is_static}
@@ -129,6 +164,13 @@
 		padding: 0;
 		background: var(--table-even-background-fill) !important;
 		font-weight: var(--weight-bold, 700);
+		outline: none;
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		overflow: visible;
+		box-sizing: border-box;
 	}
 
 	.header-cell.first-column {
@@ -142,10 +184,14 @@
 
 	.header-cell.focus {
 		--ring-color: var(--color-accent);
+		--sel-top: inset 0 2px 0 0 var(--ring-color);
+		--sel-bottom: inset 0 -2px 0 0 var(--ring-color);
+		--sel-left: inset 2px 0 0 0 var(--ring-color);
+		--sel-right: inset -2px 0 0 0 var(--ring-color);
 		box-shadow:
-			inset 1px 0 0 var(--border-color-primary),
-			inset 0 0 0 2px var(--ring-color);
-		z-index: 4;
+			var(--sel-top), var(--sel-bottom), var(--sel-left), var(--sel-right);
+		z-index: 2;
+		position: relative;
 	}
 
 	.header-cell.focus.first-column {
@@ -155,7 +201,7 @@
 	.header-content {
 		display: flex;
 		align-items: center;
-		gap: var(--size-1);
+		gap: var(--size-3);
 		overflow: hidden;
 		min-width: 0;
 	}
@@ -215,4 +261,20 @@
 		overflow: visible;
 		min-width: 0;
 	}
+
+	.select-all-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: var(--size-4);
+	}
+
+	.select-all-checkbox :global(label) {
+		margin: 0;
+	}
+
+	.select-all-checkbox :global(span) {
+		display: none;
+	}
 </style>

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

@@ -6,6 +6,8 @@ type $$ComponentProps = {
     is_editing?: boolean;
     is_selected?: boolean;
     is_static?: boolean;
+    is_bool?: boolean;
+    select_all_state?: "checked" | "unchecked" | "indeterminate";
     sort_direction?: SortDirection | null;
     sort_priority?: number | null;
     multi_sort?: boolean;
@@ -21,9 +23,11 @@ type $$ComponentProps = {
     editable?: boolean;
     max_chars?: number | undefined;
     i18n: I18nFormatter;
+    wrap_text?: boolean;
     onclick: (event: MouseEvent, col: number) => void;
     on_menu_click: (event: MouseEvent, col: number) => void;
     on_end_edit: (key: string) => void;
+    on_select_all?: (col: number, checked: boolean) => void;
 };
 declare const HeaderCell: import("svelte").Component<$$ComponentProps, {}, "">;
 type HeaderCell = ReturnType<typeof HeaderCell>;