@gradio/dataframe 0.17.4 → 0.17.5

package/dist/shared/utils/keyboard_utils.js

@@ -1,45 +1,77 @@
 import { dequal } from "dequal/lite";
 import { handle_delete_key } from "../selection_utils";
 import { tick } from "svelte";
+import { get } from "svelte/store";
 import { copy_table_data } from "./table_utils";
+async function save_cell_value(input_value, ctx, row, col) {
+    if (!ctx.data || !ctx.data[row] || !ctx.data[row][col])
+        return;
+    const old_value = ctx.data[row][col].value;
+    ctx.data[row][col].value = input_value;
+    if (old_value !== input_value && ctx.dispatch) {
+        ctx.dispatch("change", {
+            data: ctx.data.map((row) => row.map((cell) => cell.value)),
+            headers: ctx.headers?.map((h) => h.value) || [],
+            metadata: null
+        });
+    }
+    ctx.actions.set_selected([row, col]);
+}
+export async function handle_cell_blur(event, ctx, coords) {
+    if (!ctx.data || !ctx.headers || !ctx.els)
+        return;
+    const input_el = event.target;
+    if (!input_el || input_el.value === undefined)
+        return;
+    await save_cell_value(input_el.value, ctx, coords[0], coords[1]);
+}
 function handle_header_navigation(event, ctx) {
-    if (ctx.selected_header === false || ctx.header_edit !== false)
+    const state = get(ctx.state);
+    const selected_header = state.ui_state.selected_header;
+    const header_edit = state.ui_state.header_edit;
+    const headers = ctx.headers || [];
+    if (selected_header === false || header_edit !== false)
         return false;
     switch (event.key) {
         case "ArrowDown":
-            ctx.df_actions.set_selected_header(false);
-            ctx.df_actions.set_selected([0, ctx.selected_header]);
-            ctx.df_actions.set_selected_cells([[0, ctx.selected_header]]);
+            ctx.actions.set_selected_header(false);
+            ctx.actions.set_selected([0, selected_header]);
+            ctx.actions.set_selected_cells([[0, selected_header]]);
             return true;
         case "ArrowLeft":
-            ctx.df_actions.set_selected_header(ctx.selected_header > 0 ? ctx.selected_header - 1 : ctx.selected_header);
+            ctx.actions.set_selected_header(selected_header > 0 ? selected_header - 1 : selected_header);
             return true;
         case "ArrowRight":
-            ctx.df_actions.set_selected_header(ctx.selected_header < ctx.headers.length - 1
-                ? ctx.selected_header + 1
-                : ctx.selected_header);
+            ctx.actions.set_selected_header(selected_header < headers.length - 1
+                ? selected_header + 1
+                : selected_header);
             return true;
         case "Escape":
             event.preventDefault();
-            ctx.df_actions.set_selected_header(false);
+            ctx.actions.set_selected_header(false);
             return true;
         case "Enter":
             event.preventDefault();
-            if (ctx.editable) {
-                ctx.df_actions.set_header_edit(ctx.selected_header);
+            if (state.config.editable) {
+                ctx.actions.set_header_edit(selected_header);
             }
             return true;
     }
     return false;
 }
 function handle_delete_operation(event, ctx) {
-    if (!ctx.editable)
+    if (!ctx.data || !ctx.headers || !ctx.els || !ctx.dispatch)
+        return false;
+    const state = get(ctx.state);
+    if (!state.config.editable)
         return false;
     if (event.key !== "Delete" && event.key !== "Backspace")
         return false;
-    if (ctx.editing) {
-        const [row, col] = ctx.editing;
-        const input_el = ctx.els[ctx.data[row][col].id].input;
+    const editing = state.ui_state.editing;
+    const selected_cells = state.ui_state.selected_cells;
+    if (editing) {
+        const [row, col] = editing;
+        const input_el = ctx.els[ctx.data[row][col].id]?.input;
         if (input_el && input_el.selectionStart !== input_el.selectionEnd) {
             return false;
         }
@@ -52,106 +84,110 @@ function handle_delete_operation(event, ctx) {
         }
     }
     event.preventDefault();
-    if (ctx.selected_cells.length > 0) {
-        const new_data = handle_delete_key(ctx.data, ctx.selected_cells);
+    if (selected_cells.length > 0) {
+        const new_data = handle_delete_key(ctx.data, selected_cells);
         ctx.dispatch("change", {
             data: new_data.map((row) => row.map((cell) => cell.value)),
             headers: ctx.headers.map((h) => h.value),
             metadata: null
         });
-        ctx.dispatch("input");
     }
     return true;
 }
 function handle_arrow_keys(event, ctx, i, j) {
-    if (ctx.editing)
+    const state = get(ctx.state);
+    const editing = state.ui_state.editing;
+    const selected_cells = state.ui_state.selected_cells;
+    if (editing)
+        return false;
+    if (!ctx.data)
         return false;
     event.preventDefault();
-    const next_coords = ctx.move_cursor(event, [i, j], ctx.data);
+    const next_coords = ctx.actions.move_cursor(event, [i, j], ctx.data);
     if (next_coords) {
         if (event.shiftKey) {
-            ctx.df_actions.set_selected_cells(ctx.get_range_selection(ctx.selected_cells.length > 0 ? ctx.selected_cells[0] : [i, j], next_coords));
-            ctx.df_actions.set_editing(false);
+            ctx.actions.set_selected_cells(ctx.actions.get_range_selection(selected_cells.length > 0 ? selected_cells[0] : [i, j], next_coords));
+            ctx.actions.set_editing(false);
         }
         else {
-            ctx.df_actions.set_selected_cells([next_coords]);
-            ctx.df_actions.set_editing(false);
+            ctx.actions.set_selected_cells([next_coords]);
+            ctx.actions.set_editing(false);
         }
-        ctx.df_actions.set_selected(next_coords);
+        ctx.actions.set_selected(next_coords);
     }
     else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
-        ctx.df_actions.set_selected_header(j);
-        ctx.df_actions.set_selected(false);
-        ctx.df_actions.set_selected_cells([]);
-        ctx.df_actions.set_editing(false);
+        ctx.actions.set_selected_header(j);
+        ctx.actions.set_selected(false);
+        ctx.actions.set_selected_cells([]);
+        ctx.actions.set_editing(false);
     }
     return true;
 }
 async function handle_enter_key(event, ctx, i, j) {
-    event.preventDefault();
-    if (!ctx.editable)
+    if (!ctx.data || !ctx.els)
+        return false;
+    const state = get(ctx.state);
+    if (!state.config.editable)
         return false;
-    if (event.shiftKey) {
-        await ctx.add_row(i);
-        await tick();
-        ctx.df_actions.set_selected([i + 1, j]);
+    event.preventDefault();
+    const editing = state.ui_state.editing;
+    if (editing && dequal(editing, [i, j])) {
+        const cell_id = ctx.data[i][j].id;
+        const input_el = ctx.els[cell_id]?.input;
+        if (input_el) {
+            await save_cell_value(input_el.value, ctx, i, j);
+        }
+        ctx.actions.set_editing(false);
     }
     else {
-        if (dequal(ctx.editing, [i, j])) {
-            const cell_id = ctx.data[i][j].id;
-            const input_el = ctx.els[cell_id].input;
-            if (input_el) {
-                const old_value = ctx.data[i][j].value;
-                ctx.data[i][j].value = input_el.value;
-                if (old_value !== input_el.value) {
-                    ctx.dispatch("input");
-                }
-            }
-            ctx.df_actions.set_editing(false);
-            await tick();
-            ctx.df_actions.set_selected([i, j]);
-        }
-        else {
-            ctx.df_actions.set_editing([i, j]);
-        }
+        ctx.actions.set_editing([i, j]);
     }
     return true;
 }
 function handle_tab_key(event, ctx, i, j) {
+    if (!ctx.data)
+        return false;
     event.preventDefault();
-    ctx.df_actions.set_editing(false);
-    const next_cell = ctx.get_next_cell_coordinates([i, j], ctx.data, event.shiftKey);
+    ctx.actions.set_editing(false);
+    const next_cell = ctx.actions.get_next_cell_coordinates([i, j], ctx.data, event.shiftKey);
     if (next_cell) {
-        ctx.df_actions.set_selected_cells([next_cell]);
-        ctx.df_actions.set_selected(next_cell);
-        if (ctx.editable) {
-            ctx.df_actions.set_editing(next_cell);
+        ctx.actions.set_selected_cells([next_cell]);
+        ctx.actions.set_selected(next_cell);
+        if (get(ctx.state).config.editable) {
+            ctx.actions.set_editing(next_cell);
         }
     }
     return true;
 }
 function handle_default_key(event, ctx, i, j) {
-    if (!ctx.editable)
+    const state = get(ctx.state);
+    if (!state.config.editable)
         return false;
-    if ((!ctx.editing || (ctx.editing && dequal(ctx.editing, [i, j]))) &&
+    const editing = state.ui_state.editing;
+    if ((!editing || (editing && dequal(editing, [i, j]))) &&
         event.key.length === 1) {
-        ctx.df_actions.set_editing([i, j]);
+        ctx.actions.set_editing([i, j]);
         return true;
     }
     return false;
 }
 async function handle_cell_navigation(event, ctx) {
-    if (!ctx.selected)
+    if (!ctx.data)
+        return false;
+    const state = get(ctx.state);
+    const selected = state.ui_state.selected;
+    const selected_cells = state.ui_state.selected_cells;
+    if (!selected)
         return false;
     if (event.key === "c" && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
-        if (ctx.selected_cells.length > 0) {
-            await copy_table_data(ctx.data, ctx.selected_cells);
+        if (selected_cells.length > 0) {
+            await copy_table_data(ctx.data, selected_cells);
         }
-        ctx.set_copy_flash(true);
+        ctx.actions.set_copy_flash(true);
         return true;
     }
-    const [i, j] = ctx.selected;
+    const [i, j] = selected;
     switch (event.key) {
         case "ArrowRight":
         case "ArrowLeft":
@@ -159,10 +195,10 @@ async function handle_cell_navigation(event, ctx) {
         case "ArrowUp":
             return handle_arrow_keys(event, ctx, i, j);
         case "Escape":
-            if (!ctx.editable)
+            if (!state.config.editable)
                 return false;
             event.preventDefault();
-            ctx.df_actions.set_editing(false);
+            ctx.actions.set_editing(false);
             tick().then(() => {
                 if (ctx.parent_element) {
                     ctx.parent_element.focus();
@@ -173,6 +209,9 @@ async function handle_cell_navigation(event, ctx) {
             return await handle_enter_key(event, ctx, i, j);
         case "Tab":
             return handle_tab_key(event, ctx, i, j);
+        case "Delete":
+        case "Backspace":
+            return handle_delete_operation(event, ctx);
         default:
             return handle_default_key(event, ctx, i, j);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,13 +17,13 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.14.1",
-    "@gradio/client": "^1.14.1",
-    "@gradio/button": "^0.4.12",
-    "@gradio/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.6",
+    "@gradio/atoms": "^0.15.0",
+    "@gradio/button": "^0.4.13",
+    "@gradio/icons": "^0.11.0",
     "@gradio/markdown-code": "^0.4.2",
-    "@gradio/upload": "^0.15.7",
+    "@gradio/client": "^1.14.1",
+    "@gradio/statustracker": "^0.10.7",
+    "@gradio/upload": "^0.16.0",
     "@gradio/utils": "^0.10.1"
   },
   "exports": {

package/shared/CellMenu.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from "svelte";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { I18nFormatter } from "js/utils/src";
-	import type { SortDirection } from "./context/table_context";
+	import type { SortDirection } from "./context/dataframe_context";
 
 	export let x: number;
 	export let y: number;

package/shared/EditableCell.svelte

@@ -21,7 +21,6 @@
 		right: string;
 		display: boolean;
 	}[];
-	export let clear_on_focus = false;
 	export let line_breaks = true;
 	export let editable = true;
 	export let is_static = false;
@@ -33,19 +32,18 @@
 	export let wrap_text = false;
 
 	export let show_selection_buttons = false;
-	export let coords: [number, number] | null = null;
+	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;
 
 	const dispatch = createEventDispatcher<{
-		blur: void;
+		blur: { blur_event: FocusEvent; coords: [number, number] };
 		keydown: KeyboardEvent;
 	}>();
 
 	let is_expanded = false;
 
 	export let el: HTMLInputElement | null;
-	$: _value = value;
 
 	function truncate_text(
 		text: string | number,
@@ -73,10 +71,6 @@
 		: display_content;
 
 	function use_focus(node: HTMLInputElement): any {
-		if (clear_on_focus) {
-			_value = "";
-		}
-
 		requestAnimationFrame(() => {
 			node.focus();
 		});
@@ -84,21 +78,16 @@
 		return {};
 	}
 
-	function handle_blur({
-		currentTarget
-	}: Event & {
-		currentTarget: HTMLInputElement;
-	}): void {
-		value = currentTarget.value;
-		dispatch("blur");
+	function handle_blur(event: FocusEvent): void {
+		dispatch("blur", {
+			blur_event: event,
+			coords: coords
+		});
 	}
 
 	function handle_keydown(event: KeyboardEvent): void {
 		if (event.key === "Enter") {
-			if (edit) {
-				value = _value;
-				dispatch("blur");
-			} else if (!header) {
+			if (!header) {
 				is_expanded = !is_expanded;
 			}
 		}
@@ -119,7 +108,7 @@
 		role="textbox"
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
 		bind:this={el}
-		bind:value={_value}
+		bind:value
 		class:header
 		tabindex="-1"
 		on:blur={handle_blur}