@gradio/dataframe 0.18.8 → 0.19.0

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { FilterDatatype } from "./context/dataframe_context";
 declare const __propDef: {
     props: {
-        on_filter?: ((datatype: FilterDatatype, selected_filter: string, value: string) => void) | undefined;
+        on_filter?: (datatype: FilterDatatype, selected_filter: string, value: string) => void;
     };
     events: {
         click: MouseEvent;
@@ -10,6 +10,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FilterMenuProps = typeof __propDef.props;
 export type FilterMenuEvents = typeof __propDef.events;

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

@@ -1,13 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        index?: (number | null) | undefined;
-        is_header?: boolean | undefined;
+        index?: number | null;
+        is_header?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RowNumberProps = typeof __propDef.props;
 export type RowNumberEvents = typeof __propDef.events;

package/dist/shared/Table.svelte

@@ -21,14 +21,14 @@ import {
   get_current_indices,
   handle_click_outside as handle_click_outside_util,
   calculate_selection_positions
-} from "./selection_utils";
+} from "./utils/selection_utils";
 import {
   copy_table_data,
   get_max,
   handle_file_upload
 } from "./utils/table_utils";
 import { make_headers, process_data } from "./utils/data_processing";
-import { cast_value_to_type } from "./utils";
+import { cast_value_to_type } from "./utils/utils";
 import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 import {
   create_drag_handlers
@@ -78,24 +78,15 @@ const df_ctx = create_dataframe_context({
   static_columns
 });
 const { state: df_state, actions: df_actions } = df_ctx;
-$:
-  selected_cells = $df_state.ui_state.selected_cells;
-$:
-  selected = $df_state.ui_state.selected;
-$:
-  editing = $df_state.ui_state.editing;
-$:
-  header_edit = $df_state.ui_state.header_edit;
-$:
-  selected_header = $df_state.ui_state.selected_header;
-$:
-  active_cell_menu = $df_state.ui_state.active_cell_menu;
-$:
-  active_header_menu = $df_state.ui_state.active_header_menu;
-$:
-  copy_flash = $df_state.ui_state.copy_flash;
-$:
-  actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
+$: selected_cells = $df_state.ui_state.selected_cells;
+$: selected = $df_state.ui_state.selected;
+$: editing = $df_state.ui_state.editing;
+$: header_edit = $df_state.ui_state.header_edit;
+$: selected_header = $df_state.ui_state.selected_header;
+$: active_cell_menu = $df_state.ui_state.active_cell_menu;
+$: active_header_menu = $df_state.ui_state.active_header_menu;
+$: copy_flash = $df_state.ui_state.copy_flash;
+$: actual_pinned_columns = pinned_columns && data?.[0]?.length ? Math.min(pinned_columns, data[0].length) : 0;
 onMount(() => {
   df_ctx.parent_element = parent;
   df_ctx.get_data_at = get_data_at;
@@ -169,82 +160,80 @@ function make_id() {
 }
 export let display_value = null;
 export let styling = null;
-$:
-  if (!dequal(values, old_val)) {
-    if (parent) {
-      const is_reset2 = values.length === 0 || values.length === 1 && values[0].length === 0;
-      const is_different_structure2 = old_val !== void 0 && (values.length !== old_val.length || values[0] && old_val[0] && values[0].length !== old_val[0].length);
-      if (is_reset2 || is_different_structure2) {
-        for (let i = 0; i < 50; i++) {
-          parent.style.removeProperty(`--cell-width-${i}`);
-        }
-        last_width_data_length = 0;
-        last_width_column_count = 0;
-        width_calculated = false;
+$: if (!dequal(values, old_val)) {
+  if (parent) {
+    const is_reset2 = values.length === 0 || values.length === 1 && values[0].length === 0;
+    const is_different_structure2 = old_val !== void 0 && (values.length !== old_val.length || values[0] && old_val[0] && values[0].length !== old_val[0].length);
+    if (is_reset2 || is_different_structure2) {
+      for (let i = 0; i < 50; i++) {
+        parent.style.removeProperty(`--cell-width-${i}`);
       }
-    }
-    const is_reset = values.length === 0 || values.length === 1 && values[0].length === 0;
-    const is_different_structure = old_val !== void 0 && (values.length !== old_val.length || values[0] && old_val[0] && values[0].length !== old_val[0].length);
-    data = process_data(
-      values,
-      els,
-      data_binding,
-      make_id,
-      display_value
-    );
-    old_val = JSON.parse(JSON.stringify(values));
-    if (is_reset || is_different_structure) {
-      df_actions.reset_sort_state();
-    } else if ($df_state.sort_state.sort_columns.length > 0) {
-      sort_data(data, display_value, styling);
-    } else {
-      df_actions.handle_sort(-1, "asc");
-      df_actions.reset_sort_state();
-    }
-    if ($df_state.filter_state.filter_columns.length > 0) {
-      filter_data(data, display_value, styling);
-    } else {
-      df_actions.reset_filter_state();
-    }
-    if ($df_state.current_search_query) {
-      df_actions.handle_search(null);
-    }
-    if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+      last_width_data_length = 0;
+      last_width_column_count = 0;
       width_calculated = false;
     }
   }
-$:
-  if ($df_state.current_search_query !== void 0) {
-    const cell_map = /* @__PURE__ */ new Map();
-    filtered_to_original_map = [];
-    data.forEach((row, row_idx) => {
-      if (row.some(
-        (cell) => String(cell?.value).toLowerCase().includes($df_state.current_search_query?.toLowerCase() || "")
-      )) {
-        filtered_to_original_map.push(row_idx);
-      }
-      row.forEach((cell, col_idx) => {
-        cell_map.set(cell.id, {
-          value: cell.value,
-          display_value: cell.display_value !== void 0 ? cell.display_value : String(cell.value),
-          styling: styling?.[row_idx]?.[col_idx] || ""
-        });
-      });
-    });
-    const filtered = df_actions.filter_data(data);
-    search_results = filtered.map(
-      (row) => row.map((cell) => {
-        const original = cell_map.get(cell.id);
-        return {
-          ...cell,
-          display_value: original?.display_value !== void 0 ? original.display_value : String(cell.value),
-          styling: original?.styling || ""
-        };
-      })
-    );
+  const is_reset = values.length === 0 || values.length === 1 && values[0].length === 0;
+  const is_different_structure = old_val !== void 0 && (values.length !== old_val.length || values[0] && old_val[0] && values[0].length !== old_val[0].length);
+  data = process_data(
+    values,
+    els,
+    data_binding,
+    make_id,
+    display_value
+  );
+  old_val = JSON.parse(JSON.stringify(values));
+  if (is_reset || is_different_structure) {
+    df_actions.reset_sort_state();
+  } else if ($df_state.sort_state.sort_columns.length > 0) {
+    sort_data(data, display_value, styling);
   } else {
-    filtered_to_original_map = [];
+    df_actions.handle_sort(-1, "asc");
+    df_actions.reset_sort_state();
   }
+  if ($df_state.filter_state.filter_columns.length > 0) {
+    filter_data(data, display_value, styling);
+  } else {
+    df_actions.reset_filter_state();
+  }
+  if ($df_state.current_search_query) {
+    df_actions.handle_search(null);
+  }
+  if (parent && cells.length > 0 && (is_reset || is_different_structure)) {
+    width_calculated = false;
+  }
+}
+$: if ($df_state.current_search_query !== void 0) {
+  const cell_map = /* @__PURE__ */ new Map();
+  filtered_to_original_map = [];
+  data.forEach((row, row_idx) => {
+    if (row.some(
+      (cell) => String(cell?.value).toLowerCase().includes($df_state.current_search_query?.toLowerCase() || "")
+    )) {
+      filtered_to_original_map.push(row_idx);
+    }
+    row.forEach((cell, col_idx) => {
+      cell_map.set(cell.id, {
+        value: cell.value,
+        display_value: cell.display_value !== void 0 ? cell.display_value : String(cell.value),
+        styling: styling?.[row_idx]?.[col_idx] || ""
+      });
+    });
+  });
+  const filtered = df_actions.filter_data(data);
+  search_results = filtered.map(
+    (row) => row.map((cell) => {
+      const original = cell_map.get(cell.id);
+      return {
+        ...cell,
+        display_value: original?.display_value !== void 0 ? original.display_value : String(cell.value),
+        styling: original?.styling || ""
+      };
+    })
+  );
+} else {
+  filtered_to_original_map = [];
+}
 let previous_headers = _headers.map((h) => h.value);
 let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
 $: {
@@ -295,8 +284,7 @@ function clear_filter() {
   filter_data(data, display_value, styling);
 }
 async function edit_header(i, _select = false) {
-  if (!editable || header_edit === i || col_count[1] !== "dynamic")
-    return;
+  if (!editable || header_edit === i || col_count[1] !== "dynamic") return;
   df_actions.set_header_edit(i);
 }
 function handle_header_click(event, col) {
@@ -305,22 +293,19 @@ function handle_header_click(event, col) {
   }
   event.preventDefault();
   event.stopPropagation();
-  if (!editable)
-    return;
+  if (!editable) return;
   df_actions.set_editing(false);
   df_actions.handle_header_click(col, editable);
   parent.focus();
 }
 function end_header_edit(event) {
-  if (!editable)
-    return;
+  if (!editable) return;
   df_actions.end_header_edit(event.detail.key);
   parent.focus();
 }
 async function add_row(index) {
   parent.focus();
-  if (row_count[1] !== "dynamic")
-    return;
+  if (row_count[1] !== "dynamic") return;
   const new_row = Array(data[0]?.length || headers.length).fill(0).map((_, i) => {
     const _id = make_id();
     els[_id] = { cell: null, input: null };
@@ -337,8 +322,7 @@ async function add_row(index) {
 }
 async function add_col(index) {
   parent.focus();
-  if (col_count[1] !== "dynamic")
-    return;
+  if (col_count[1] !== "dynamic") return;
   const result = df_actions.add_col(data, headers, make_id, index);
   result.data.forEach((row) => {
     row.forEach((cell) => {
@@ -363,20 +347,17 @@ function handle_click_outside(event) {
     selected_header = false;
   }
 }
-$:
-  max = get_max(data);
+$: max = get_max(data);
 let width_calc_timeout;
-$:
-  if (cells[0] && cells[0]?.clientWidth) {
-    clearTimeout(width_calc_timeout);
-    width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
-  }
+$: if (cells[0] && cells[0]?.clientWidth) {
+  clearTimeout(width_calc_timeout);
+  width_calc_timeout = setTimeout(() => set_cell_widths(), 100);
+}
 let width_calculated = false;
-$:
-  if (cells[0] && !width_calculated) {
-    set_cell_widths();
-    width_calculated = true;
-  }
+$: if (cells[0] && !width_calculated) {
+  set_cell_widths();
+  width_calculated = true;
+}
 let cells = [];
 let parent;
 let table;
@@ -390,11 +371,13 @@ function set_cell_widths() {
   if (last_width_data_length === data.length && last_width_column_count === column_count && $df_state.sort_state.sort_columns.length > 0) {
     return;
   }
+  if (!parent) {
+    return;
+  }
   last_width_data_length = data.length;
   last_width_column_count = column_count;
   const widths = cells.map((el) => el?.clientWidth || 0);
-  if (widths.length === 0)
-    return;
+  if (widths.length === 0) return;
   if (show_row_numbers) {
     parent.style.setProperty(`--cell-width-row-number`, `${widths[0]}px`);
   }
@@ -448,8 +431,7 @@ function filter_data(_data, _display_value, _styling) {
   data = result.data;
   selected = result.selected;
 }
-$:
-  selected_index = !!selected && selected[0];
+$: selected_index = !!selected && selected[0];
 let is_visible = false;
 const set_copy_flash = (value) => {
   df_actions.set_copy_flash(value);
@@ -488,10 +470,8 @@ afterUpdate(() => {
   value_is_output = false;
 });
 function delete_col_at(index) {
-  if (col_count[1] !== "dynamic")
-    return;
-  if (data[0].length <= 1)
-    return;
+  if (col_count[1] !== "dynamic") return;
+  if (data[0].length <= 1) return;
   const result = df_actions.delete_col_at(data, headers, index);
   data = result.data;
   headers = result.headers;
@@ -508,27 +488,24 @@ function delete_row_at(index) {
   df_actions.set_active_header_menu(null);
 }
 let selected_cell_coords;
-$:
-  if (selected !== false)
-    selected_cell_coords = selected;
-$:
-  if (selected !== false) {
-    const positions = calculate_selection_positions(
-      selected,
-      data,
-      els,
-      parent,
-      table
-    );
-    document.documentElement.style.setProperty(
-      "--selected-col-pos",
-      positions.col_pos
-    );
-    document.documentElement.style.setProperty(
-      "--selected-row-pos",
-      positions.row_pos || "0px"
-    );
-  }
+$: if (selected !== false) selected_cell_coords = selected;
+$: if (selected !== false) {
+  const positions = calculate_selection_positions(
+    selected,
+    data,
+    els,
+    parent,
+    table
+  );
+  document.documentElement.style.setProperty(
+    "--selected-col-pos",
+    positions.col_pos
+  );
+  document.documentElement.style.setProperty(
+    "--selected-row-pos",
+    positions.row_pos || "0px"
+  );
+}
 function commit_filter() {
   if ($df_state.current_search_query && show_search === "filter") {
     const filtered_data = [];
@@ -620,18 +597,13 @@ function init_drag_handlers() {
     parent
   );
 }
-$:
-  if (parent)
-    init_drag_handlers();
-$:
-  handle_mouse_down = drag_handlers?.handle_mouse_down || (() => {
-  });
-$:
-  handle_mouse_move = drag_handlers?.handle_mouse_move || (() => {
-  });
-$:
-  handle_mouse_up = drag_handlers?.handle_mouse_up || (() => {
-  });
+$: if (parent) init_drag_handlers();
+$: handle_mouse_down = drag_handlers?.handle_mouse_down || (() => {
+});
+$: handle_mouse_move = drag_handlers?.handle_mouse_move || (() => {
+});
+$: handle_mouse_up = drag_handlers?.handle_mouse_up || (() => {
+});
 function get_cell_display_value(row, col) {
   const is_search_active = $df_state.current_search_query !== void 0;
   if (is_search_active && search_results?.[row]?.[col]) {
@@ -672,7 +644,6 @@ function get_cell_display_value(row, col) {
 		class="table-wrap"
 		class:dragging={is_dragging}
 		class:no-wrap={!wrap}
-		style="height:{table_height}px;"
 		class:menu-open={active_cell_menu || active_header_menu}
 		on:keydown={(e) => handle_keydown(e, df_ctx)}
 		on:mousemove={handle_mouse_move}
@@ -786,11 +757,9 @@ function get_cell_display_value(row, col) {
 						active_header_menu !== null}
 					bind:viewport
 					bind:show_scroll_button
+					{label}
 					on:scroll_top={(_) => {}}
 				>
-					{#if label && label.length !== 0}
-						<caption class="sr-only">{label}</caption>
-					{/if}
 					<tr slot="thead">
 						{#if show_row_numbers}
 							<RowNumber is_header={true} />
@@ -1049,6 +1018,7 @@ function get_cell_display_value(row, col) {
 	.header-row .label {
 		flex: 1 1 auto;
 		margin-right: auto;
+		font-family: var(--font-sans);
 	}
 
 	.header-row .label p {

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

@@ -2,14 +2,14 @@ import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import { type Client } from "@gradio/client";
-import type { Headers, DataframeValue, Datatype } from "./utils";
+import type { Headers, DataframeValue, Datatype } from "./utils/utils";
 declare const __propDef: {
     props: {
         datatype: Datatype | Datatype[];
-        label?: (string | null) | undefined;
-        show_label?: boolean | undefined;
-        headers?: Headers | undefined;
-        values?: (string | number)[][] | undefined;
+        label?: string | null;
+        show_label?: boolean;
+        headers?: Headers;
+        values?: (string | number)[][];
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
         latex_delimiters: {
@@ -17,28 +17,28 @@ declare const __propDef: {
             right: string;
             display: boolean;
         }[];
-        components?: Record<string, any> | undefined;
-        editable?: boolean | undefined;
-        wrap?: boolean | undefined;
+        components?: Record<string, any>;
+        editable?: boolean;
+        wrap?: boolean;
         root: string;
         i18n: I18nFormatter;
-        max_height?: number | undefined;
-        line_breaks?: boolean | undefined;
-        column_widths?: string[] | undefined;
-        show_row_numbers?: boolean | undefined;
+        max_height?: number;
+        line_breaks?: boolean;
+        column_widths?: string[];
+        show_row_numbers?: boolean;
         upload: Client["upload"];
         stream_handler: Client["stream"];
-        show_fullscreen_button?: boolean | undefined;
-        show_copy_button?: boolean | undefined;
-        value_is_output?: boolean | undefined;
+        show_fullscreen_button?: boolean;
+        show_copy_button?: boolean;
+        value_is_output?: boolean;
         max_chars?: number | undefined;
-        show_search?: ("none" | "search" | "filter") | undefined;
-        pinned_columns?: number | undefined;
-        static_columns?: (string | number)[] | undefined;
-        fullscreen?: boolean | undefined;
-        display_value?: (string[][] | null) | undefined;
-        styling?: (string[][] | null) | undefined;
-        reset_sort_state?: (() => void) | undefined;
+        show_search?: "none" | "search" | "filter";
+        pinned_columns?: number;
+        static_columns?: (string | number)[];
+        fullscreen?: boolean;
+        display_value?: string[][] | null;
+        styling?: string[][] | null;
+        reset_sort_state?: () => void;
     };
     events: {
         fullscreen: CustomEvent<boolean>;
@@ -50,6 +50,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;

package/dist/shared/TableCell.svelte

@@ -1,6 +1,6 @@
 <script>import EditableCell from "./EditableCell.svelte";
 import CellMenuButton from "./CellMenuButton.svelte";
-import { is_cell_in_selection } from "./selection_utils";
+import { is_cell_in_selection } from "./utils/selection_utils";
 export let value;
 export let index;
 export let j;
@@ -42,18 +42,12 @@ function get_cell_position(col_index) {
   }).join(" + ");
   return `calc(${previous_widths})`;
 }
-$:
-  cell_classes = is_cell_selected([index, j], selected_cells || []);
-$:
-  is_in_selection = is_cell_in_selection([index, j], selected_cells);
-$:
-  has_no_top = cell_classes.includes("no-top");
-$:
-  has_no_bottom = cell_classes.includes("no-bottom");
-$:
-  has_no_left = cell_classes.includes("no-left");
-$:
-  has_no_right = cell_classes.includes("no-right");
+$: cell_classes = is_cell_selected([index, j], selected_cells || []);
+$: is_in_selection = is_cell_in_selection([index, j], selected_cells);
+$: has_no_top = cell_classes.includes("no-top");
+$: has_no_bottom = cell_classes.includes("no-bottom");
+$: has_no_left = cell_classes.includes("no-left");
+$: has_no_right = cell_classes.includes("no-right");
 </script>
 
 <td

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
-import type { Datatype } from "./utils";
+import type { Datatype } from "./utils/utils";
 declare const __propDef: {
     props: {
         value: string | number;
@@ -35,9 +35,9 @@ declare const __propDef: {
         editing: [number, number] | false;
         max_chars: number | undefined;
         editable: boolean;
-        is_static?: boolean | undefined;
+        is_static?: boolean;
         i18n: I18nFormatter;
-        components?: Record<string, any> | undefined;
+        components?: Record<string, any>;
         el: {
             cell: HTMLTableCellElement | null;
             input: HTMLTextAreaElement | null;
@@ -46,12 +46,14 @@ declare const __propDef: {
         handle_select_row: (row: number) => void;
         is_dragging: boolean;
         display_value: string | undefined;
-        wrap?: boolean | undefined;
+        wrap?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableCellProps = typeof __propDef.props;
 export type TableCellEvents = typeof __propDef.events;

package/dist/shared/TableHeader.svelte

@@ -25,16 +25,11 @@ export let i18n;
 export let el;
 export let is_static;
 export let col_count;
-$:
-  can_add_columns = col_count && col_count[1] === "dynamic";
-$:
-  sort_index = sort_columns.findIndex((item) => item.col === i);
-$:
-  filter_index = filter_columns.findIndex((item) => item.col === i);
-$:
-  sort_priority = sort_index !== -1 ? sort_index + 1 : null;
-$:
-  current_direction = sort_index !== -1 ? sort_columns[sort_index].direction : null;
+$: can_add_columns = col_count && col_count[1] === "dynamic";
+$: sort_index = sort_columns.findIndex((item) => item.col === i);
+$: filter_index = filter_columns.findIndex((item) => item.col === i);
+$: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
+$: current_direction = sort_index !== -1 ? sort_columns[sort_index].direction : null;
 function get_header_position(col_index) {
   if (col_index >= actual_pinned_columns) {
     return "auto";

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

@@ -17,13 +17,13 @@ declare const __propDef: {
         sort_columns?: {
             col: number;
             direction: SortDirection;
-        }[] | undefined;
+        }[];
         filter_columns?: {
             col: number;
             datatype: FilterDatatype;
             filter: string;
             value: string;
-        }[] | undefined;
+        }[];
         latex_delimiters: {
             left: string;
             right: string;
@@ -41,6 +41,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableHeaderProps = typeof __propDef.props;
 export type TableHeaderEvents = typeof __propDef.events;

package/dist/shared/Toolbar.svelte

@@ -24,8 +24,7 @@ function handle_search_input(e) {
 }
 function copy_feedback() {
   copied = true;
-  if (timer)
-    clearTimeout(timer);
+  if (timer) clearTimeout(timer);
   timer = setTimeout(() => {
     copied = false;
   }, 2e3);
@@ -35,8 +34,7 @@ async function handle_copy() {
   copy_feedback();
 }
 onDestroy(() => {
-  if (timer)
-    clearTimeout(timer);
+  if (timer) clearTimeout(timer);
 });
 </script>
 
@@ -91,6 +89,7 @@ onDestroy(() => {
 		align-items: center;
 		gap: var(--size-2);
 		flex: 0 0 auto;
+		font-family: var(--font-sans);
 	}
 
 	.toolbar-buttons {