@gradio/dataframe 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/dataframe
 
+## 0.18.1
+
+### Fixes
+
+- [#11436](https://github.com/gradio-app/gradio/pull/11436) [`f49b8da`](https://github.com/gradio-app/gradio/commit/f49b8da1c062dbd81acb8e7fdcdc9a09a272d02f) - Multi-Line DataFrame Editing.  Thanks @deckar01!
+
+### Dependency updates
+
+- @gradio/atoms@0.16.3
+- @gradio/statustracker@0.10.14
+- @gradio/upload@0.16.10
+- @gradio/client@1.15.5
+- @gradio/markdown-code@0.5.0
+- @gradio/button@0.5.6
+- @gradio/checkbox@0.4.25
+
 ## 0.18.0
 
 ### Features

package/dist/shared/EditableCell.svelte

@@ -23,7 +23,6 @@ export let on_select_column = null;
 export let on_select_row = null;
 export let el;
 const dispatch = createEventDispatcher();
-let is_expanded = false;
 function truncate_text(text, max_length = null, is_image = false) {
   if (is_image)
     return String(text);
@@ -35,7 +34,7 @@ function truncate_text(text, max_length = null, is_image = false) {
   return str.slice(0, max_length) + "...";
 }
 $:
-  should_truncate = !edit && !is_expanded && max_chars !== null && max_chars > 0;
+  should_truncate = !edit && max_chars !== null && max_chars > 0;
 $:
   display_content = editable ? value : display_value !== null ? display_value : value;
 $:
@@ -53,18 +52,8 @@ function handle_blur(event) {
   });
 }
 function handle_keydown(event) {
-  if (event.key === "Enter") {
-    if (!header) {
-      is_expanded = !is_expanded;
-    }
-  }
   dispatch("keydown", event);
 }
-function handle_click() {
-  if (!edit && !header) {
-    is_expanded = !is_expanded;
-  }
-}
 function handle_bool_change(new_value) {
   value = new_value.toString();
   dispatch("blur", {
@@ -81,10 +70,9 @@ function handle_bool_change(new_value) {
 </script>
 
 {#if edit && datatype !== "bool"}
-	<input
+	<textarea
 		readonly={is_static}
 		aria-readonly={is_static}
-		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
 		bind:value
@@ -92,7 +80,6 @@ function handle_bool_change(new_value) {
 		tabindex="-1"
 		on:blur={handle_blur}
 		on:mousedown|stopPropagation
-		on:mouseup|stopPropagation
 		on:click|stopPropagation
 		use:use_focus
 		on:keydown={handle_keydown}
@@ -108,18 +95,17 @@ function handle_bool_change(new_value) {
 {:else}
 	<span
 		class:dragging={is_dragging}
-		on:click={handle_click}
 		on:keydown={handle_keydown}
 		tabindex="0"
 		role="button"
 		class:edit
-		class:expanded={is_expanded}
+		class:expanded={edit}
 		class:multiline={header}
 		on:focus|preventDefault
 		style={styling}
 		data-editable={editable}
 		data-max-chars={max_chars}
-		data-expanded={is_expanded}
+		data-expanded={edit}
 		placeholder=" "
 		class:text={datatype === "str"}
 		class:wrap={wrap_text}
@@ -167,7 +153,7 @@ function handle_bool_change(new_value) {
 		cursor: crosshair !important;
 	}
 
-	input {
+	textarea {
 		position: absolute;
 		flex: 1 1 0%;
 		transform: translateX(-0.1px);
@@ -176,6 +162,16 @@ function handle_bool_change(new_value) {
 		background: transparent;
 		cursor: text;
 		width: calc(100% - var(--size-2));
+		resize: none;
+		height: 100%;
+		padding-left: 0;
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: var(--line-lg);
+	}
+
+	textarea:focus {
+		outline: none;
 	}
 
 	span {
@@ -227,7 +223,7 @@ function handle_bool_change(new_value) {
 		object-fit: contain;
 	}
 
-	input:read-only {
+	textarea:read-only {
 		cursor: not-allowed;
 	}
 

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

@@ -25,11 +25,10 @@ declare const __propDef: {
         coords: [number, number];
         on_select_column?: (((col: number) => void) | null) | undefined;
         on_select_row?: (((row: number) => void) | null) | undefined;
-        el: HTMLInputElement | null;
+        el: HTMLTextAreaElement | null;
     };
     events: {
         mousedown: MouseEvent;
-        mouseup: MouseEvent;
         click: MouseEvent;
         focus: FocusEvent;
         blur: CustomEvent<{

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

@@ -40,7 +40,7 @@ declare const __propDef: {
         components?: Record<string, any> | undefined;
         el: {
             cell: HTMLTableCellElement | null;
-            input: HTMLInputElement | null;
+            input: HTMLTextAreaElement | null;
         };
         handle_select_column: (col: number) => void;
         handle_select_row: (row: number) => void;

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

@@ -33,7 +33,7 @@ declare const __propDef: {
         max_chars: number | undefined;
         editable: boolean;
         i18n: I18nFormatter;
-        el: HTMLInputElement | null;
+        el: HTMLTextAreaElement | null;
         is_static: boolean;
         col_count: [number, "fixed" | "dynamic"];
     };

package/dist/shared/context/dataframe_context.d.ts

@@ -165,7 +165,7 @@ export interface DataFrameContext {
     styling?: string[][] | null;
     els?: Record<string, {
         cell: HTMLTableCellElement | null;
-        input: HTMLInputElement | null;
+        input: HTMLTextAreaElement | null;
     }>;
     parent_element?: HTMLElement;
     get_data_at?: (row: number, col: number) => string | number;

package/dist/shared/types.d.ts

@@ -13,6 +13,6 @@ export type TableData = TableCell[][];
 export type CountConfig = [number, "fixed" | "dynamic"];
 export type ElementRefs = Record<string, {
     cell: null | HTMLTableCellElement;
-    input: null | HTMLInputElement;
+    input: null | HTMLTextAreaElement;
 }>;
 export type DataBinding = Record<string, TableCell>;

package/dist/shared/utils/data_processing.d.ts

@@ -1,11 +1,11 @@
 import type { Headers, HeadersWithIDs } from "../utils";
 export declare function make_headers(_head: Headers, col_count: [number, "fixed" | "dynamic"], els: Record<string, {
     cell: null | HTMLTableCellElement;
-    input: null | HTMLInputElement;
+    input: null | HTMLTextAreaElement;
 }>, make_id: () => string): HeadersWithIDs;
 export declare function process_data(values: (string | number)[][], els: Record<string, {
     cell: null | HTMLTableCellElement;
-    input: null | HTMLInputElement;
+    input: null | HTMLTextAreaElement;
 }>, data_binding: Record<string, any>, make_id: () => string, display_value?: string[][] | null): {
     id: string;
     value: string | number;

package/dist/shared/utils/keyboard_utils.js

@@ -129,8 +129,10 @@ async function handle_enter_key(event, ctx, i, j) {
     const state = get(ctx.state);
     if (!state.config.editable)
         return false;
-    event.preventDefault();
     const editing = state.ui_state.editing;
+    if (editing && event.shiftKey)
+        return false;
+    event.preventDefault();
     if (editing && dequal(editing, [i, j])) {
         const cell_id = ctx.data[i][j].id;
         const input_el = ctx.els[cell_id]?.input;
@@ -138,6 +140,8 @@ async function handle_enter_key(event, ctx, i, j) {
             await save_cell_value(input_el.value, ctx, i, j);
         }
         ctx.actions.set_editing(false);
+        await tick();
+        ctx.parent_element?.focus();
     }
     else {
         ctx.actions.set_editing([i, j]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,15 +17,15 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.16.2",
-    "@gradio/checkbox": "^0.4.24",
-    "@gradio/client": "^1.15.4",
-    "@gradio/button": "^0.5.5",
-    "@gradio/statustracker": "^0.10.13",
+    "@gradio/atoms": "^0.16.3",
+    "@gradio/button": "^0.5.6",
+    "@gradio/checkbox": "^0.4.25",
+    "@gradio/client": "^1.15.5",
     "@gradio/icons": "^0.12.0",
-    "@gradio/upload": "^0.16.9",
+    "@gradio/markdown-code": "^0.5.0",
+    "@gradio/statustracker": "^0.10.14",
     "@gradio/utils": "^0.10.2",
-    "@gradio/markdown-code": "^0.4.4"
+    "@gradio/upload": "^0.16.10"
   },
   "exports": {
     ".": {
@@ -44,7 +44,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.13.2"
+    "@gradio/preview": "^0.14.0"
   },
   "repository": {
     "type": "git",

package/shared/EditableCell.svelte

@@ -36,15 +36,13 @@
 	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: HTMLInputElement | null;
+	export let el: HTMLTextAreaElement | null;
 
 	const dispatch = createEventDispatcher<{
 		blur: { blur_event: FocusEvent; coords: [number, number] };
 		keydown: KeyboardEvent;
 	}>();
 
-	let is_expanded = false;
-
 	function truncate_text(
 		text: string | number,
 		max_length: number | null = null,
@@ -57,8 +55,7 @@
 		return str.slice(0, max_length) + "...";
 	}
 
-	$: should_truncate =
-		!edit && !is_expanded && max_chars !== null && max_chars > 0;
+	$: should_truncate = !edit && max_chars !== null && max_chars > 0;
 
 	$: display_content = editable
 		? value
@@ -70,7 +67,7 @@
 		? truncate_text(display_content, max_chars, datatype === "image")
 		: display_content;
 
-	function use_focus(node: HTMLInputElement): any {
+	function use_focus(node: HTMLTextAreaElement): any {
 		requestAnimationFrame(() => {
 			node.focus();
 		});
@@ -86,20 +83,9 @@
 	}
 
 	function handle_keydown(event: KeyboardEvent): void {
-		if (event.key === "Enter") {
-			if (!header) {
-				is_expanded = !is_expanded;
-			}
-		}
 		dispatch("keydown", event);
 	}
 
-	function handle_click(): void {
-		if (!edit && !header) {
-			is_expanded = !is_expanded;
-		}
-	}
-
 	function handle_bool_change(new_value: boolean): void {
 		value = new_value.toString();
 		dispatch("blur", {
@@ -116,10 +102,9 @@
 </script>
 
 {#if edit && datatype !== "bool"}
-	<input
+	<textarea
 		readonly={is_static}
 		aria-readonly={is_static}
-		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
 		bind:value
@@ -127,7 +112,6 @@
 		tabindex="-1"
 		on:blur={handle_blur}
 		on:mousedown|stopPropagation
-		on:mouseup|stopPropagation
 		on:click|stopPropagation
 		use:use_focus
 		on:keydown={handle_keydown}
@@ -143,18 +127,17 @@
 {:else}
 	<span
 		class:dragging={is_dragging}
-		on:click={handle_click}
 		on:keydown={handle_keydown}
 		tabindex="0"
 		role="button"
 		class:edit
-		class:expanded={is_expanded}
+		class:expanded={edit}
 		class:multiline={header}
 		on:focus|preventDefault
 		style={styling}
 		data-editable={editable}
 		data-max-chars={max_chars}
-		data-expanded={is_expanded}
+		data-expanded={edit}
 		placeholder=" "
 		class:text={datatype === "str"}
 		class:wrap={wrap_text}
@@ -202,7 +185,7 @@
 		cursor: crosshair !important;
 	}
 
-	input {
+	textarea {
 		position: absolute;
 		flex: 1 1 0%;
 		transform: translateX(-0.1px);
@@ -211,6 +194,16 @@
 		background: transparent;
 		cursor: text;
 		width: calc(100% - var(--size-2));
+		resize: none;
+		height: 100%;
+		padding-left: 0;
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: var(--line-lg);
+	}
+
+	textarea:focus {
+		outline: none;
 	}
 
 	span {
@@ -262,7 +255,7 @@
 		object-fit: contain;
 	}
 
-	input:read-only {
+	textarea:read-only {
 		cursor: not-allowed;
 	}
 

package/shared/Table.svelte

@@ -165,7 +165,7 @@
 
 	let els: Record<
 		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	> = {};
 	let data_binding: Record<string, (typeof data)[0][0]> = {};
 	let _headers = make_headers(headers, col_count, els, make_id);

package/shared/TableCell.svelte

@@ -59,7 +59,7 @@
 	export let components: Record<string, any> = {};
 	export let el: {
 		cell: HTMLTableCellElement | null;
-		input: HTMLInputElement | null;
+		input: HTMLTextAreaElement | null;
 	};
 	export let handle_select_column: (col: number) => void;
 	export let handle_select_row: (row: number) => void;

package/shared/TableHeader.svelte

@@ -36,7 +36,7 @@
 	export let max_chars: number | undefined;
 	export let editable: boolean;
 	export let i18n: I18nFormatter;
-	export let el: HTMLInputElement | null;
+	export let el: HTMLTextAreaElement | null;
 	export let is_static: boolean;
 	export let col_count: [number, "fixed" | "dynamic"];
 

package/shared/Toolbar.svelte

@@ -21,7 +21,7 @@
 	let input_value = "";
 
 	function handle_search_input(e: Event): void {
-		const target = e.target as HTMLInputElement;
+		const target = e.target as HTMLTextAreaElement;
 		input_value = target.value;
 		const new_query = input_value || null;
 		if (current_search_query !== new_query) {

package/shared/context/dataframe_context.ts

@@ -179,7 +179,7 @@ export interface DataFrameContext {
 	styling?: string[][] | null;
 	els?: Record<
 		string,
-		{ cell: HTMLTableCellElement | null; input: HTMLInputElement | null }
+		{ cell: HTMLTableCellElement | null; input: HTMLTextAreaElement | null }
 	>;
 	parent_element?: HTMLElement;
 	get_data_at?: (row: number, col: number) => string | number;

package/shared/types.ts

@@ -22,7 +22,7 @@ export type ElementRefs = Record<
 	string,
 	{
 		cell: null | HTMLTableCellElement;
-		input: null | HTMLInputElement;
+		input: null | HTMLTextAreaElement;
 	}
 >;
 

package/shared/utils/data_processing.ts

@@ -5,7 +5,7 @@ export function make_headers(
 	col_count: [number, "fixed" | "dynamic"],
 	els: Record<
 		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	>,
 	make_id: () => string
 ): HeadersWithIDs {
@@ -38,7 +38,7 @@ export function process_data(
 	values: (string | number)[][],
 	els: Record<
 		string,
-		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	>,
 	data_binding: Record<string, any>,
 	make_id: () => string,

package/shared/utils/keyboard_utils.ts

@@ -180,9 +180,10 @@ async function handle_enter_key(
 	const state = get(ctx.state);
 	if (!state.config.editable) return false;
 
-	event.preventDefault();
-
 	const editing = state.ui_state.editing;
+	if (editing && event.shiftKey) return false;
+
+	event.preventDefault();
 
 	if (editing && dequal(editing, [i, j])) {
 		const cell_id = ctx.data[i][j].id;
@@ -191,6 +192,8 @@ async function handle_enter_key(
 			await save_cell_value(input_el.value, ctx, i, j);
 		}
 		ctx.actions.set_editing(false);
+		await tick();
+		ctx.parent_element?.focus();
 	} else {
 		ctx.actions.set_editing([i, j]);
 	}