@gradio/dataframe 0.24.2 → 0.24.4

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/tanstack/virtual.svelte.js

@@ -53,8 +53,8 @@ export function createSvelteVirtualizer(options) {
                 options.onChange?.(instance, sync);
             }
         });
-        if (prev_count === 0 && current_count > 0) {
-            virtualizer.measure();
+        if (current_count !== prev_count) {
+            version += 1;
         }
         prev_count = current_count;
     });

package/dist/standalone/stubs/Upload.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-	export const aria_label = "";
-	export const root = "";
-	export const upload: any = null;
-	export const stream_handler: any = null;
+	import type { Snippet } from "svelte";
+
+	let {
+		children
+	}: {
+		aria_label?: string;
+		root?: string;
+		upload?: any;
+		stream_handler?: any;
+		children?: Snippet;
+	} = $props();
 </script>
 
 <div>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>

package/dist/standalone/stubs/Upload.svelte.d.ts

@@ -1,37 +1,11 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Upload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    aria_label?: "";
-    root?: "";
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    aria_label?: string;
+    root?: string;
     upload?: any;
     stream_handler?: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    aria_label: "";
-    root: "";
-    upload: any;
-    stream_handler: any;
-}, string>;
-type Upload = InstanceType<typeof Upload>;
+    children?: Snippet;
+};
+declare const Upload: import("svelte").Component<$$ComponentProps, {}, "">;
+type Upload = ReturnType<typeof Upload>;
 export default Upload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.24.2",
+  "version": "0.24.4",
   "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/client": "^2.4.0",
+    "@gradio/atoms": "^0.26.2",
+    "@gradio/checkbox": "^0.8.3",
     "@gradio/button": "^0.8.2",
-    "@gradio/checkbox": "^0.8.2",
     "@gradio/icons": "^0.16.0",
-    "@gradio/markdown-code": "^0.10.0",
-    "@gradio/statustracker": "^0.15.2",
-    "@gradio/upload": "^0.18.2",
-    "@gradio/utils": "^0.14.0"
+    "@gradio/client": "^2.6.0",
+    "@gradio/markdown-code": "^0.10.1",
+    "@gradio/upload": "^0.18.3",
+    "@gradio/statustracker": "^0.15.3",
+    "@gradio/utils": "^0.14.1"
   },
   "exports": {
     ".": {

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

@@ -106,7 +106,10 @@
 	}
 
 	// grow the edit-mode textarea to fit its content so the overlay
-	// expands the same way the display span does.
+	// expands the same way the display span does. `rows="1"` on the element
+	// matters: without it `height: auto` falls back to the HTML default of two
+	// rows, so scrollHeight reports two lines and a single-line cell renders an
+	// edit box roughly twice the row height.
 	function use_autosize(node: HTMLTextAreaElement): any {
 		function resize(): void {
 			node.style.height = "auto";
@@ -151,6 +154,7 @@
 		readonly={is_static}
 		aria-readonly={is_static}
 		aria-label={is_static ? "Cell is read-only" : "Edit cell"}
+		rows="1"
 		bind:this={el}
 		bind:value
 		class:header
@@ -171,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/Example.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: (string | number)[][];
+	let { value }: { value: (string | number)[][] } = $props();
 </script>
 
 <table class="input-dataframe-example">

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>