@gradio/dataframe 0.24.3 → 0.24.5

package/dist/shared/Toolbar.svelte

@@ -18,7 +18,7 @@
 		show_copy_button?: boolean;
 		show_search?: "none" | "search" | "filter";
 		fullscreen?: boolean;
-		on_copy: () => Promise<void>;
+		on_copy: () => Promise<boolean>;
 		on_commit_filter: () => void;
 		current_search_query?: string | null;
 		onsearch?: (query: string | null) => void;
@@ -48,8 +48,7 @@
 	}
 
 	async function handle_copy(): Promise<void> {
-		await on_copy();
-		copy_feedback();
+		if (await on_copy()) copy_feedback();
 	}
 
 	$effect(() => {

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

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     show_copy_button?: boolean;
     show_search?: "none" | "search" | "filter";
     fullscreen?: boolean;
-    on_copy: () => Promise<void>;
+    on_copy: () => Promise<boolean>;
     on_commit_filter: () => void;
     current_search_query?: string | null;
     onsearch?: (query: string | null) => void;

package/dist/shared/icons/SelectionButtons.svelte

@@ -27,6 +27,7 @@
 	class="selection-button selection-button-{position} {is_first_position
 		? `move-${direction}`
 		: ''}"
+	tabindex="-1"
 	onclick={(e: MouseEvent) => {
 		e.stopPropagation();
 		on_click && on_click();

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

@@ -4,7 +4,7 @@ export type CellData = {
     value: CellValue;
 };
 export declare function is_cell_in_selection(coords: [number, number], selected_cells: [number, number][]): boolean;
-export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
+export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[], row_above: number | null, row_below: number | null): string;
 export declare function get_range_selection(start: CellCoordinate, end: CellCoordinate): CellCoordinate[];
 export declare function handle_selection(current: CellCoordinate, selected_cells: CellCoordinate[], event: {
     shiftKey: boolean;

package/dist/shared/utils/selection_utils.js

@@ -2,12 +2,15 @@ export function is_cell_in_selection(coords, selected_cells) {
     const [row, col] = coords;
     return selected_cells.some(([r, c]) => r === row && c === col);
 }
-export function is_cell_selected(cell, selected_cells) {
+// row_above/row_below are the data indices of the rows the caller is rendering
+// on either side of `cell`, or null at an edge of the view. A search or a sort
+// makes them differ from row ± 1, so only the caller knows them.
+export function is_cell_selected(cell, selected_cells, row_above, row_below) {
     const [row, col] = cell;
     if (!selected_cells.some(([r, c]) => r === row && c === col))
         return "";
-    const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
-    const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+    const up = selected_cells.some(([r, c]) => r === row_above && c === col);
+    const down = selected_cells.some(([r, c]) => r === row_below && c === col);
     const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
     const right = selected_cells.some(([r, c]) => r === row && c === col + 1);
     return `cell-selected${up ? " no-top" : ""}${down ? " no-bottom" : ""}${left ? " no-left" : ""}${right ? " no-right" : ""}`;

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

@@ -1,7 +1,7 @@
 import type { CellValue, Headers, HeadersWithIDs, TableData } from "../types";
 export declare function make_cell_id(row: number, col: number): string;
 export declare function make_header_id(col: number): string;
-export declare function copy_table_data(data: TableData, selected_cells: [number, number][] | null): Promise<void>;
+export declare function copy_table_data(data: TableData, selected_cells: [number, number][]): Promise<void>;
 export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
 export declare function data_uri_to_blob(data_uri: string): Blob;
 export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: CellValue[][]) => void): void;

package/dist/shared/utils/table_utils.js

@@ -8,11 +8,12 @@ export function make_header_id(col) {
 export async function copy_table_data(data, selected_cells) {
     if (!data || !data.length)
         return;
-    const cells_to_copy = selected_cells ||
-        data.flatMap((row, r) => row.map((_, c) => [r, c]));
-    const csv = cells_to_copy.reduce((acc, [row, col]) => {
+    const csv = selected_cells.reduce((acc, [row, col]) => {
         acc[row] = acc[row] || {};
-        const value = String(data[row][col].value);
+        // only the headers are padded out to the column count on the way in, so
+        // a selection can name a cell a short row does not have
+        const cell = data[row]?.[col];
+        const value = cell ? String(cell.value) : "";
         acc[row][col] =
             value.includes(",") || value.includes('"') || value.includes("\n")
                 ? `"${value.replace(/"/g, '""')}"`
@@ -22,7 +23,9 @@ export async function copy_table_data(data, selected_cells) {
     const rows = Object.keys(csv).sort((a, b) => +a - +b);
     if (!rows.length)
         return;
-    const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
+    // every column any selected row contributes: taking them from the first row
+    // alone drops the rest of a selection that is not rectangular there
+    const cols = Array.from(new Set(rows.flatMap((r) => Object.keys(csv[r])))).sort((a, b) => +a - +b);
     const text = rows
         .map((r) => cols.map((c) => csv[r][c] || "").join(","))
         .join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.24.3",
+  "version": "0.24.5",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -15,15 +15,15 @@
     "dequal": "^2.0.3",
     "@tanstack/table-core": "^8.21.3",
     "@tanstack/virtual-core": "^3.13.6",
-    "@gradio/atoms": "^0.26.1",
+    "@gradio/atoms": "^0.26.2",
+    "@gradio/checkbox": "^0.8.3",
     "@gradio/button": "^0.8.2",
-    "@gradio/checkbox": "^0.8.2",
+    "@gradio/client": "^2.7.0",
+    "@gradio/markdown-code": "^0.10.1",
     "@gradio/icons": "^0.16.0",
-    "@gradio/markdown-code": "^0.10.0",
-    "@gradio/client": "^2.5.0",
+    "@gradio/upload": "^0.18.3",
     "@gradio/statustracker": "^0.15.3",
-    "@gradio/upload": "^0.18.2",
-    "@gradio/utils": "^0.14.0"
+    "@gradio/utils": "^0.14.2"
   },
   "exports": {
     ".": {
@@ -42,7 +42,7 @@
     "svelte": "^5.48.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.17.0"
+    "@gradio/preview": "^0.17.1"
   },
   "repository": {
     "type": "git",

package/shared/BooleanCell.svelte

@@ -23,6 +23,7 @@
 		bind:value
 		label=""
 		interactive={editable}
+		tab_index={-1}
 		on_change={handle_change}
 	/>
 </div>

package/shared/CellMenuButton.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	let { on_click }: { on_click: (event: MouseEvent) => void } = $props();
+	let {
+		on_click,
+		tab_index = undefined
+	}: {
+		on_click: (event: MouseEvent) => void;
+		tab_index?: number;
+	} = $props();
 </script>
 
 <button
 	aria-label="Open cell menu"
 	class="cell-menu-button"
 	aria-haspopup="menu"
+	tabindex={tab_index}
 	onclick={on_click}
 	ontouchstart={(event) => {
 		event.preventDefault();

package/shared/DataCell.svelte

@@ -11,9 +11,12 @@
 		datatype = "str",
 		row_idx,
 		col_idx,
+		aria_col_index = col_idx + 1,
 		col_style = "",
 		cell_style = "",
 		selection_classes = "",
+		is_active = false,
+		aria_row_index,
 		is_editing = false,
 		is_flash = false,
 		is_static = false,
@@ -32,6 +35,7 @@
 		onmousedown,
 		ondblclick,
 		oncontextmenu,
+		onfocus,
 		onblur,
 		on_menu_click,
 		on_select_column,
@@ -42,9 +46,12 @@
 		datatype?: Datatype;
 		row_idx: number;
 		col_idx: number;
+		aria_col_index?: number;
 		col_style?: string;
 		cell_style?: string;
 		selection_classes?: string;
+		is_active?: boolean;
+		aria_row_index: number;
 		is_editing?: boolean;
 		is_flash?: boolean;
 		is_static?: boolean;
@@ -63,6 +70,7 @@
 		onmousedown: (event: MouseEvent) => void;
 		ondblclick: (event: MouseEvent) => void;
 		oncontextmenu: (event: MouseEvent) => void;
+		onfocus: () => void;
 		onblur: (detail: {
 			blur_event: FocusEvent;
 			coords: [number, number];
@@ -98,10 +106,15 @@
 	data-row={row_idx}
 	data-col={col_idx}
 	data-testid={`cell-${row_idx}-${col_idx}`}
-	tabindex={is_static ? -1 : undefined}
+	role="gridcell"
+	aria-rowindex={aria_row_index}
+	aria-colindex={aria_col_index}
+	aria-selected={is_selected}
+	tabindex={is_active ? 0 : -1}
 	{onmousedown}
 	{ondblclick}
 	{oncontextmenu}
+	{onfocus}
 	style="{col_style} {cell_style}"
 >
 	<div class="cell-wrap" bind:this={wrap_el} style={locked_height}>
@@ -127,7 +140,7 @@
 			expanded={is_solo}
 		/>
 		{#if show_menu_button}
-			<CellMenuButton on_click={on_menu_click} />
+			<CellMenuButton on_click={on_menu_click} tab_index={-1} />
 		{/if}
 	</div>
 </div>
@@ -146,6 +159,17 @@
 		min-width: 0;
 	}
 
+	.body-cell:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	@media (forced-colors: active) {
+		.body-cell:focus-visible {
+			outline-color: CanvasText;
+		}
+	}
+
 	.body-cell.static {
 		user-select: text;
 	}

package/shared/EditableCell.svelte

@@ -175,8 +175,7 @@
 	<span
 		class:dragging={is_dragging}
 		onkeydown={handle_keydown}
-		tabindex="0"
-		role="button"
+		tabindex="-1"
 		class:edit
 		class:expanded={edit}
 		class:header

package/shared/EmptyRowButton.svelte

@@ -16,7 +16,6 @@
 		color: var(--body-text-color);
 		cursor: pointer;
 		transition: all 150ms;
-		margin-top: var(--size-2);
 		z-index: 10;
 		position: relative;
 		pointer-events: auto;

package/shared/HeaderCell.svelte

@@ -12,6 +12,7 @@
 	let {
 		value,
 		col_idx,
+		aria_col_index = col_idx + 1,
 		is_editing = false,
 		is_selected = false,
 		is_static = false,
@@ -30,12 +31,14 @@
 		i18n,
 		wrap_text = false,
 		onclick,
+		onfocus,
 		on_menu_click,
 		on_end_edit,
 		on_select_all
 	}: {
 		value: string;
 		col_idx: number;
+		aria_col_index?: number;
 		is_editing?: boolean;
 		is_selected?: boolean;
 		is_static?: boolean;
@@ -54,8 +57,9 @@
 		i18n: I18nFormatter;
 		wrap_text?: boolean;
 		onclick: (event: MouseEvent, col: number) => void;
+		onfocus: (col: number) => void;
 		on_menu_click: (event: MouseEvent, col: number) => void;
-		on_end_edit: (key: string) => void;
+		on_end_edit: (event: KeyboardEvent) => void;
 		on_select_all?: (col: number, checked: boolean) => void;
 	} = $props();
 
@@ -71,6 +75,11 @@
 	class:filtered={is_filtered}
 	class:first-column={is_first_column}
 	data-heading={col_idx}
+	data-testid={`header-${col_idx}`}
+	role="columnheader"
+	aria-colindex={aria_col_index}
+	tabindex={is_selected ? 0 : -1}
+	onfocus={() => onfocus(col_idx)}
 	onclick={(e) => onclick(e, col_idx)}
 	onmousedown={(e) => {
 		e.preventDefault();
@@ -94,6 +103,7 @@
 						indeterminate={select_all_state === "indeterminate"}
 						label={`Toggle all: ${value}`}
 						interactive={true}
+						tab_index={-1}
 						on_select={() =>
 							on_select_all?.(col_idx, select_all_state !== "checked")}
 					/>
@@ -106,7 +116,8 @@
 				edit={is_editing}
 				onkeydown={(event) => {
 					if (["Enter", "Escape", "Tab"].includes(event.key)) {
-						on_end_edit(event.key);
+						event.stopPropagation();
+						on_end_edit(event);
 					}
 				}}
 				header
@@ -148,7 +159,10 @@
 			</span>
 		{/if}
 		{#if show_menu_button}
-			<CellMenuButton on_click={(e) => on_menu_click(e, col_idx)} />
+			<CellMenuButton
+				on_click={(e) => on_menu_click(e, col_idx)}
+				tab_index={-1}
+			/>
 		{/if}
 	</div>
 </th>