@gradio/dataframe 0.18.1 → 0.18.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @gradio/dataframe
 
+## 0.18.3
+
+### Fixes
+
+- [#11534](https://github.com/gradio-app/gradio/pull/11534) [`5259f22`](https://github.com/gradio-app/gradio/commit/5259f229939177cc2027db5164c9321566fb3eeb) - Allow changing value with single click instead of double click.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/client@1.15.6
+- @gradio/statustracker@0.10.15
+- @gradio/button@0.5.7
+- @gradio/upload@0.16.11
+- @gradio/checkbox@0.4.26
+
+## 0.18.2
+
+### Fixes
+
+- [#11496](https://github.com/gradio-app/gradio/pull/11496) [`ee0da48`](https://github.com/gradio-app/gradio/commit/ee0da481446da5ffd79151a457cd3847db645bfb) - Prevent deletion of values in static columns.  Thanks @hannahblair!
+
 ## 0.18.1
 
 ### Fixes

package/dist/shared/BooleanCell.svelte

@@ -5,25 +5,13 @@ export let on_change;
 $:
   bool_value = typeof value === "string" ? value.toLowerCase() === "true" : !!value;
 function handle_change(event) {
-  on_change(event.detail);
-}
-function handle_click(event) {
-  event.stopPropagation();
-}
-function handle_keydown(event) {
-  if (event.key === "Enter" || event.key === " ") {
-    event.stopPropagation();
+  if (editable) {
+    on_change(event.detail);
   }
 }
 </script>
 
-<div
-	class="bool-cell checkbox"
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	role="button"
-	tabindex="-1"
->
+<div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
 		bind:value={bool_value}
 		label=""
@@ -37,15 +25,13 @@ function handle_keydown(event) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--size-full);
+		width: min-content;
 		height: var(--size-full);
-	}
-	.bool-cell :global(input:disabled) {
-		opacity: 0.8;
+		margin: 0 auto;
 	}
 
-	.bool-cell.checkbox {
-		justify-content: center;
+	.bool-cell :global(input:disabled) {
+		cursor: not-allowed;
 	}
 
 	.bool-cell :global(label) {

package/dist/shared/Table.svelte

@@ -73,7 +73,8 @@ const df_ctx = create_dataframe_context({
   wrap,
   max_height,
   column_widths,
-  max_chars
+  max_chars,
+  static_columns
 });
 const { state: df_state, actions: df_actions } = df_ctx;
 $:

package/dist/shared/context/dataframe_context.d.ts

@@ -18,6 +18,7 @@ interface DataFrameState {
         max_height: number;
         column_widths: string[];
         max_chars?: number;
+        static_columns?: (string | number)[];
     };
     current_search_query: string | null;
     sort_state: {

package/dist/shared/utils/drag_utils.js

@@ -1,8 +1,13 @@
 import { get_range_selection } from "../selection_utils";
 export function create_drag_handlers(state, set_is_dragging, set_selected_cells, set_selected, handle_cell_click, show_row_numbers, parent_element) {
     const start_drag = (event, row, col) => {
+        const target = event.target;
+        const is_checkbox_click = target.type === "checkbox" ||
+            target.closest('input[type="checkbox"]') ||
+            target.closest(".bool-cell");
         if (event.target instanceof HTMLAnchorElement ||
-            (show_row_numbers && col === -1))
+            (show_row_numbers && col === -1) ||
+            is_checkbox_click)
             return;
         event.preventDefault();
         event.stopPropagation();

package/dist/shared/utils/keyboard_utils.js

@@ -59,6 +59,7 @@ function handle_header_navigation(event, ctx) {
     }
     return false;
 }
+// eslint-disable-next-line complexity
 function handle_delete_operation(event, ctx) {
     if (!ctx.data || !ctx.headers || !ctx.els || !ctx.dispatch)
         return false;
@@ -69,6 +70,10 @@ function handle_delete_operation(event, ctx) {
         return false;
     const editing = state.ui_state.editing;
     const selected_cells = state.ui_state.selected_cells;
+    const static_columns = state.config.static_columns || [];
+    if (selected_cells.some(([_, col]) => static_columns.includes(col))) {
+        return false;
+    }
     if (editing) {
         const [row, col] = editing;
         const input_el = ctx.els[ctx.data[row][col].id]?.input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,15 +17,15 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/atoms": "^0.16.3",
-    "@gradio/button": "^0.5.6",
-    "@gradio/checkbox": "^0.4.25",
-    "@gradio/client": "^1.15.5",
+    "@gradio/button": "^0.5.7",
+    "@gradio/checkbox": "^0.4.26",
     "@gradio/icons": "^0.12.0",
     "@gradio/markdown-code": "^0.5.0",
-    "@gradio/statustracker": "^0.10.14",
+    "@gradio/statustracker": "^0.10.15",
+    "@gradio/upload": "^0.16.11",
     "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.10"
+    "@gradio/atoms": "^0.16.3",
+    "@gradio/client": "^1.15.6"
   },
   "exports": {
     ".": {

package/shared/BooleanCell.svelte

@@ -9,27 +9,13 @@
 		typeof value === "string" ? value.toLowerCase() === "true" : !!value;
 
 	function handle_change(event: CustomEvent<boolean>): void {
-		on_change(event.detail);
-	}
-
-	function handle_click(event: MouseEvent): void {
-		event.stopPropagation();
-	}
-
-	function handle_keydown(event: KeyboardEvent): void {
-		if (event.key === "Enter" || event.key === " ") {
-			event.stopPropagation();
+		if (editable) {
+			on_change(event.detail);
 		}
 	}
 </script>
 
-<div
-	class="bool-cell checkbox"
-	on:click={handle_click}
-	on:keydown={handle_keydown}
-	role="button"
-	tabindex="-1"
->
+<div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
 		bind:value={bool_value}
 		label=""
@@ -43,15 +29,13 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--size-full);
+		width: min-content;
 		height: var(--size-full);
-	}
-	.bool-cell :global(input:disabled) {
-		opacity: 0.8;
+		margin: 0 auto;
 	}
 
-	.bool-cell.checkbox {
-		justify-content: center;
+	.bool-cell :global(input:disabled) {
+		cursor: not-allowed;
 	}
 
 	.bool-cell :global(label) {

package/shared/Table.svelte

@@ -92,7 +92,8 @@
 		wrap,
 		max_height,
 		column_widths,
-		max_chars
+		max_chars,
+		static_columns
 	});
 
 	const { state: df_state, actions: df_actions } = df_ctx;

package/shared/context/dataframe_context.ts

@@ -30,6 +30,7 @@ interface DataFrameState {
 		max_height: number;
 		column_widths: string[];
 		max_chars?: number;
+		static_columns?: (string | number)[];
 	};
 	current_search_query: string | null;
 	sort_state: {

package/shared/utils/drag_utils.ts

@@ -23,9 +23,16 @@ export function create_drag_handlers(
 	parent_element?: HTMLElement
 ): DragHandlers {
 	const start_drag = (event: MouseEvent, row: number, col: number): void => {
+		const target = event.target as HTMLElement;
+		const is_checkbox_click =
+			(target as HTMLInputElement).type === "checkbox" ||
+			target.closest('input[type="checkbox"]') ||
+			target.closest(".bool-cell");
+
 		if (
 			event.target instanceof HTMLAnchorElement ||
-			(show_row_numbers && col === -1)
+			(show_row_numbers && col === -1) ||
+			is_checkbox_click
 		)
 			return;
 

package/shared/utils/keyboard_utils.ts

@@ -88,6 +88,7 @@ function handle_header_navigation(
 	return false;
 }
 
+// eslint-disable-next-line complexity
 function handle_delete_operation(
 	event: KeyboardEvent,
 	ctx: DataFrameContext
@@ -101,6 +102,11 @@ function handle_delete_operation(
 	const editing = state.ui_state.editing;
 	const selected_cells = state.ui_state.selected_cells;
 
+	const static_columns = state.config.static_columns || [];
+	if (selected_cells.some(([_, col]) => static_columns.includes(col))) {
+		return false;
+	}
+
 	if (editing) {
 		const [row, col] = editing;
 		const input_el = ctx.els[ctx.data[row][col].id]?.input;