@gradio/dataframe 0.24.5 → 0.24.6

package/Dataframe.test.ts

@@ -1070,18 +1070,30 @@ describe("Keyboard accessibility", () => {
 		expect(first_cell).toHaveFocus();
 	});
 
-	test("Enter activates the selected cell, enters editing, and commits back to grid navigation", async () => {
-		const { getByRole, getByTestId, queryByRole, listen } = await render(
-			Dataframe,
-			navigation_props
+	test("Enter, F2, Tab and Escape move between grid navigation and cell editing", async () => {
+		// The editor focuses itself in a requestAnimationFrame, which the browser
+		// defers under full-suite load. Running frames as plain timers keeps the
+		// focus hand-off deterministic without changing what the component does.
+		vi.stubGlobal(
+			"requestAnimationFrame",
+			(callback: FrameRequestCallback): number =>
+				window.setTimeout(() => callback(performance.now()), 0)
 		);
+		vi.stubGlobal("cancelAnimationFrame", (id: number): void =>
+			window.clearTimeout(id)
+		);
+		onTestFinished(() => vi.unstubAllGlobals());
+
+		const { findByRole, getByRole, getByTestId, queryByRole, listen } =
+			await render(Dataframe, navigation_props);
 		const select = listen("select");
 		const first_cell = await waitFor(() => getByTestId("cell-0-0"));
+		const second_cell = getByTestId("cell-0-1");
 
 		first_cell.focus();
 		await event.keyboard("{Enter}");
 
-		const editor = getByRole("textbox", { name: "Edit cell" });
+		const editor = await findByRole("textbox", { name: "Edit cell" });
 		await waitFor(() => expect(editor).toHaveFocus());
 		expect(select).toHaveBeenCalledWith({
 			index: [0, 0],
@@ -1091,10 +1103,38 @@ describe("Keyboard accessibility", () => {
 		});
 
 		await event.keyboard("{Enter}");
-		expect(
-			queryByRole("textbox", { name: "Edit cell" })
-		).not.toBeInTheDocument();
-		expect(first_cell).toHaveFocus();
+		await waitFor(() =>
+			expect(
+				queryByRole("textbox", { name: "Edit cell" })
+			).not.toBeInTheDocument()
+		);
+		await waitFor(() => expect(first_cell).toHaveFocus());
+
+		await event.keyboard("{F2}");
+		await waitFor(() =>
+			expect(
+				within(first_cell).getByRole("textbox", { name: "Edit cell" })
+			).toHaveFocus()
+		);
+
+		await event.tab();
+		await waitFor(() =>
+			expect(
+				within(second_cell).getByRole("textbox", { name: "Edit cell" })
+			).toHaveFocus()
+		);
+		expect(second_cell).toHaveAttribute("tabindex", "0");
+
+		await event.keyboard("{Escape}");
+		await waitFor(() =>
+			expect(
+				queryByRole("textbox", { name: "Edit cell" })
+			).not.toBeInTheDocument()
+		);
+		await waitFor(() => expect(second_cell).toHaveFocus());
+		expect(getByRole("grid").querySelectorAll('[tabindex="0"]')).toHaveLength(
+			1
+		);
 	});
 
 	test("Space activates a cell without entering edit mode", async () => {
@@ -1137,71 +1177,6 @@ describe("Keyboard accessibility", () => {
 		expect(cell).toHaveFocus();
 	});
 
-	test("F2 toggles edit mode and Escape returns to grid navigation", async () => {
-		const { getByRole, getByTestId, queryByRole } = await render(
-			Dataframe,
-			navigation_props
-		);
-		const first_cell = await waitFor(() => getByTestId("cell-0-0"));
-
-		first_cell.focus();
-		await event.keyboard("{F2}");
-		await waitFor(() =>
-			expect(getByRole("textbox", { name: "Edit cell" })).toHaveFocus()
-		);
-		await event.keyboard("{F2}");
-		expect(
-			queryByRole("textbox", { name: "Edit cell" })
-		).not.toBeInTheDocument();
-		expect(first_cell).toHaveFocus();
-
-		await event.keyboard("{F2}");
-		await waitFor(() =>
-			expect(getByRole("textbox", { name: "Edit cell" })).toHaveFocus()
-		);
-
-		await event.keyboard("{Escape}");
-		expect(
-			queryByRole("textbox", { name: "Edit cell" })
-		).not.toBeInTheDocument();
-		expect(first_cell).toHaveFocus();
-	});
-
-	test("Tab moves between cells while editing and leaves at the grid boundary", async () => {
-		const before = append_external_button("Before dataframe");
-		const { getByRole, getByTestId } = await render(
-			Dataframe,
-			navigation_props
-		);
-		const after = append_external_button("After dataframe");
-		const first_cell = await waitFor(() => getByTestId("cell-0-0"));
-		const last_cell = getByTestId("cell-2-2");
-
-		first_cell.focus();
-		await event.keyboard("{Enter}");
-		await waitFor(() =>
-			expect(getByRole("textbox", { name: "Edit cell" })).toHaveFocus()
-		);
-		await event.tab();
-		await waitFor(() =>
-			expect(getByRole("textbox", { name: "Edit cell" })).toHaveFocus()
-		);
-		expect(getByTestId("cell-0-1")).toHaveAttribute("tabindex", "0");
-
-		last_cell.focus();
-		await event.keyboard("{Enter}");
-		await event.tab();
-		expect(after).toHaveFocus();
-
-		first_cell.focus();
-		await event.keyboard("{Enter}");
-		await waitFor(() =>
-			expect(getByRole("textbox", { name: "Edit cell" })).toHaveFocus()
-		);
-		await event.tab({ shift: true });
-		expect(before).toHaveFocus();
-	});
-
 	test("arrow navigation follows visible filtered rows while select reports original indices", async () => {
 		const filtered_props = {
 			...navigation_props,
@@ -1239,10 +1214,6 @@ describe("Keyboard accessibility", () => {
 			col_value: ["match one", "skip", "match two"]
 		});
 	});
-
-	test.todo(
-		"VISUAL: keyboard focus shows a visible outline around the active Dataframe cell — needs Playwright visual regression screenshot comparison"
-	);
 });
 
 describe("Header overflow", () => {
@@ -1474,47 +1445,10 @@ describe("Add/remove rows and columns", () => {
 		expect_button_under_header();
 	});
 
-	test("table with rows still fills the screen in fullscreen", async () => {
-		// Without this the gate is unguarded: letting every table collapse leaves
-		// the suite green while populated bodies quietly lose their height.
-		const { getByRole } = await render(Dataframe, dynamic_props);
-		await wait();
-
-		// The body, not the wrap: `.table-wrap` keeps `flex: 1 1 auto` from the
-		// rule above and stays tall even when the viewport inside it collapses.
-		function viewport_height(): number {
-			const el = document.querySelector(
-				".table-container .virtual-table-viewport"
-			);
-			expect(el).not.toBeNull();
-			return (el as HTMLElement).getBoundingClientRect().height;
-		}
-
-		const before = viewport_height();
-		expect(before).toBeGreaterThan(0);
-
-		await fireEvent.click(getByRole("button", { name: /fullscreen/i }));
-		await waitFor(() =>
-			expect(
-				document.querySelector(".table-container.fullscreen")
-			).not.toBeNull()
-		);
-		await wait(300);
-
-		expect(
-			document.querySelector(".table-container.fullscreen.no-rows")
-		).toBeNull();
-		// Its own pre-fullscreen height: on a short screen a fixed fraction of
-		// the window is a weak bound.
-		expect(viewport_height()).toBeGreaterThan(before * 2);
-	});
-
 	// Cell menu add row tests: The CellMenu renders outside the table-wrap parent,
 	// so the document click handler (handle_click_outside) unmounts it before
 	// the menu button's onclick fires in synthetic event dispatch. These
 	// interactions are covered by E2E tests in dataframe_events.spec.ts.
-	test.todo("add row above via cell menu");
-	test.todo("add row below via cell menu");
 
 	test("delete row via cell menu", async () => {
 		const { container, getByTestId } = await render(Dataframe, dynamic_props);
@@ -2027,3 +1961,595 @@ describe("Boolean column select-all header checkbox", () => {
 		expect(admin.indeterminate).toBe(false);
 	});
 });
+
+describe("Dataframe CSV drop", () => {
+	afterEach(() => cleanup());
+
+	const drop_props = {
+		...default_props,
+		value: {
+			data: [["", ""]],
+			headers: ["a", "b"],
+			metadata: null
+		},
+		col_count: [2, "dynamic"] as [number, "dynamic"],
+		row_count: [1, "dynamic"] as [number, "dynamic"]
+	};
+
+	// dispatched natively rather than through fireEvent: testing-library builds
+	// its own DataTransfer and copies only own properties across, which leaves
+	// the file list empty
+	function drop_csv(
+		container: HTMLElement,
+		text: string,
+		name = "data.csv"
+	): void {
+		const data_transfer = new DataTransfer();
+		data_transfer.items.add(new File([text], name, { type: "text/csv" }));
+		const upload_container = container.querySelector(
+			".upload-container"
+		) as HTMLElement;
+		upload_container.dispatchEvent(
+			new DragEvent("drop", {
+				bubbles: true,
+				cancelable: true,
+				dataTransfer: data_transfer
+			})
+		);
+	}
+
+	function header_texts(container: HTMLElement): string[] {
+		return Array.from(
+			container.querySelectorAll("th.header-cell .header-content")
+		).map((h) => h.textContent?.trim() ?? "");
+	}
+
+	test("imports a dropped CSV as headers and values", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const change = listen("change");
+
+		drop_csv(container, "name,age\nAlice,30\nBob,25\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name", "age"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice");
+		expect(get_cell(container, 1, 1)?.textContent).toContain("25");
+		expect(change.mock.calls.at(-1)?.[0].data).toEqual([
+			["Alice", "30"],
+			["Bob", "25"]
+		]);
+	});
+
+	test("imports a dropped TSV as headers and values", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+
+		drop_csv(container, "name\tage\nAlice\t30\nBob\t25\n", "data.tsv");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name", "age"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice");
+		expect(get_cell(container, 1, 1)?.textContent).toContain("25");
+	});
+
+	// counting raw tabs misses this: the quoted one makes the counts disagree
+	// between the two lines, so nothing looks consistent
+	test("imports a dropped TSV whose field contains a quoted tab", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+
+		drop_csv(container, 'name\tnote\nAlice\t"hello\tworld"\n', "data.tsv");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name", "note"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice");
+		expect(get_cell(container, 0, 1)?.textContent).toContain("hello\tworld");
+	});
+
+	test("reports a dropped file that is neither CSV nor TSV", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "name,age\nAlice,30\n", "data.png");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalled();
+	});
+
+	test("imports a dropped single-column CSV", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+
+		drop_csv(container, "name\nAlice\nBob\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice");
+		expect(get_cell(container, 1, 0)?.textContent).toContain("Bob");
+	});
+
+	function drag_over(target: Element, type: "dragenter" | "dragleave"): void {
+		target.dispatchEvent(
+			new DragEvent(type, { bubbles: true, cancelable: true })
+		);
+	}
+
+	function drop_target(container: HTMLElement): Element {
+		return container.querySelector(".upload-container")!;
+	}
+
+	test("highlights the table while a file is dragged over it", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+		const table_wrap = get_table_wrap(container);
+
+		drag_over(drop_target(container), "dragenter");
+		await wait();
+		expect(table_wrap).toHaveClass("file-dragging");
+
+		drag_over(drop_target(container), "dragleave");
+		await wait();
+		expect(table_wrap).not.toHaveClass("file-dragging");
+	});
+
+	test.todo(
+		"VISUAL: the file drag outline is drawn inside the table's border and follows its corner radius, needs Playwright visual regression screenshot comparison"
+	);
+
+	// #13729 moved this component off hidden sr-only text and onto ARIA attributes
+	// on the grid, so the drop hint goes there too rather than into <Upload>, which
+	// discards a label on its div branch
+	test("announces the drop target on an editable table", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+
+		const described_by =
+			get_table_wrap(container).getAttribute("aria-describedby");
+		expect(described_by).toBeTruthy();
+		// tootils stubs i18n as a passthrough, so the key stands in for the string
+		// it resolves to (en.json: "Drop CSV or TSV files here to import data into
+		// dataframe")
+		expect(document.getElementById(described_by!)?.textContent).toBe(
+			"dataframe.drop_to_upload"
+		);
+	});
+
+	test("does not announce a drop target on a read-only table", async () => {
+		const { container } = await render(Dataframe, {
+			...drop_props,
+			interactive: false
+		});
+		await wait();
+
+		expect(get_table_wrap(container)).not.toHaveAttribute("aria-describedby");
+		expect(container.querySelector(".drop-hint")).toBeNull();
+	});
+
+	test("does not highlight the table when it is not interactive", async () => {
+		const { container } = await render(Dataframe, {
+			...drop_props,
+			interactive: false
+		});
+		await wait();
+
+		drag_over(drop_target(container), "dragenter");
+		await wait();
+
+		expect(get_table_wrap(container)).not.toHaveClass("file-dragging");
+	});
+
+	test("ignores a dropped CSV when the dataframe is not interactive", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...drop_props,
+			interactive: false
+		});
+		await wait();
+		const change = listen("change");
+		const input = listen("input");
+
+		drop_csv(container, "name,age\nAlice,30\nBob,25\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(input).not.toHaveBeenCalled();
+	});
+
+	const dynamic_3x3_props = {
+		...drop_props,
+		value: {
+			data: [
+				["a1", "b1", "c1"],
+				["a2", "b2", "c2"],
+				["a3", "b3", "c3"]
+			],
+			headers: ["A", "B", "C"],
+			metadata: null
+		},
+		col_count: [3, "dynamic"] as [number, "dynamic"],
+		row_count: [3, "dynamic"] as [number, "dynamic"]
+	};
+
+	const fixed_props = {
+		...drop_props,
+		value: {
+			data: [
+				["", ""],
+				["", ""]
+			],
+			headers: ["a", "b"],
+			metadata: null
+		},
+		col_count: [2, "fixed"] as [number, "fixed"],
+		row_count: [2, "fixed"] as [number, "fixed"]
+	};
+
+	// both delimiters split every line into the same number of fields, so the
+	// extension breaks the tie
+	test("imports a dropped TSV whose fields contain commas", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+
+		drop_csv(container, "first,last\tage\nAlice,Smith\t30\n", "data.tsv");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["first,last", "age"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice,Smith");
+		expect(get_cell(container, 0, 1)?.textContent).toContain("30");
+	});
+
+	// the name says tab, but every tab-split of this file is one field wide, so it
+	// has to be read as the comma-separated file it actually is
+	test("imports a mislabeled TSV whose field holds a quoted comma", async () => {
+		const { container } = await render(Dataframe, drop_props);
+		await wait();
+
+		drop_csv(container, 'name,note\nAlice,"x,y"\n', "data.tsv");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name", "note"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice");
+		expect(get_cell(container, 0, 1)?.textContent).toContain("x,y");
+	});
+
+	test("rejects a dropped file whose rows do not match its header", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "name,age\nAlice,30,Engineer\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalledTimes(1);
+
+		drop_csv(container, "name,age\nAlice\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalledTimes(2);
+	});
+
+	test("reports an error and keeps the table when the file is blank", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "   \n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalled();
+	});
+
+	// separators alone parse into a header of blank names, which would replace
+	// the table with unnamed columns instead of reporting anything
+	test("reports an error and keeps the table when the file has no column names", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, ",\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalled();
+	});
+
+	test("imports a dropped CSV that ends with a blank line", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "name,age\nAlice,30\n\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name", "age"]);
+		expect(error).not.toHaveBeenCalled();
+		expect(change.mock.calls.at(-1)?.[0].data).toEqual([["Alice", "30"]]);
+	});
+
+	// the name says comma and the header does split on one, but only the tab
+	// splits every line, so the name loses to the file's own shape
+	test("imports a mislabeled CSV whose header holds a tab", async () => {
+		const { container, listen } = await render(Dataframe, drop_props);
+		await wait();
+		const error = listen("error");
+
+		drop_csv(container, "first,last\tage\nAlice\t30\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["first,last", "age"]);
+		expect(get_cell(container, 0, 0)?.textContent).toContain("Alice");
+		expect(error).not.toHaveBeenCalled();
+	});
+
+	// a dropped file the upload rejects would otherwise report a type error on a
+	// table that ignores dropped files in the first place
+	test("reports nothing for a file dropped on a read-only table", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...drop_props,
+			interactive: false
+		});
+		await wait();
+		const error = listen("error");
+
+		drop_csv(container, "name,age\nAlice,30\n", "data.png");
+		await wait();
+
+		expect(error).not.toHaveBeenCalled();
+	});
+
+	// a value can reach the frontend ragged, and a cell past the end of its own
+	// row still renders and still takes an edit
+	test("keeps an edit to a cell in a row shorter than the header", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...drop_props,
+			value: {
+				data: [["a1"], ["a2", "b2"]],
+				headers: ["A", "B"],
+				metadata: null
+			}
+		});
+		await wait();
+		const edit = listen("edit");
+
+		const cell = get_cell(container, 0, 1)!;
+		await fireEvent.mouseDown(cell);
+		await fireEvent.dblClick(cell);
+		await wait();
+
+		const textarea = container.querySelector(
+			"textarea[aria-label='Edit cell']"
+		) as HTMLTextAreaElement;
+		textarea.value = "typed";
+		await fireEvent.input(textarea);
+		await fireEvent.blur(textarea);
+		await wait();
+
+		expect(edit).toHaveBeenCalled();
+		expect(get_cell(container, 0, 1)?.textContent).toContain("typed");
+	});
+
+	// the cell unmounts while still in edit mode, and EditableCell commits on
+	// teardown, so the stale coordinates land in the table that replaced it
+	test("drops an in-flight cell edit when the imported table is narrower", async () => {
+		const { container, listen } = await render(Dataframe, dynamic_3x3_props);
+		await wait();
+		const change = listen("change");
+		const edit = listen("edit");
+
+		await fireEvent.dblClick(get_cell(container, 0, 2)!);
+		await wait();
+
+		drop_csv(container, "name,age\nAlice,30\n");
+		await wait();
+
+		expect(edit).not.toHaveBeenCalled();
+		expect(change.mock.calls.at(-1)?.[0].data).toEqual([["Alice", "30"]]);
+	});
+
+	test("drops an in-flight cell edit when the imported table is shorter", async () => {
+		const { container, listen } = await render(Dataframe, dynamic_3x3_props);
+		await wait();
+		const change = listen("change");
+		const edit = listen("edit");
+
+		await fireEvent.dblClick(get_cell(container, 2, 0)!);
+		await wait();
+
+		drop_csv(container, "name,age,role\nAlice,30,Engineer\n");
+		await wait();
+
+		expect(edit).not.toHaveBeenCalled();
+		expect(change.mock.calls.at(-1)?.[0].data).toEqual([
+			["Alice", "30", "Engineer"]
+		]);
+	});
+
+	// the shorter case above is caught by the row guard in handle_blur. this one
+	// is not: the edited cell is still in range after the import, so the
+	// teardown commit lands on a row that exists
+	test("drops an in-flight cell edit when the imported table is the same shape", async () => {
+		const { container, listen } = await render(Dataframe, dynamic_3x3_props);
+		await wait();
+		const change = listen("change");
+		const edit = listen("edit");
+
+		const cell = get_cell(container, 0, 0)!;
+		await fireEvent.mouseDown(cell);
+		await fireEvent.dblClick(cell);
+		await wait();
+
+		const textarea = container.querySelector(
+			"textarea[aria-label='Edit cell']"
+		) as HTMLTextAreaElement;
+		textarea.value = "typed";
+		await fireEvent.input(textarea);
+		await wait();
+
+		drop_csv(container, "x,y,z\n1,2,3\n4,5,6\n7,8,9\n");
+		await wait();
+
+		expect(edit).not.toHaveBeenCalled();
+		expect(get_cell(container, 0, 0)?.textContent).toContain("1");
+		expect(change.mock.calls.at(-1)?.[0].data).toEqual([
+			["1", "2", "3"],
+			["4", "5", "6"],
+			["7", "8", "9"]
+		]);
+	});
+
+	// a coordinate kept from the old table reaches handle_copy, which reads it
+	// out of the new one. asserted against an import of the same shape, so the
+	// cell is still in the DOM and its class means something
+	test("clears the cell selection when a file is imported", async () => {
+		const { container } = await render(Dataframe, dynamic_3x3_props);
+		await wait();
+
+		await fireEvent.mouseDown(get_cell(container, 2, 2)!);
+		await wait();
+		expect(get_cell(container, 2, 2)?.className).toContain("cell-selected");
+
+		drop_csv(container, "x,y,z\n1,2,3\n4,5,6\n7,8,9\n");
+		await wait();
+
+		expect(get_cell(container, 2, 2)?.className).not.toContain("cell-selected");
+	});
+
+	// tanstack keys sorting and column filters by positional col_N, and a search
+	// left over from the old table hides imported rows, which commit_filter then
+	// drops from the value entirely
+	test("clears the search when a file is imported", async () => {
+		const { container } = await render(Dataframe, {
+			...dynamic_3x3_props,
+			show_search: "search"
+		});
+		await wait();
+
+		const search = container.querySelector(
+			"input.search-input"
+		) as HTMLInputElement;
+		search.value = "a1";
+		await fireEvent.input(search);
+		await wait();
+		expect(get_cell(container, 1, 0)).toBeNull();
+
+		drop_csv(container, "x,y,z\n1,2,3\n4,5,6\n7,8,9\n");
+		await wait();
+
+		expect(get_cell(container, 0, 0)?.textContent).toContain("1");
+		expect(get_cell(container, 2, 0)?.textContent).toContain("7");
+	});
+
+	// dragenter on the cell being entered arrives before dragleave on the one
+	// being left, and both bubble to the drop target
+	test("keeps the highlight while the file moves between cells", async () => {
+		const { container } = await render(Dataframe, dynamic_3x3_props);
+		await wait();
+		const table_wrap = get_table_wrap(container);
+		const first = get_cell(container, 0, 0)!;
+		const second = get_cell(container, 0, 1)!;
+
+		drag_over(first, "dragenter");
+		await wait();
+		expect(table_wrap).toHaveClass("file-dragging");
+
+		drag_over(second, "dragenter");
+		drag_over(first, "dragleave");
+		await wait();
+		expect(table_wrap).toHaveClass("file-dragging");
+
+		drag_over(second, "dragleave");
+		await wait();
+		expect(table_wrap).not.toHaveClass("file-dragging");
+	});
+
+	test("imports into a fixed-shape dataframe when the file matches", async () => {
+		const { container } = await render(Dataframe, fixed_props);
+		await wait();
+
+		drop_csv(container, "name,age\nAlice,30\nBob,25\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["name", "age"]);
+		expect(get_cell(container, 1, 0)?.textContent).toContain("Bob");
+	});
+
+	test("rejects a dropped file that does not fit a fixed column count", async () => {
+		const { container, listen } = await render(Dataframe, fixed_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "name,age,role\nAlice,30,Engineer\nBob,25,Designer\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalled();
+	});
+
+	// the passthrough i18n stub returns the bare key, which has no placeholders
+	// to fill, so this one swaps in a translation of its own
+	test("reports an import error through i18n with its counts filled in", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...fixed_props,
+			i18n: (key: string) =>
+				key === "dataframe.import_fixed_columns"
+					? "want {expected} columns, got {actual}"
+					: key
+		});
+		await wait();
+		const error = listen("error");
+
+		drop_csv(container, "name,age,role\nAlice,30,Engineer\nBob,25,Designer\n");
+		await wait();
+
+		expect(error).toHaveBeenCalledWith("want 2 columns, got 3");
+	});
+
+	test("rejects a dropped file that does not fit a fixed row count", async () => {
+		const { container, listen } = await render(Dataframe, fixed_props);
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "name,age\nAlice,30\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalled();
+	});
+
+	test("rejects a dropped file when a column is read-only", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...drop_props,
+			static_columns: [0]
+		});
+		await wait();
+		const change = listen("change");
+		const error = listen("error");
+
+		drop_csv(container, "name,age\nAlice,30\n");
+		await wait();
+
+		expect(header_texts(container)).toEqual(["a", "b"]);
+		expect(change).not.toHaveBeenCalled();
+		expect(error).toHaveBeenCalled();
+	});
+});