@gradio/dataframe 0.16.1 → 0.16.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @gradio/dataframe
 
+## 0.16.3
+
+### Features
+
+- [#10646](https://github.com/gradio-app/gradio/pull/10646) [`b01ce47`](https://github.com/gradio-app/gradio/commit/b01ce47056f5752fbf03e44600bf0f7dab69b64c) - Fixes cell-selection logic in `Table.svelte`.  Thanks @abidlabs!
+
+## 0.16.2
+
+### Fixes
+
+- [#10597](https://github.com/gradio-app/gradio/pull/10597) [`8c87eb8`](https://github.com/gradio-app/gradio/commit/8c87eb83066278b0e28267a6648d4729d6f39aa9) - Fix issue where styling changes were overridden when value was updated simultaneously.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.15.2
+- @gradio/statustracker@0.10.4
+- @gradio/atoms@0.13.3
+- @gradio/button@0.4.7
+
 ## 0.16.1
 
 ### Fixes

package/Index.svelte

@@ -103,7 +103,8 @@
 		{styling}
 		headers={_headers}
 		on:change={(e) => {
-			value = e.detail;
+			value.data = e.detail.data;
+			value.headers = e.detail.headers;
 			gradio.dispatch("change");
 		}}
 		on:input={(e) => gradio.dispatch("input")}

package/dist/Index.svelte

@@ -81,7 +81,8 @@ $:
 		{styling}
 		headers={_headers}
 		on:change={(e) => {
-			value = e.detail;
+			value.data = e.detail.data;
+			value.headers = e.detail.headers;
 			gradio.dispatch("change");
 		}}
 		on:input={(e) => gradio.dispatch("input")}

package/dist/shared/Table.svelte

@@ -152,6 +152,7 @@ async function trigger_change() {
       data: data.map((row) => row.map((cell) => cell.value)),
       headers: _headers.map((h) => h.value),
       metadata: null
+      // the metadata (display value, styling) cannot be changed by the user so we don't need to pass it up
     });
     if (!value_is_output) {
       dispatch("input");
@@ -176,6 +177,7 @@ async function handle_keydown(event) {
     switch (event.key) {
       case "ArrowDown":
         selected = [0, selected_header];
+        selected_cells = [[0, selected_header]];
         selected_header = false;
         return;
       case "ArrowLeft":
@@ -190,6 +192,9 @@ async function handle_keydown(event) {
         break;
       case "Enter":
         event.preventDefault();
+        if (editable) {
+          header_edit = selected_header;
+        }
         break;
     }
   }
@@ -252,15 +257,13 @@ async function handle_keydown(event) {
           editing = false;
         } else {
           selected_cells = [next_coords];
-          if (editable) {
-            editing = next_coords;
-            clear_on_focus = false;
-          }
+          editing = false;
         }
         selected = next_coords;
       } else if (next_coords === false && event.key === "ArrowUp" && i === 0) {
         selected_header = j;
         selected = false;
+        selected_cells = [];
         editing = false;
       }
       break;
@@ -336,7 +339,7 @@ function handle_sort(col, direction) {
   }
 }
 async function edit_header(i, _select = false) {
-  if (!editable || col_count[1] !== "dynamic" || header_edit === i)
+  if (!editable || header_edit === i)
     return;
   selected = false;
   selected_cells = [];
@@ -699,6 +702,23 @@ function commit_filter() {
     current_search_query = null;
   }
 }
+function handle_header_click(event, col) {
+  if (event.target instanceof HTMLAnchorElement) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  if (!editable)
+    return;
+  clear_on_focus = false;
+  active_cell_menu = null;
+  active_header_menu = null;
+  selected = false;
+  selected_cells = [];
+  selected_header = col;
+  header_edit = col;
+  parent.focus();
+}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -776,14 +796,11 @@ function commit_filter() {
 					{#each _headers as { value, id }, i (id)}
 						<th
 							class:frozen-column={i < actual_pinned_columns}
-							class:last-frozen={show_row_numbers
-								? i === actual_pinned_columns - 1
-								: i === actual_pinned_columns - 1}
-							class:editing={header_edit === i}
+							class:last-frozen={i === actual_pinned_columns - 1}
+							class:focus={header_edit === i || selected_header === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
-							style="width: {column_widths.length
-								? column_widths[i]
-								: undefined}; left: {i < actual_pinned_columns
+							style="width: {get_cell_width(i)}; left: {i <
+							actual_pinned_columns
 								? i === 0
 									? show_row_numbers
 										? 'var(--cell-width-row-number)'
@@ -795,27 +812,56 @@ function commit_filter() {
 											.map((_, idx) => `var(--cell-width-${idx})`)
 											.join(' + ')})`
 								: 'auto'};"
+							on:click={(event) => handle_header_click(event, i)}
+							on:mousedown={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+							}}
 						>
 							<div class="cell-wrap">
 								<div class="header-content">
 									<EditableCell
-										{value}
+										{max_chars}
+										bind:value={_headers[i].value}
+										bind:el={els[id].input}
 										{latex_delimiters}
 										{line_breaks}
+										edit={header_edit === i}
+										on:keydown={end_header_edit}
 										header
-										edit={false}
-										el={null}
 										{root}
 										{editable}
 									/>
-									<div class="sort-buttons">
-										<SortIcon
-											direction={sort_by === i ? sort_direction : null}
-											on:sort={({ detail }) => handle_sort(i, detail)}
-											{i18n}
-										/>
-									</div>
+									{#if header_edit !== i}
+										<div class="sort-buttons">
+											<SortIcon
+												direction={sort_by === i ? sort_direction : null}
+												on:sort={({ detail }) => handle_sort(i, detail)}
+												{i18n}
+											/>
+										</div>
+									{/if}
 								</div>
+								{#if editable}
+									<button
+										class="cell-menu-button"
+										on:click={(event) => toggle_header_menu(event, i)}
+										on:touchstart={(event) => {
+											event.preventDefault();
+											const touch = event.touches[0];
+											const mouseEvent = new MouseEvent("click", {
+												clientX: touch.clientX,
+												clientY: touch.clientY,
+												bubbles: true,
+												cancelable: true,
+												view: window
+											});
+											toggle_header_menu(mouseEvent, i);
+										}}
+									>
+										&#8942;
+									</button>
+								{/if}
 							</div>
 						</th>
 					{/each}
@@ -913,8 +959,10 @@ function commit_filter() {
 												.map((_, idx) => `var(--cell-width-${idx})`)
 												.join(' + ')})`
 									: 'auto'};"
-								on:click={() => {
-									toggle_header_button(i);
+								on:click={(event) => handle_header_click(event, i)}
+								on:mousedown={(event) => {
+									event.preventDefault();
+									event.stopPropagation();
 								}}
 							>
 								<div class="cell-wrap">
@@ -926,19 +974,19 @@ function commit_filter() {
 											{latex_delimiters}
 											{line_breaks}
 											edit={header_edit === i}
-											on:keydown={end_header_edit}
-											on:dblclick={() => edit_header(i)}
 											header
 											{root}
 											{editable}
 										/>
-										<div class="sort-buttons">
-											<SortIcon
-												direction={sort_by === i ? sort_direction : null}
-												on:sort={({ detail }) => handle_sort(i, detail)}
-												{i18n}
-											/>
-										</div>
+										{#if header_edit !== i}
+											<div class="sort-buttons">
+												<SortIcon
+													direction={sort_by === i ? sort_direction : null}
+													on:sort={({ detail }) => handle_sort(i, detail)}
+													{i18n}
+												/>
+											</div>
+										{/if}
 									</div>
 									{#if editable}
 										<button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "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.13.2",
+    "@gradio/atoms": "^0.13.3",
     "@gradio/client": "^1.12.0",
     "@gradio/icons": "^0.10.0",
-    "@gradio/button": "^0.4.6",
     "@gradio/markdown-code": "^0.4.0",
-    "@gradio/upload": "^0.15.1",
-    "@gradio/statustracker": "^0.10.3",
+    "@gradio/statustracker": "^0.10.4",
+    "@gradio/upload": "^0.15.2",
+    "@gradio/button": "^0.4.7",
     "@gradio/utils": "^0.10.1"
   },
   "exports": {

package/shared/Table.svelte

@@ -234,7 +234,7 @@
 			dispatch("change", {
 				data: data.map((row) => row.map((cell) => cell.value)),
 				headers: _headers.map((h) => h.value),
-				metadata: null
+				metadata: null // the metadata (display value, styling) cannot be changed by the user so we don't need to pass it up
 			});
 			if (!value_is_output) {
 				dispatch("input");
@@ -263,6 +263,7 @@
 			switch (event.key) {
 				case "ArrowDown":
 					selected = [0, selected_header];
+					selected_cells = [[0, selected_header]];
 					selected_header = false;
 					return;
 				case "ArrowLeft":
@@ -281,6 +282,9 @@
 					break;
 				case "Enter":
 					event.preventDefault();
+					if (editable) {
+						header_edit = selected_header;
+					}
 					break;
 			}
 		}
@@ -351,10 +355,7 @@
 						editing = false;
 					} else {
 						selected_cells = [next_coords];
-						if (editable) {
-							editing = next_coords;
-							clear_on_focus = false;
-						}
+						editing = false;
 					}
 					selected = next_coords;
 				} else if (
@@ -364,6 +365,7 @@
 				) {
 					selected_header = j;
 					selected = false;
+					selected_cells = [];
 					editing = false;
 				}
 				break;
@@ -445,7 +447,7 @@
 	}
 
 	async function edit_header(i: number, _select = false): Promise<void> {
-		if (!editable || col_count[1] !== "dynamic" || header_edit === i) return;
+		if (!editable || header_edit === i) return;
 		selected = false;
 		selected_cells = [];
 		selected_header = i;
@@ -896,6 +898,27 @@
 			current_search_query = null;
 		}
 	}
+
+	function handle_header_click(event: MouseEvent, col: number): void {
+		if (event.target instanceof HTMLAnchorElement) {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if (!editable) return;
+
+		clear_on_focus = false;
+		active_cell_menu = null;
+		active_header_menu = null;
+		selected = false;
+		selected_cells = [];
+		selected_header = col;
+		header_edit = col;
+
+		parent.focus();
+	}
 </script>
 
 <svelte:window on:resize={() => set_cell_widths()} />
@@ -973,14 +996,11 @@
 					{#each _headers as { value, id }, i (id)}
 						<th
 							class:frozen-column={i < actual_pinned_columns}
-							class:last-frozen={show_row_numbers
-								? i === actual_pinned_columns - 1
-								: i === actual_pinned_columns - 1}
-							class:editing={header_edit === i}
+							class:last-frozen={i === actual_pinned_columns - 1}
+							class:focus={header_edit === i || selected_header === i}
 							aria-sort={get_sort_status(value, sort_by, sort_direction)}
-							style="width: {column_widths.length
-								? column_widths[i]
-								: undefined}; left: {i < actual_pinned_columns
+							style="width: {get_cell_width(i)}; left: {i <
+							actual_pinned_columns
 								? i === 0
 									? show_row_numbers
 										? 'var(--cell-width-row-number)'
@@ -992,27 +1012,56 @@
 											.map((_, idx) => `var(--cell-width-${idx})`)
 											.join(' + ')})`
 								: 'auto'};"
+							on:click={(event) => handle_header_click(event, i)}
+							on:mousedown={(event) => {
+								event.preventDefault();
+								event.stopPropagation();
+							}}
 						>
 							<div class="cell-wrap">
 								<div class="header-content">
 									<EditableCell
-										{value}
+										{max_chars}
+										bind:value={_headers[i].value}
+										bind:el={els[id].input}
 										{latex_delimiters}
 										{line_breaks}
+										edit={header_edit === i}
+										on:keydown={end_header_edit}
 										header
-										edit={false}
-										el={null}
 										{root}
 										{editable}
 									/>
-									<div class="sort-buttons">
-										<SortIcon
-											direction={sort_by === i ? sort_direction : null}
-											on:sort={({ detail }) => handle_sort(i, detail)}
-											{i18n}
-										/>
-									</div>
+									{#if header_edit !== i}
+										<div class="sort-buttons">
+											<SortIcon
+												direction={sort_by === i ? sort_direction : null}
+												on:sort={({ detail }) => handle_sort(i, detail)}
+												{i18n}
+											/>
+										</div>
+									{/if}
 								</div>
+								{#if editable}
+									<button
+										class="cell-menu-button"
+										on:click={(event) => toggle_header_menu(event, i)}
+										on:touchstart={(event) => {
+											event.preventDefault();
+											const touch = event.touches[0];
+											const mouseEvent = new MouseEvent("click", {
+												clientX: touch.clientX,
+												clientY: touch.clientY,
+												bubbles: true,
+												cancelable: true,
+												view: window
+											});
+											toggle_header_menu(mouseEvent, i);
+										}}
+									>
+										&#8942;
+									</button>
+								{/if}
 							</div>
 						</th>
 					{/each}
@@ -1110,8 +1159,10 @@
 												.map((_, idx) => `var(--cell-width-${idx})`)
 												.join(' + ')})`
 									: 'auto'};"
-								on:click={() => {
-									toggle_header_button(i);
+								on:click={(event) => handle_header_click(event, i)}
+								on:mousedown={(event) => {
+									event.preventDefault();
+									event.stopPropagation();
 								}}
 							>
 								<div class="cell-wrap">
@@ -1123,19 +1174,19 @@
 											{latex_delimiters}
 											{line_breaks}
 											edit={header_edit === i}
-											on:keydown={end_header_edit}
-											on:dblclick={() => edit_header(i)}
 											header
 											{root}
 											{editable}
 										/>
-										<div class="sort-buttons">
-											<SortIcon
-												direction={sort_by === i ? sort_direction : null}
-												on:sort={({ detail }) => handle_sort(i, detail)}
-												{i18n}
-											/>
-										</div>
+										{#if header_edit !== i}
+											<div class="sort-buttons">
+												<SortIcon
+													direction={sort_by === i ? sort_direction : null}
+													on:sort={({ detail }) => handle_sort(i, detail)}
+													{i18n}
+												/>
+											</div>
+										{/if}
 									</div>
 									{#if editable}
 										<button