@gradio/dataframe 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @gradio/dataframe
 
+## 0.16.0
+
+### Features
+
+- [#10561](https://github.com/gradio-app/gradio/pull/10561) [`26494ce`](https://github.com/gradio-app/gradio/commit/26494cea570ffe0ead1f8b7a7135ab5a89c6bcbd) - Allow freezing columns in `gr.Dataframe`.  Thanks @hannahblair!
+- [#10554](https://github.com/gradio-app/gradio/pull/10554) [`b8ff5d6`](https://github.com/gradio-app/gradio/commit/b8ff5d6bfe1a9f3379580754b1e23857e2f0c96b) - Add optional search bar to `gr.Dataframe`'s toolbar.  Thanks @hannahblair!
+- [#10529](https://github.com/gradio-app/gradio/pull/10529) [`196b600`](https://github.com/gradio-app/gradio/commit/196b600b3962b85781b53c512e17708644b86f6f) - Select entire row or column in dataframe.  Thanks @hannahblair!
+- [#10558](https://github.com/gradio-app/gradio/pull/10558) [`1113002`](https://github.com/gradio-app/gradio/commit/111300242fdf135724a304920a93fc34a8037f7d) - Fix spacing issue with `gr.Dataframe` in Safari.  Thanks @hannahblair!
+- [#10553](https://github.com/gradio-app/gradio/pull/10553) [`4c08b9f`](https://github.com/gradio-app/gradio/commit/4c08b9f3c0bcafb0edc56330d8d81e78a6e3763b) - Prevent scrolling when the dataframe cell menu is open.  Thanks @hannahblair!
+- [#10541](https://github.com/gradio-app/gradio/pull/10541) [`e505fab`](https://github.com/gradio-app/gradio/commit/e505fabecb17c50e073483ed7d6aab2e04c9fcf2) - Add copy button feedback to `gr.Dataframe`.  Thanks @hannahblair!
+- [#10540](https://github.com/gradio-app/gradio/pull/10540) [`deeebfb`](https://github.com/gradio-app/gradio/commit/deeebfba46f15bb3641b86e25156215d2d727087) - Revert editable text changes.  Thanks @hannahblair!
+
+### Fixes
+
+- [#10490](https://github.com/gradio-app/gradio/pull/10490) [`178311b`](https://github.com/gradio-app/gradio/commit/178311b72d72a3c5f4a67bee5e0098be4232e68c) - Ensure row numbers functionality in dataframe works as expected.  Thanks @hannahblair!
+- [#10535](https://github.com/gradio-app/gradio/pull/10535) [`d909868`](https://github.com/gradio-app/gradio/commit/d9098681f8883686a617c8f98b22c77057febed1) - Ensure `max_height` is applied in `gr.Dataframe`.  Thanks @hannahblair!
+- [#10521](https://github.com/gradio-app/gradio/pull/10521) [`79937fd`](https://github.com/gradio-app/gradio/commit/79937fd76021b31abdbc3f8f2c32ef123fd676aa) - Change word-break prop in dataframe headers.  Thanks @hannahblair!
+- [#10520](https://github.com/gradio-app/gradio/pull/10520) [`2a1fc2a`](https://github.com/gradio-app/gradio/commit/2a1fc2a92888f622579e4b2daf86be487c73004d) - Ensure links work as expected in dataframe.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.3
+- @gradio/atoms@0.13.2
+- @gradio/utils@0.10.1
+- @gradio/client@1.12.0
+- @gradio/markdown-code@0.4.0
+- @gradio/upload@0.15.1
+- @gradio/button@0.4.6
+
+## 0.15.0
+
+### Features
+
+- [#10456](https://github.com/gradio-app/gradio/pull/10456) [`8e40c15`](https://github.com/gradio-app/gradio/commit/8e40c15669ed1244d6f2288e55c2223279bd37a4) - Implement multiple cell selection.  Thanks @hannahblair!
+- [#10463](https://github.com/gradio-app/gradio/pull/10463) [`ed7a091`](https://github.com/gradio-app/gradio/commit/ed7a0919ab6b31184dc4d686b722dbeb013e9ce9) - Expand and collapse dataframe cells.  Thanks @hannahblair!
+- [#10478](https://github.com/gradio-app/gradio/pull/10478) [`afb96c6`](https://github.com/gradio-app/gradio/commit/afb96c64451e5a282bfee89445d831d1c87f9746) - Improve dataframe's upload accessibility.  Thanks @hannahblair!
+- [#10491](https://github.com/gradio-app/gradio/pull/10491) [`ff5f976`](https://github.com/gradio-app/gradio/commit/ff5f976bbb685fdd4f7c1faeda79e094f55a9f56) - Allow multiline headers in gr.Dataframe.  Thanks @hannahblair!
+- [#10494](https://github.com/gradio-app/gradio/pull/10494) [`10932a2`](https://github.com/gradio-app/gradio/commit/10932a291ac7f591bb1d56e4e353b51f10ecc6e3) - Ensure dataframe is not editable when `interactive` is False.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/client@1.11.0
+- @gradio/upload@0.15.0
+- @gradio/button@0.4.5
+
 ## 0.14.0
 
 ### Features

package/Dataframe.stories.svelte

@@ -93,6 +93,26 @@
 		row_count: [3, "dynamic"],
 		editable: false
 	}}
+	play={async ({ canvasElement }) => {
+		// tests that the cell is not editable
+
+		const canvas = within(canvasElement);
+		const cells = canvas.getAllByRole("cell");
+		const initial_value = cells[0].textContent;
+
+		await userEvent.click(cells[0]);
+		await userEvent.keyboard("new value");
+
+		const final_value = cells[0].textContent;
+		if (initial_value !== final_value) {
+			throw new Error("Cell content changed when it should be non-editable");
+		}
+
+		const inputs = canvas.queryAllByRole("textbox");
+		if (inputs.length > 0) {
+			throw new Error("Input field appeared when table should be non-editable");
+		}
+	}}
 />
 
 <Story
@@ -184,6 +204,18 @@
 	}}
 />
 
+<Story
+	name="Dataframe with link"
+	args={{
+		values: [['<a href="https://www.google.com/">google</a>']],
+		headers: ["link"],
+		datatype: ["markdown"],
+		interactive: false,
+		col_count: [1, "dynamic"],
+		row_count: [1, "dynamic"]
+	}}
+/>
+
 <Story
 	name="Dataframe with dialog interactions"
 	args={{
@@ -200,9 +232,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");
@@ -214,7 +248,7 @@
 />
 
 <Story
-	name="Dataframe with fullscreen button"
+	name="Dataframe with fullscreen button and label and search"
 	args={{
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],
@@ -223,7 +257,51 @@
 			[800, 100, 400],
 			[200, 800, 700]
 		],
-		show_fullscreen_button: true
+		show_fullscreen_button: true,
+		show_label: true,
+		show_copy_button: true,
+		show_search: "search",
+		label: "Test scores"
+	}}
+/>
+
+<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]);
 	}}
 />
 
@@ -232,7 +310,7 @@
 	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,15 +322,213 @@
 		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);
 
 		await userEvent.click(fullscreen_button);
 	}}
 />
+
+<Story
+	name="Dataframe with row numbers"
+	args={{
+		values: [
+			[95, 92, 88],
+			[89, 90, 85],
+			[92, 88, 91],
+			[87, 85, 89],
+			[91, 93, 90]
+		],
+		headers: ["Model A", "Model B", "Model C"],
+		label: "Model Performance",
+		col_count: [3, "dynamic"],
+		row_count: [5, "dynamic"],
+		show_row_numbers: true,
+		editable: false
+	}}
+/>
+
+<Story
+	name="Dataframe with truncated text"
+	args={{
+		values: [
+			[
+				"This is a very long text that should be truncated",
+				"Short text",
+				"Another very long text that needs truncation"
+			],
+			[
+				"Short",
+				"This text is also quite long and should be truncated as well",
+				"Medium length text here"
+			],
+			[
+				"Medium text",
+				"Brief",
+				"This is the longest text in the entire table and it should definitely be truncated"
+			]
+		],
+		headers: ["Column A", "Column B", "Column C"],
+		label: "Truncated Text Example",
+		max_chars: 20,
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"]
+	}}
+/>
+
+<Story
+	name="Dataframe with multiline headers"
+	args={{
+		values: [
+			[95, 92, 88],
+			[89, 90, 85],
+			[92, 88, 91]
+		],
+		headers: [
+			"Dataset A\nAccuracy",
+			"Dataset B\nPrecision",
+			"Dataset C\nRecall"
+		],
+		label: "Model Metrics",
+		col_count: [3, "dynamic"],
+		row_count: [3, "dynamic"],
+		editable: false
+	}}
+/>
+
+<Story
+	name="Dataframe with row and column selection"
+	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 user = userEvent.setup();
+
+		const grid = canvas.getByRole("grid");
+		await user.click(grid);
+
+		const cells = canvas.getAllByRole("cell");
+		await user.click(cells[5]); // Click cell with value 6
+
+		const row_button = await canvas.findByRole("button", {
+			name: "Select row"
+		});
+		await user.click(row_button);
+
+		await user.click(cells[6]);
+
+		const col_button = await canvas.findByRole("button", {
+			name: "Select column"
+		});
+		await user.click(col_button);
+
+		await user.keyboard("{Delete}");
+	}}
+/>
+
+<Story
+	name="Dataframe with lots of values"
+	args={{
+		values: [
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+		],
+		col_count: [10, "dynamic"],
+		row_count: [10, "dynamic"],
+		max_height: 700
+	}}
+/>
+
+<Story
+	name="Dataframe with search and filter"
+	args={{
+		values: [
+			["Cat", 5, "Pet"],
+			["Horse", 3, "Farm"],
+			["Snake", 1, "Pet"],
+			["Cow", 4, "Farm"],
+			["Dog", 6, "Pet"]
+		],
+		headers: ["Animal", "Count", "Type"],
+		col_count: [3, "dynamic"],
+		row_count: [5, "dynamic"],
+		show_search: "filter",
+		editable: false
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		const search_input = canvas.getByPlaceholderText("Search...");
+		await user.type(search_input, "Pet");
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		const filter_button = canvas.getByLabelText(
+			"Apply filter and update dataframe values"
+		);
+		await user.click(filter_button);
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+	}}
+/>
+
+<Story
+	name="Dataframe with frozen columns"
+	args={{
+		values: [
+			["ID", "Name", "Age", "City", "Country", "Score"],
+			["1", "John", "25", "New York", "USA", "95"],
+			["2", "Emma", "30", "London", "UK", "88"],
+			["3", "Luis", "28", "Madrid", "Spain", "92"],
+			["4", "Anna", "35", "Paris", "France", "90"],
+			["5", "Chen", "27", "Beijing", "China", "94"]
+		],
+		headers: ["ID", "Name", "Age", "City", "Country", "Score"],
+		label: "User Data",
+		col_count: [6, "dynamic"],
+		row_count: [6, "dynamic"],
+		pinned_columns: 2,
+		show_row_numbers: true,
+		editable: false
+	}}
+/>

package/Index.svelte

@@ -49,10 +49,24 @@
 	export let loading_status: LoadingStatus;
 	export let interactive: boolean;
 	export let show_fullscreen_button = false;
+	export let max_chars: number | undefined = undefined;
 	export let show_copy_button = false;
+	export let show_row_numbers = false;
+	export let show_search: "none" | "search" | "filter" = "none";
+
+	let search_query: string | null = null;
+	$: filtered_cell_values = search_query
+		? value.data?.filter((row) =>
+				row.some(
+					(cell) =>
+						search_query &&
+						String(cell).toLowerCase().includes(search_query.toLowerCase())
+				)
+			)
+		: null;
+	export let pinned_columns = 0;
 
 	$: _headers = [...(value.headers || headers)];
-	$: cell_values = value.data ? [...value.data] : [];
 	$: display_value = value?.metadata?.display_value
 		? [...value?.metadata?.display_value]
 		: null;
@@ -70,7 +84,7 @@
 	container={false}
 	{scale}
 	{min_width}
-	allow_overflow={false}
+	overflow_behavior="visible"
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -84,7 +98,7 @@
 		{show_label}
 		{row_count}
 		{col_count}
-		values={cell_values}
+		values={filtered_cell_values || value.data}
 		{display_value}
 		{styling}
 		headers={_headers}
@@ -94,6 +108,7 @@
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:search={(e) => (search_query = e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
@@ -106,6 +121,10 @@
 		stream_handler={(...args) => gradio.client.stream(...args)}
 		bind:value_is_output
 		{show_fullscreen_button}
+		{max_chars}
 		{show_copy_button}
+		{show_row_numbers}
+		{show_search}
+		{pinned_columns}
 	/>
 </Block>

package/dist/Index.svelte

@@ -34,11 +34,20 @@ export let max_height = void 0;
 export let loading_status;
 export let interactive;
 export let show_fullscreen_button = false;
+export let max_chars = void 0;
 export let show_copy_button = false;
+export let show_row_numbers = false;
+export let show_search = "none";
+let search_query = null;
 $:
-  _headers = [...value.headers || headers];
+  filtered_cell_values = search_query ? value.data?.filter(
+    (row) => row.some(
+      (cell) => search_query && String(cell).toLowerCase().includes(search_query.toLowerCase())
+    )
+  ) : null;
+export let pinned_columns = 0;
 $:
-  cell_values = value.data ? [...value.data] : [];
+  _headers = [...value.headers || headers];
 $:
   display_value = value?.metadata?.display_value ? [...value?.metadata?.display_value] : null;
 $:
@@ -53,7 +62,7 @@ $:
 	container={false}
 	{scale}
 	{min_width}
-	allow_overflow={false}
+	overflow_behavior="visible"
 >
 	<StatusTracker
 		autoscroll={gradio.autoscroll}
@@ -67,7 +76,7 @@ $:
 		{show_label}
 		{row_count}
 		{col_count}
-		values={cell_values}
+		values={filtered_cell_values || value.data}
 		{display_value}
 		{styling}
 		headers={_headers}
@@ -77,6 +86,7 @@ $:
 		}}
 		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
+		on:search={(e) => (search_query = e.detail)}
 		{wrap}
 		{datatype}
 		{latex_delimiters}
@@ -89,6 +99,10 @@ $:
 		stream_handler={(...args) => gradio.client.stream(...args)}
 		bind:value_is_output
 		{show_fullscreen_button}
+		{max_chars}
 		{show_copy_button}
+		{show_row_numbers}
+		{show_search}
+		{pinned_columns}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -38,7 +38,11 @@ declare const __propDef: {
         loading_status: LoadingStatus;
         interactive: boolean;
         show_fullscreen_button?: boolean | undefined;
+        max_chars?: number | undefined;
         show_copy_button?: boolean | undefined;
+        show_row_numbers?: boolean | undefined;
+        show_search?: ("none" | "search" | "filter") | undefined;
+        pinned_columns?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -136,7 +140,19 @@ export default class Index extends SvelteComponent<IndexProps, IndexEvents, Inde
     get show_fullscreen_button(): boolean | undefined;
     /**accessor*/
     set show_fullscreen_button(_: boolean | undefined);
+    get max_chars(): number | undefined;
+    /**accessor*/
+    set max_chars(_: number | undefined);
     get show_copy_button(): boolean | undefined;
     /**accessor*/
     set show_copy_button(_: boolean | undefined);
+    get show_row_numbers(): boolean | undefined;
+    /**accessor*/
+    set show_row_numbers(_: boolean | undefined);
+    get show_search(): "filter" | "none" | "search" | undefined;
+    /**accessor*/
+    set show_search(_: "filter" | "none" | "search" | undefined);
+    get pinned_columns(): number | undefined;
+    /**accessor*/
+    set pinned_columns(_: number | undefined);
 }

package/dist/shared/EditableCell.svelte

@@ -11,10 +11,20 @@ export let clear_on_focus = false;
 export let line_breaks = true;
 export let editable = true;
 export let root;
+export let max_chars = null;
 const dispatch = createEventDispatcher();
+let is_expanded = false;
 export let el;
 $:
   _value = value;
+function truncate_text(text, max_length = null) {
+  const str = String(text);
+  if (!max_length || str.length <= max_length)
+    return str;
+  return str.slice(0, max_length) + "...";
+}
+$:
+  display_text = is_expanded ? value : truncate_text(display_value || value, max_chars);
 function use_focus(node) {
   if (clear_on_focus) {
     _value = "";
@@ -32,11 +42,20 @@ function handle_blur({
 }
 function handle_keydown(event) {
   if (event.key === "Enter") {
-    value = _value;
-    dispatch("blur");
+    if (edit) {
+      value = _value;
+      dispatch("blur");
+    } else if (!header) {
+      is_expanded = !is_expanded;
+    }
   }
   dispatch("keydown", event);
 }
+function handle_click() {
+  if (!edit && !header) {
+    is_expanded = !is_expanded;
+  }
+}
 </script>
 
 {#if edit}
@@ -56,27 +75,31 @@ function handle_keydown(event) {
 {/if}
 
 <span
-	on:dblclick
-	tabindex="-1"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	tabindex="0"
 	role="button"
 	class:edit
+	class:expanded={is_expanded}
+	class:multiline={header}
 	on:focus|preventDefault
 	style={styling}
 	class="table-cell-text"
+	data-editable={editable}
 	placeholder=" "
 >
 	{#if datatype === "html"}
-		{@html value}
+		{@html display_text}
 	{:else if datatype === "markdown"}
 		<MarkdownCode
-			message={value.toLocaleString()}
+			message={display_text.toLocaleString()}
 			{latex_delimiters}
 			{line_breaks}
 			chatbot={false}
 			{root}
 		/>
 	{:else}
-		{editable ? value : display_value || value}
+		{editable ? display_text : display_value || display_text}
 	{/if}
 </span>
 
@@ -97,18 +120,37 @@ function handle_keydown(event) {
 
 	span {
 		flex: 1 1 0%;
+		position: relative;
+		display: inline-block;
 		outline: none;
 		padding: var(--size-2);
+		padding-right: 0;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
 		user-select: text;
 		cursor: text;
+		width: 100%;
+		height: 100%;
+	}
+
+	span.expanded {
+		height: auto;
+		min-height: 100%;
+		white-space: pre-wrap;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.multiline {
+		white-space: pre-line;
 	}
 
 	.header {
 		transform: translateX(0);
 		font-weight: var(--weight-bold);
+		white-space: normal;
+		word-break: break-word;
 	}
 
 	.edit {

package/dist/shared/EditableCell.svelte.d.ts

@@ -16,13 +16,13 @@ declare const __propDef: {
         line_breaks?: boolean | undefined;
         editable?: boolean | undefined;
         root: string;
+        max_chars?: (number | null) | undefined;
         el: HTMLInputElement | null;
     };
     events: {
         mousedown: MouseEvent;
         mouseup: MouseEvent;
         click: MouseEvent;
-        dblclick: MouseEvent;
         focus: FocusEvent;
         blur: CustomEvent<any>;
         keydown: CustomEvent<any>;