Implement multiple cell selection (#10456)

* add group cell selection logic

* hide cell menu button when selected cells > 1

* add delete values logic

* add changeset

* maintain tab navigation

* tweak

* add interaction story

* fix test

* * copy selected cells
* delete and backspace for deletion

* move funcs to utils file

* fix test

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: hannahblair

.changeset/eleven-files-prove.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Implement multiple cell selection 

js/dataframe/Dataframe.stories.svelte

@@ -200,9 +200,11 @@
 		const canvas = within(canvasElement);
 
 		const cell_400 = canvas.getAllByRole("cell")[5];
-		userEvent.click(cell_400);
+		await userEvent.click(cell_400);
 
-		const open_dialog_btn = within(cell_400).getByText("⋮");
+		const open_dialog_btn = await within(cell_400).findByRole("button", {
+			name: "⋮"
+		});
 		await userEvent.click(open_dialog_btn);
 
 		const add_row_btn = canvas.getByText("Add row above");
@@ -227,12 +229,52 @@
 	}}
 />
 
+<Story
+	name="Dataframe with multiple selection interactions"
+	args={{
+		values: [
+			[1, 2, 3, 4],
+			[5, 6, 7, 8],
+			[9, 10, 11, 12],
+			[13, 14, 15, 16]
+		],
+		col_count: [4, "dynamic"],
+		row_count: [4, "dynamic"],
+		headers: ["A", "B", "C", "D"],
+		editable: true
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const cells = canvas.getAllByRole("cell");
+		const user = userEvent.setup();
+
+		// cmd+click to select non-contiguous cells
+		await user.keyboard("[MetaLeft>]");
+		await user.click(cells[4]);
+		await user.click(cells[6]);
+		await user.click(cells[2]);
+		await user.keyboard("[/MetaLeft]");
+
+		// shift+click to select a range
+		await user.keyboard("[ShiftLeft>]");
+		await user.click(cells[7]);
+		await user.click(cells[6]);
+		await user.keyboard("[/ShiftLeft]");
+
+		// clear selected cells
+		await user.keyboard("{Delete}");
+
+		// verify cells were cleared by clicking one
+		await user.click(cells[2]);
+	}}
+/>
+
 <Story
 	name="Dataframe toolbar interactions"
 	args={{
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],
-		headers: ["Math", "Reading", "Writifdsfsng"],
+		headers: ["Math", "Reading", "Writing"],
 		values: [
 			[800, 100, 400],
 			[200, 800, 700]
@@ -244,12 +286,12 @@
 		const canvas = within(canvasElement);
 
 		const copy_button = canvas.getByRole("button", {
-			name: /copy table data/i
+			name: "Copy table data"
 		});
 		await userEvent.click(copy_button);
 
 		const fullscreen_button = canvas.getByRole("button", {
-			name: /enter fullscreen/i
+			name: "Enter fullscreen"
 		});
 		await userEvent.click(fullscreen_button);