@marimo-team/frontend 0.25.3-dev13 → 0.25.3-dev134

package/src/components/data-table/range-focus/use-cell-range-selection.ts

@@ -45,45 +45,71 @@ export const useCellRangeSelection = <TData>({
     },
   );
 
-  const handleCellsKeyDown = useEvent((e: React.KeyboardEvent<HTMLElement>) => {
-    switch (e.key) {
-      case "c":
-        if (Events.isMetaOrCtrl(e)) {
-          handleCopy();
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        navigate(e, "down");
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        navigate(e, "up");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        navigate(e, "left");
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        navigate(e, "right");
-        break;
-      case "Enter":
-        e.preventDefault();
-        actions.toggleCurrentRowSelection(table);
-        break;
-      case "Escape":
-        actions.clearSelection();
-        break;
-      case "a":
-        if (e.metaKey || e.ctrlKey) {
-          e.preventDefault();
-          actions.selectAllCells(table);
-        }
-        break;
-    }
+  const handleCellFocus = useEvent((cell: Cell<TData, unknown>) => {
+    actions.setFocusedCell({
+      cellId: cell.id,
+      rowId: cell.row.id,
+      columnId: cell.column.id,
+    });
   });
 
+  const handleCellsKeyDown = useEvent(
+    (e: React.KeyboardEvent<HTMLElement>, cell: Cell<TData, unknown>) => {
+      if (e.defaultPrevented || isInteractiveTarget(e)) {
+        return;
+      }
+      switch (e.key) {
+        case "c":
+          if (Events.isMetaOrCtrl(e)) {
+            handleCopy();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          navigate(e, "down");
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          navigate(e, "up");
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          navigate(e, "left");
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          navigate(e, "right");
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          updateSelection(
+            {
+              cellId: cell.id,
+              rowId: cell.row.id,
+              columnId: cell.column.id,
+            },
+            false,
+          );
+          if (table.options.enableCellSelection) {
+            cell.toggleSelected?.();
+          } else if (cell.row.getCanSelect()) {
+            cell.row.toggleSelected();
+          }
+          break;
+        case "Escape":
+          actions.clearSelection();
+          break;
+        case "a":
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            actions.selectAllCells(table);
+          }
+          break;
+      }
+    },
+  );
+
   const handleCellMouseDown = useEvent(
     (e: React.MouseEvent, cell: Cell<TData, unknown>) => {
       // Right-clicks will trigger context menu, so avoid updating selected cells
@@ -122,6 +148,7 @@ export const useCellRangeSelection = <TData>({
     handleCellMouseOver,
     handleCopy,
     handleCellsKeyDown,
+    handleCellFocus,
     updateSelection,
     clearSelection: actions.clearSelection,
   };
@@ -148,7 +175,7 @@ const CONTENT_WRAPPER_MARIMO_TAGS: ReadonlySet<string> = new Set([
  * shadow host (e.g. `<marimo-lazy>`), hiding any genuinely interactive
  * descendants rendered inside the shadow tree.
  */
-export function isInteractiveTarget(e: React.MouseEvent): boolean {
+export function isInteractiveTarget(e: React.SyntheticEvent): boolean {
   const path: readonly EventTarget[] =
     typeof e.nativeEvent?.composedPath === "function"
       ? e.nativeEvent.composedPath()

package/src/components/data-table/range-focus/use-scroll-into-view.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { atom } from "jotai";
+import { atom, useStore } from "jotai";
 import { useJotaiEffect } from "@/core/state/jotai";
 import { Logger } from "@/utils/Logger";
 import { cellSelectionStateAtom } from "./atoms";
@@ -15,14 +15,21 @@ const focusedCellAtom = atom((get) => get(cellSelectionStateAtom).focusedCell);
 export function useScrollIntoViewOnFocus(
   root: React.RefObject<HTMLElement | null>,
 ) {
+  const store = useStore();
   useJotaiEffect(focusedCellAtom, (focusedCell) => {
     if (!focusedCell?.cellId) {
       return;
     }
 
     const scroll = () => {
+      if (
+        !root.current ||
+        store.get(focusedCellAtom)?.cellId !== focusedCell.cellId
+      ) {
+        return;
+      }
       // Check if this cell contains the CellRangeSelectionIndicator with our cellId
-      const indicator = root.current?.querySelector(
+      const indicator = root.current?.querySelector<HTMLElement>(
         `[data-cell-id="${focusedCell.cellId}"]`,
       );
       if (!indicator) {
@@ -33,6 +40,18 @@ export function useScrollIntoViewOnFocus(
         return;
       }
 
+      const focusRoot = root.current.getRootNode();
+      const activeElement =
+        focusRoot instanceof ShadowRoot || focusRoot instanceof Document
+          ? focusRoot.activeElement
+          : null;
+      if (
+        root.current.contains(activeElement) &&
+        activeElement?.matches("td[data-cell-id]")
+      ) {
+        indicator.focus({ preventScroll: true });
+      }
+
       indicator.scrollIntoView({
         behavior: "smooth",
         block: "nearest",

package/src/components/data-table/renderers.tsx

@@ -124,6 +124,7 @@ export const DataTableBody = <TData,>({
     handleCellMouseUp,
     handleCellMouseOver,
     handleCellsKeyDown,
+    handleCellFocus,
     handleCopy: handleCopyAllCells,
   } = useCellRangeSelection({ table });
 
@@ -147,10 +148,16 @@ export const DataTableBody = <TData,>({
       return (
         <TableCell
           tabIndex={0}
+          role={table.options.enableCellSelection ? "gridcell" : undefined}
+          aria-selected={
+            table.options.enableCellSelection
+              ? cell.getIsSelected?.()
+              : undefined
+          }
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring border-r border-r-border/75",
             !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
@@ -169,7 +176,13 @@ export const DataTableBody = <TData,>({
             hoverTooltip.handleCellMouseOver(e, cell);
           }}
           onMouseLeave={hoverTooltip.handleCellMouseLeave}
-          onFocus={(e) => hoverTooltip.handleCellFocus(e, cell)}
+          onFocus={(e) => {
+            if (e.target === e.currentTarget) {
+              handleCellFocus(cell);
+            }
+            hoverTooltip.handleCellFocus(e, cell);
+          }}
+          onKeyDown={(e) => handleCellsKeyDown(e, cell)}
           onBlur={hoverTooltip.handleCellBlur}
           onContextMenu={() => handleContextMenu(cell)}
         >
@@ -264,11 +277,7 @@ export const DataTableBody = <TData,>({
     return rows.map((row) => renderRow(row));
   };
 
-  const tableBody = (
-    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
-      {renderRows()}
-    </TableBody>
-  );
+  const tableBody = <TableBody ref={tableRef}>{renderRows()}</TableBody>;
 
   return (
     <>

package/src/components/data-table/row-viewer-panel/__tests__/row-viewer.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -17,6 +17,29 @@ const renderWithProviders = (component: React.ReactNode) => {
 };
 
 describe("RowExpandedPanel", () => {
+  it("preserves Space activation on navigation buttons", async () => {
+    const select = vi.fn();
+    const navigate = vi.fn();
+    renderWithProviders(
+      <RowViewerPanel
+        rowIdx={0}
+        setRowIdx={navigate}
+        totalRows={2}
+        fieldTypes={[["name", ["string", "string"]]]}
+        getRow={async () => ({ rows: [{ name: "Alice" }] })}
+        isSelectable={true}
+        isRowSelected={false}
+        handleRowSelectionChange={select}
+      />,
+    );
+    await screen.findByText("Alice");
+    const next = screen.getByRole("button", { name: "Next row" });
+    expect(fireEvent.keyDown(next, { key: " " })).toBe(true);
+    expect(select).not.toHaveBeenCalled();
+    fireEvent.click(next);
+    expect(navigate).toHaveBeenCalledExactlyOnceWith(1);
+  });
+
   const mockFieldTypes: FieldTypesWithExternalType = [
     ["name", ["string", "string"]],
     ["age", ["number", "number"]],

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -34,8 +34,10 @@ import { DelayMount } from "@/components/utils/delay-mount";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
+import { Objects } from "@/utils/objects";
 import { NAMELESS_COLUMN_PREFIX, renderCellValue } from "../columns";
 import { prettifyRowCount } from "../pagination";
+import { isInteractiveTarget } from "../range-focus/use-cell-range-selection";
 import {
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
@@ -88,8 +90,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
     handleRowSelectionChange?.((prev) => {
       if (isRowSelected) {
         // Remove this row from selection
-        const { [rowIdx]: removedRow, ...rest } = prev;
-        return rest;
+        return Objects.filter(prev, (_, key) => key !== String(rowIdx));
       }
       // Add this row to selection
       return { ...prev, [rowIdx]: true };
@@ -102,8 +103,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    // Don't intercept keys when typing in an input
-    if (e.target instanceof HTMLInputElement) {
+    if (e.defaultPrevented || isInteractiveTarget(e)) {
       return;
     }
     switch (e.key) {

package/src/components/data-table/search-highlight.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ReactNode } from "react";
+
+/** Half-open `[start, end)` offsets into a string. */
+export type MatchRange = readonly [start: number, end: number];
+
+/**
+ * Build the pattern that finds `query` in a display string. Returns
+ * `undefined` for an empty query. The query is matched as a literal,
+ * case-insensitive substring, which mirrors how the backend selects rows.
+ * The `u` flag selects Unicode simple case folding, the same folding the
+ * backend regex engines use.
+ */
+export function buildHighlightPattern(query?: string): RegExp | undefined {
+  if (!query) {
+    return undefined;
+  }
+  const escaped = query.replace(/[$()*+.?[\\\]^{|}]/g, "\\$&");
+  return new RegExp(escaped, "giu");
+}
+
+/** Offsets of every match of `pattern` in `text`. */
+export function findMatchRanges(text: string, pattern?: RegExp): MatchRange[] {
+  if (!pattern) {
+    return [];
+  }
+  const ranges: MatchRange[] = [];
+  for (const match of text.matchAll(pattern)) {
+    ranges.push([match.index, match.index + match[0].length]);
+  }
+  return ranges;
+}
+
+/**
+ * Wrap the parts of `text` covered by `ranges` in `<mark>` elements.
+ * `ranges` are offsets into a larger string in which `text` starts at
+ * `offset`, so one set of ranges can be shared across adjacent segments.
+ * Returns `text` unchanged when no range overlaps it.
+ */
+export function highlightRanges(
+  text: string,
+  ranges: readonly MatchRange[],
+  offset = 0,
+): ReactNode {
+  const segments: ReactNode[] = [];
+  let cursor = 0;
+  for (const [rangeStart, rangeEnd] of ranges) {
+    const start = Math.max(rangeStart - offset, cursor);
+    const end = Math.min(rangeEnd - offset, text.length);
+    if (end <= start) {
+      continue;
+    }
+    if (start > cursor) {
+      segments.push(text.slice(cursor, start));
+    }
+    segments.push(
+      <mark key={start} className="bg-search-highlight text-inherit">
+        {text.slice(start, end)}
+      </mark>,
+    );
+    cursor = end;
+  }
+  if (segments.length === 0) {
+    return text;
+  }
+  if (cursor < text.length) {
+    segments.push(text.slice(cursor));
+  }
+  return segments;
+}
+
+/**
+ * Wrap every match of `pattern` in `text` in a `<mark>` element. Returns
+ * `text` unchanged when `pattern` is absent or does not match.
+ */
+export function highlightMatches(text: string, pattern?: RegExp): ReactNode {
+  return highlightRanges(text, findMatchRanges(text, pattern));
+}

package/src/components/data-table/types.ts

@@ -6,6 +6,7 @@ import type { DataType } from "@/core/kernel/messages";
 declare module "@tanstack/react-table" {
   interface TableMeta<TData extends RowData> {
     rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+    highlightPattern?: RegExp; // built from the committed search query that produced the current rows
   }
 }
 

package/src/components/data-table/url-detector.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { marked } from "marked";
-import { useState } from "react";
+import { Fragment, type ReactNode, useState } from "react";
 import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
 import {
   Popover,
@@ -10,13 +10,20 @@ import {
 } from "@/components/ui/popover";
 import { Events } from "@/utils/events";
 import type { ContentPart } from "@/utils/url-parser";
+import { findMatchRanges, highlightRanges } from "./search-highlight";
 
-const ImageWithFallback = ({ url }: { url: string }) => {
+const ImageWithFallback = ({
+  url,
+  fallbackLabel,
+}: {
+  url: string;
+  fallbackLabel?: ReactNode;
+}) => {
   const [error, setError] = useState(false);
   const [open, setOpen] = useState(false);
 
   if (error) {
-    return <URLAnchor url={url} />;
+    return <URLAnchor url={url}>{fallbackLabel}</URLAnchor>;
   }
 
   return (
@@ -93,21 +100,54 @@ export const MarkdownUrlDetector = ({
   return <UrlDetector parts={parts} />;
 };
 
-export const UrlDetector = ({ parts }: { parts: ContentPart[] }) => {
+export const UrlDetector = ({
+  parts,
+  highlightPattern,
+}: {
+  parts: ContentPart[];
+  highlightPattern?: RegExp;
+}) => {
+  // Match against the whole string so a query that spans a text part and
+  // a link is still marked. Each part then takes its slice of the ranges.
+  const ranges = highlightPattern
+    ? findMatchRanges(parts.map(partText).join(""), highlightPattern)
+    : [];
+
+  let offset = 0;
   const markup = parts.map((part, idx) => {
+    const text = partText(part);
+    const label = highlightRanges(text, ranges, offset);
+    offset += text.length;
+
     if (part.type === "url") {
-      return <URLAnchor key={idx} url={part.url} />;
+      return (
+        <URLAnchor key={idx} url={part.url}>
+          {label}
+        </URLAnchor>
+      );
     }
     if (part.type === "image") {
-      return <ImageWithFallback key={idx} url={part.url} />;
+      return (
+        <ImageWithFallback key={idx} url={part.url} fallbackLabel={label} />
+      );
     }
-    return part.value;
+    return <Fragment key={idx}>{label}</Fragment>;
   });
 
   return markup;
 };
 
-const URLAnchor = ({ url }: { url: string }) => {
+function partText(part: ContentPart): string {
+  return part.type === "text" ? part.value : part.url;
+}
+
+const URLAnchor = ({
+  url,
+  children,
+}: {
+  url: string;
+  children?: ReactNode;
+}) => {
   return (
     <a
       href={url}
@@ -116,7 +156,7 @@ const URLAnchor = ({ url }: { url: string }) => {
       onClick={Events.stopPropagation()}
       className="text-link hover:underline"
     >
-      {url}
+      {children ?? url}
     </a>
   );
 };

package/src/components/datasources/__tests__/column-actions.test.tsx

@@ -0,0 +1,97 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { Command, CommandList } from "@/components/ui/command";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { DataTable } from "@/core/kernel/messages";
+import { requestClientAtom } from "@/core/network/requests";
+import { copyToClipboard } from "@/utils/copy";
+import { TableList } from "../datasources";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+beforeAll(() => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+});
+
+const table: DataTable = {
+  name: "users",
+  columns: [
+    {
+      name: "email",
+      type: "string",
+      external_type: "VARCHAR",
+      sample_values: [],
+    },
+    {
+      name: "name",
+      type: "string",
+      external_type: "VARCHAR",
+      sample_values: [],
+    },
+  ],
+  source: "memory",
+  source_type: "local",
+  type: "table",
+  engine: null,
+  indexes: null,
+  num_columns: 2,
+  num_rows: null,
+  variable_name: null,
+  primary_keys: null,
+};
+
+describe("Column actions", () => {
+  it("copies each column through one named button without expanding its preview", async () => {
+    const store = createStore();
+    const client = MockRequestClient.create();
+    store.set(requestClientAtom, client);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <Command>
+            <CommandList>
+              <TableList tables={[table]} />
+            </CommandList>
+          </Command>
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    fireEvent.click(await screen.findByText("users"));
+
+    for (const column of table.columns) {
+      const copyButton = await screen.findByRole("button", {
+        name: `Copy column name ${column.name}`,
+      });
+      const row = screen.getByRole("option", {
+        name: `${column.name} ${column.external_type}`,
+      });
+      expect(within(row).getAllByRole("button")).toEqual([copyButton]);
+      expect(copyButton.querySelector("button")).toBeNull();
+
+      fireEvent.focus(copyButton);
+      expect(
+        await screen.findByRole("tooltip", { name: "Copy column name" }),
+      ).toBeInTheDocument();
+
+      fireEvent.click(copyButton);
+      await waitFor(() => {
+        expect(copyToClipboard).toHaveBeenLastCalledWith(column.name);
+      });
+      expect(client.previewDatasetColumn).not.toHaveBeenCalled();
+    }
+    expect(copyToClipboard).toHaveBeenCalledTimes(2);
+  });
+});

package/src/components/datasources/__tests__/column-preview.test.tsx

@@ -1,16 +1,24 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
-import { Provider } from "jotai";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
 import type React from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import type { SQLTableContext } from "@/core/datasets/data-source-connections";
 import type { DataTable, DataTableColumn } from "@/core/kernel/messages";
 import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
 import { DatasetColumnPreview } from "../column-preview";
 
+const { createNewCell } = vi.hoisted(() => ({ createNewCell: vi.fn() }));
+
+vi.mock("@/core/cells/cells", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/cells/cells")>()),
+  useCellActions: () => ({ createNewCell }),
+}));
+
 const wrapper = ({ children }: { children: React.ReactNode }) => (
   <Provider store={store}>{children}</Provider>
 );
@@ -95,3 +103,56 @@ describe("DatasetColumnPreview fullyQualifiedTableName", () => {
     );
   });
 });
+
+describe("DatasetColumnPreview chart actions", () => {
+  it("identifies each column and inserts its corresponding chart", () => {
+    const store = createStore();
+    store.set(requestClientAtom, MockRequestClient.create());
+    const columns: DataTableColumn[] = [
+      {
+        name: "email",
+        type: "string",
+        external_type: "str",
+        sample_values: [],
+      },
+      { name: "age", type: "integer", external_type: "int", sample_values: [] },
+    ];
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          {columns.map((column) => (
+            <DatasetColumnPreview
+              key={column.name}
+              table={{ ...table, source_type: "local", engine: null }}
+              column={column}
+              onAddColumnChart={vi.fn()}
+              preview={{
+                table_name: table.name,
+                column_name: column.name,
+                chart_code: `chart_${column.name}`,
+                chart_spec: null,
+                error: null,
+                missing_packages: null,
+                stats: {},
+              }}
+            />
+          ))}
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    for (const column of columns) {
+      fireEvent.click(
+        screen.getByRole("button", {
+          name: `Add chart to notebook for ${column.name}`,
+        }),
+      );
+      expect(createNewCell).toHaveBeenLastCalledWith({
+        code: `chart_${column.name}`,
+        before: false,
+        cellId: "__end__",
+      });
+    }
+    expect(createNewCell).toHaveBeenCalledTimes(2);
+  });
+});