@gradio/dataframe 0.11.3 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @gradio/dataframe
 
+## 0.12.0
+
+### Features
+
+- [#9756](https://github.com/gradio-app/gradio/pull/9756) [`92f337c`](https://github.com/gradio-app/gradio/commit/92f337cc85d545060ea343f1cee85c22b85f6444) - Fix website build issue.  Thanks @aliabd!
+
+### Fixes
+
+- [#9654](https://github.com/gradio-app/gradio/pull/9654) [`cd7dab7`](https://github.com/gradio-app/gradio/commit/cd7dab7ba5c81983f133dfa9e90ac6f92ac4fa1f) - Improve select event behaviour in gr.Dataframe.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/button@0.3.4
+- @gradio/statustracker@0.9.2
+- @gradio/atoms@0.10.0
+- @gradio/markdown-code@0.2.0
+- @gradio/upload@0.13.4
+
+## 0.11.4
+
+### Dependency updates
+
+- @gradio/markdown@0.10.3
+- @gradio/statustracker@0.9.1
+- @gradio/upload@0.13.3
+- @gradio/button@0.3.3
+- @gradio/atoms@0.9.2
+
 ## 0.11.3
 
 ### Fixes

package/dist/shared/EditableCell.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher } from "svelte";
-import { MarkdownCode } from "@gradio/markdown";
+import { MarkdownCode } from "@gradio/markdown-code";
 export let edit;
 export let value = "";
 export let display_value = null;

package/dist/shared/Table.svelte

@@ -31,8 +31,9 @@ let t_rect;
 const dispatch = createEventDispatcher();
 let editing = false;
 const get_data_at = (row, col) => data?.[row]?.[col]?.value;
+let last_selected = null;
 $: {
-  if (selected !== false) {
+  if (selected !== false && !dequal(selected, last_selected)) {
     const [row, col] = selected;
     if (!isNaN(row) && !isNaN(col) && data[row]) {
       dispatch("select", {
@@ -40,6 +41,7 @@ $: {
         value: get_data_at(row, col),
         row_value: data[row].map((d) => d.value)
       });
+      last_selected = selected;
     }
   }
 }
@@ -262,9 +264,11 @@ async function handle_cell_click(i, j) {
   header_edit = false;
   selected_header = false;
   editing = false;
-  selected = [i, j];
-  await tick();
-  parent.focus();
+  if (!dequal(selected, [i, j])) {
+    selected = [i, j];
+    await tick();
+    parent.focus();
+  }
 }
 let sort_direction;
 let sort_by;
@@ -362,7 +366,7 @@ function handle_click_outside(event) {
   editing = false;
   header_edit = false;
   selected_header = false;
-  selected = false;
+  reset_selection();
   active_cell = null;
   active_cell_menu = null;
   active_header_menu = null;
@@ -569,6 +573,10 @@ function toggle_header_menu(event, col) {
     }
   }
 }
+function reset_selection() {
+  selected = false;
+  last_selected = null;
+}
 </script>
 
 <svelte:window

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "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.9.1",
-    "@gradio/button": "^0.3.2",
+    "@gradio/atoms": "^0.10.0",
+    "@gradio/button": "^0.3.4",
     "@gradio/client": "^1.7.0",
-    "@gradio/markdown": "^0.10.2",
-    "@gradio/upload": "^0.13.2",
-    "@gradio/statustracker": "^0.9.0",
-    "@gradio/utils": "^0.7.0"
+    "@gradio/markdown-code": "^0.2.0",
+    "@gradio/statustracker": "^0.9.2",
+    "@gradio/utils": "^0.7.0",
+    "@gradio/upload": "^0.13.4"
   },
   "exports": {
     ".": {
@@ -42,7 +42,7 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.12.0"
+    "@gradio/preview": "^0.12.1"
   },
   "repository": {
     "type": "git",

package/shared/EditableCell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { MarkdownCode } from "@gradio/markdown";
+	import { MarkdownCode } from "@gradio/markdown-code";
 
 	export let edit: boolean;
 	export let value: string | number = "";

package/shared/Table.svelte

@@ -56,8 +56,10 @@
 	const get_data_at = (row: number, col: number): string | number =>
 		data?.[row]?.[col]?.value;
 
+	let last_selected: [number, number] | null = null;
+
 	$: {
-		if (selected !== false) {
+		if (selected !== false && !dequal(selected, last_selected)) {
 			const [row, col] = selected;
 			if (!isNaN(row) && !isNaN(col) && data[row]) {
 				dispatch("select", {
@@ -65,6 +67,7 @@
 					value: get_data_at(row, col),
 					row_value: data[row].map((d) => d.value)
 				});
+				last_selected = selected;
 			}
 		}
 	}
@@ -353,9 +356,11 @@
 		header_edit = false;
 		selected_header = false;
 		editing = false;
-		selected = [i, j];
-		await tick();
-		parent.focus();
+		if (!dequal(selected, [i, j])) {
+			selected = [i, j];
+			await tick();
+			parent.focus();
+		}
 	}
 
 	type SortDirection = "asc" | "des";
@@ -478,7 +483,7 @@
 		editing = false;
 		header_edit = false;
 		selected_header = false;
-		selected = false;
+		reset_selection();
 		active_cell = null;
 		active_cell_menu = null;
 		active_header_menu = null;
@@ -760,6 +765,11 @@
 			}
 		}
 	}
+
+	function reset_selection(): void {
+		selected = false;
+		last_selected = null;
+	}
 </script>
 
 <svelte:window