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

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

@@ -41,6 +41,7 @@ import {
   isNumericType,
 } from "./types";
 import { SentinelCell, WhitespaceMarkers } from "./sentinel-cell";
+import { highlightMatches } from "./search-highlight";
 import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
@@ -135,6 +136,7 @@ export function generateColumns<T>({
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
+  const wrappedColumnsSet = new Set(wrappedColumns);
 
   const typesByColumn = Maps.keyBy(fieldTypes, (entry) => entry[0]);
 
@@ -277,7 +279,7 @@ export function generateColumns<T>({
       );
     },
 
-    cell: ({ column, renderValue, getValue, cell }) => {
+    cell: ({ column, renderValue, getValue, cell, table }) => {
       function selectCell() {
         if (selection !== "single-cell" && selection !== "multi-cell") {
           return;
@@ -287,7 +289,7 @@ export function generateColumns<T>({
       }
 
       const justify = getJustify(key);
-      const wrapped = wrappedColumns?.includes(key);
+      const wrapped = wrappedColumnsSet.has(key);
       const isCellSelected = cell?.getIsSelected?.() || false;
       const canSelectCell =
         (selection === "single-cell" || selection === "multi-cell") &&
@@ -309,6 +311,7 @@ export function generateColumns<T>({
         getValue,
         selectCell,
         cellStyles,
+        highlightPattern: table.options.meta?.highlightPattern,
       });
 
       // Row headers are bold
@@ -585,12 +588,14 @@ function renderDate({
   dtype,
   displayValue,
   locale,
+  highlightPattern,
 }: {
   value: Date;
   dataType?: DataType;
   dtype?: string;
   displayValue?: string;
   locale: string;
+  highlightPattern?: RegExp;
 }): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
@@ -599,7 +604,7 @@ function renderDate({
 
   return (
     <DatePopover date={value} type={type}>
-      {exactValue}
+      {highlightMatches(exactValue, highlightPattern)}
     </DatePopover>
   );
 }
@@ -610,12 +615,14 @@ export function renderCellValue<TData, TValue>({
   getValue,
   selectCell,
   cellStyles,
+  highlightPattern,
 }: {
   column: Column<TData, TValue>;
   renderValue: () => TValue | null;
   getValue: () => TValue;
   selectCell?: () => void;
   cellStyles?: string;
+  highlightPattern?: RegExp;
 }) {
   const value = getValue();
   const format = column.getColumnFormatting?.();
@@ -625,6 +632,28 @@ export function renderCellValue<TData, TValue>({
 
   const isWrapped = column.getColumnWrapping?.() === "wrap";
 
+  const textCell = (text: string) => (
+    <div onClick={selectCell} className={cellStyles}>
+      {highlightMatches(text, highlightPattern)}
+    </div>
+  );
+  const dateCell = (date: Date, displayValue?: string) => (
+    <div onClick={selectCell} className={cellStyles}>
+      <WithLocale>
+        {(locale) =>
+          renderDate({
+            value: date,
+            dataType,
+            dtype,
+            displayValue,
+            locale,
+            highlightPattern,
+          })
+        }
+      </WithLocale>
+    </div>
+  );
+
   // Sentinel values (null, whitespace, NaN, Infinity, NaT) rendered specially.
   // Empty strings are left as-is
   const sentinel = detectSentinel(value, dataType, dtype);
@@ -640,23 +669,10 @@ export function renderCellValue<TData, TValue>({
     try {
       const date = new Date(value);
       if (!format || !isValid(date)) {
-        return (
-          <div onClick={selectCell} className={cellStyles}>
-            {value}
-          </div>
-        );
+        return textCell(value);
       }
 
-      const displayValue = String(column.applyColumnFormatting(value));
-      return (
-        <div onClick={selectCell} className={cellStyles}>
-          <WithLocale>
-            {(locale) =>
-              renderDate({ value: date, dataType, dtype, displayValue, locale })
-            }
-          </WithLocale>
-        </div>
-      );
+      return dateCell(date, String(column.applyColumnFormatting(value)));
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
     }
@@ -672,17 +688,9 @@ export function renderCellValue<TData, TValue>({
     }
 
     // e.g. 2010-10-07 17:15:00
-    const displayValue = format
-      ? String(column.applyColumnFormatting(value))
-      : undefined;
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value, dataType, dtype, displayValue, locale })
-          }
-        </WithLocale>
-      </div>
+    return dateCell(
+      value,
+      format ? String(column.applyColumnFormatting(value)) : undefined,
     );
   }
 
@@ -728,7 +736,7 @@ export function renderCellValue<TData, TValue>({
           className={cn(cellStyles, isWrapped && COLUMN_WRAPPING_STYLES)}
         >
           <WhitespaceMarkers value={leading} />
-          <UrlDetector parts={parts} />
+          <UrlDetector parts={parts} highlightPattern={highlightPattern} />
           <WhitespaceMarkers value={trailing} />
         </div>
       );
@@ -754,11 +762,7 @@ export function renderCellValue<TData, TValue>({
   }
 
   if (format) {
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {column.applyColumnFormatting(value)}
-      </div>
-    );
+    return textCell(String(column.applyColumnFormatting(value)));
   }
 
   // Format to the correct locale
@@ -768,26 +772,19 @@ export function renderCellValue<TData, TValue>({
         <LocaleNumber
           value={value}
           minFractionDigits={column.columnDef.meta?.minFractionDigits}
+          highlightPattern={highlightPattern}
         />
       </div>
     );
   }
 
   if (typeof value === "boolean") {
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {value ? "True" : "False"}
-      </div>
-    );
+    return textCell(value ? "True" : "False");
   }
 
   if (isPrimitiveOrNullish(value)) {
     const rendered = renderValue();
-    return (
-      <div onClick={selectCell} className={cellStyles}>
-        {rendered == null ? "" : String(rendered)}
-      </div>
-    );
+    return textCell(rendered == null ? "" : String(rendered));
   }
 
   const mimeValues = getMimeValues(value);
@@ -825,14 +822,16 @@ export function renderCellValue<TData, TValue>({
 export const LocaleNumber = ({
   value,
   minFractionDigits,
+  highlightPattern,
 }: {
   value: number;
   minFractionDigits?: number;
+  highlightPattern?: RegExp;
 }) => {
   const { locale } = useLocale();
   const format = useNumberFormatter({
     minimumFractionDigits: minFractionDigits,
     maximumFractionDigits: maxFractionalDigits(locale),
   });
-  return format.format(value);
+  return highlightMatches(format.format(value), highlightPattern);
 };

package/src/components/data-table/context-menu.tsx

@@ -12,7 +12,7 @@ import { Logger } from "@/utils/Logger";
 import type { Cell } from "@tanstack/react-table";
 import { useAtomValue } from "jotai";
 import { CopyIcon, FilterIcon, SquareStack } from "lucide-react";
-import type { RefObject } from "react";
+import { type RefObject, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import {
   ContextMenu,
@@ -123,8 +123,21 @@ export const DataTableContextMenu = <TData,>({
   tableRef: RefObject<HTMLTableSectionElement | null>;
   copyAllCells: () => void;
 }) => {
+  const [activeCell, setActiveCell] = useState<Cell<TData, unknown> | null>(
+    null,
+  );
+  const highlightedCell = useRef<Element | null>(null);
   const handleContextMenuChange = useEvent((open: boolean) => {
+    highlightedCell.current?.classList.remove("bg-(--green-4)");
+    highlightedCell.current = null;
+    if (!open) {
+      // Forget the cell so a later right-click outside any cell can't reuse it
+      contextMenuRef.current = null;
+      return;
+    }
+
     const cell = contextMenuRef.current;
+    setActiveCell(cell);
     if (!cell) {
       return;
     }
@@ -138,42 +151,45 @@ export const DataTableContextMenu = <TData,>({
       return;
     }
 
-    if (open) {
-      cellElement.classList.add("bg-(--green-4)");
-    } else {
-      cellElement.classList.remove("bg-(--green-4)");
-    }
+    cellElement.classList.add("bg-(--green-4)");
+    highlightedCell.current = cellElement;
   });
 
   return (
-    <ContextMenu onOpenChange={handleContextMenuChange}>
-      <ContextMenuTrigger asChild={true}>{tableBody}</ContextMenuTrigger>
+    // Open via the trigger so a right-click while already open retargets the
+    // menu; Radix only reports open changes, so use it for closing.
+    <ContextMenu
+      onOpenChange={(open) => {
+        if (!open) {
+          handleContextMenuChange(false);
+        }
+      }}
+    >
+      <ContextMenuTrigger
+        asChild={true}
+        onContextMenu={() => handleContextMenuChange(true)}
+      >
+        {tableBody}
+      </ContextMenuTrigger>
       <ContextMenuPortal>
-        <CellContextMenu
-          cellRef={contextMenuRef}
-          copySelectedCells={copyAllCells}
-        />
+        {activeCell && (
+          <CellContextMenu cell={activeCell} copySelectedCells={copyAllCells} />
+        )}
       </ContextMenuPortal>
     </ContextMenu>
   );
 };
 
 export const CellContextMenu = <TData,>({
-  cellRef,
+  cell,
   copySelectedCells,
 }: {
-  cellRef: RefObject<Cell<TData, unknown> | null>;
+  cell: Cell<TData, unknown>;
   copySelectedCells: () => void;
 }) => {
   const selectedCells = useAtomValue(selectedCellsAtom);
   const multipleSelectedCells = selectedCells.size > 1;
 
-  const cell = cellRef.current;
-  if (!cell) {
-    Logger.error("No cell found in context menu");
-    return;
-  }
-
   const table = cell.getContext().table;
   const displayedValue = cell.getValue();
   const rawValue =

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

@@ -58,6 +58,7 @@ import { useColumnPinning } from "./hooks/use-column-pinning";
 import { useScrollContainerHeight } from "./hooks/use-scroll-container-height";
 import { CellSelectionProvider } from "./range-focus/provider";
 import { DataTableBody, renderTableHeader } from "./renderers";
+import { buildHighlightPattern } from "./search-highlight";
 import { TableBottomBar } from "./TableBottomBar";
 import { TableTopBar } from "./TableTopBar";
 import {
@@ -231,6 +232,11 @@ const DataTableInternal = <TData,>({
     return idx + offset;
   }
 
+  const highlightPattern = React.useMemo(
+    () => buildHighlightPattern(searchQuery),
+    [searchQuery],
+  );
+
   const table = useReactTable<TData>({
     _features: [
       ColumnPinning,
@@ -245,7 +251,7 @@ const DataTableInternal = <TData,>({
     ],
     data,
     columns,
-    meta: { rawData },
+    meta: { rawData, highlightPattern },
     getCoreRowModel: getCoreRowModel(),
     // pagination
     rowCount: totalRows === "too_many" ? undefined : totalRows,
@@ -396,6 +402,12 @@ const DataTableInternal = <TData,>({
               </Banner>
             )}
             <Table
+              role={table.options.enableCellSelection ? "grid" : undefined}
+              aria-multiselectable={
+                table.options.enableCellSelection
+                  ? table.options.enableMultiCellSelection
+                  : undefined
+              }
               className={cn(
                 "relative",
                 columns.length <= AUTO_WIDTH_MAX_COLUMNS ? "w-auto" : "w-full",

package/src/components/data-table/date-popover.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React from "react";
+import React, { useMemo } from "react";
 import { useDateFormatter, useLocale } from "react-aria";
 import { Tooltip } from "@/components/ui/tooltip";
 
@@ -45,6 +45,7 @@ export const DatePopover: React.FC<DatePopoverProps> = ({
 
 const TimezoneDisplay = ({ date }: { date: Date }) => {
   const { locale } = useLocale();
+  // The system timezone can change without the locale changing.
   const localTimezone = new Intl.DateTimeFormat(locale).resolvedOptions()
     .timeZone;
   const hasSubSeconds = date.getUTCMilliseconds() !== 0;
@@ -116,9 +117,10 @@ const RelativeTime = ({ date }: { date: Date }) => {
   const { locale } = useLocale();
 
   // Initialize relative time formatter with current locale and "auto" numeric style
-  const relativeTimeFormatter = new Intl.RelativeTimeFormat(locale, {
-    numeric: "auto",
-  });
+  const relativeTimeFormatter = useMemo(
+    () => new Intl.RelativeTimeFormat(locale, { numeric: "auto" }),
+    [locale],
+  );
 
   const currentTime = new Date();
   // Get difference in seconds between now and the input date

package/src/components/data-table/export-actions.tsx

@@ -24,6 +24,7 @@ import type {
   GetExportMetadata,
 } from "./schemas";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useStateForKey } from "@/hooks/useStateForKey";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
@@ -354,7 +355,6 @@ interface ExportContext {
 export const ExportActions: React.FC<ExportActionProps> = (props) => {
   const { getExportMetadata, metadataSource } = props;
   const [exportDialogOpen, setExportDialogOpen] = React.useState(false);
-  const [failure, setFailure] = React.useState<ExportFailure | null>(null);
   const [settings, setSettings] =
     React.useState<ExportSettings>(DEFAULT_SETTINGS);
   const [exportContext, setExportContext] = React.useState<ExportContext>(
@@ -363,6 +363,10 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
   if (exportContext.source !== metadataSource) {
     setExportContext({ source: metadataSource });
   }
+  const [failure, setFailure] = useStateForKey<ExportFailure | null>(
+    exportContext,
+    () => null,
+  );
   const mounted = React.useRef(false);
   const isCurrentContext = useEvent(
     (context: ExportContext) => mounted.current && context === exportContext,
@@ -416,7 +420,6 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
   }, []);
   React.useEffect(() => {
     latestActionId.current += 1;
-    setFailure(null);
   }, [metadataSource]);
   const policy = useAtomValue(downloadSizeLimitAtom);
   const overLimit = !!(
@@ -452,7 +455,6 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
     setExportDialogOpen(open);
     if (!open) {
       latestActionId.current += 1;
-      setFailure(null);
       setExpandedFormat(null);
       setSettings(DEFAULT_SETTINGS);
       setGeometryColumn(null);
@@ -761,7 +763,10 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
             const expanded =
               configurableFormat !== null &&
               expandedFormat === configurableFormat;
+            const FormatHeader = configurableFormat ? "button" : "div";
             const panelId = `export-options-${option.format}`;
+            const descriptionId = `${panelId}-description`;
+            const summaryId = `${panelId}-summary`;
             const rowFailure =
               failure?.action.format === option.format ? failure : null;
             const summary =
@@ -802,55 +807,78 @@ export const ExportActions: React.FC<ExportActionProps> = (props) => {
                 data-testid={`export-row-${option.format}`}
                 className={cn(expanded && "bg-muted/40")}
               >
-                <div className="grid min-h-[60px] grid-cols-[28px_minmax(0,1fr)_auto] items-center gap-x-1 px-2.5 py-2 hover:bg-accent/50">
-                  {configurableFormat ? (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      aria-label={`${optionLabel} options`}
-                      aria-expanded={expanded}
-                      aria-controls={panelId}
-                      onClick={() => toggleExpanded(option.format)}
+                <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center hover:bg-accent/50">
+                  <FormatHeader
+                    type={configurableFormat ? "button" : undefined}
+                    className={cn(
+                      "grid min-h-[60px] min-w-0 grid-cols-[28px_minmax(0,1fr)] items-center gap-x-1 py-2 pl-2.5 pr-1 text-left",
+                      configurableFormat &&
+                        "cursor-pointer focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+                    )}
+                    aria-label={
+                      configurableFormat ? `${optionLabel} options` : undefined
+                    }
+                    aria-describedby={
+                      configurableFormat
+                        ? [descriptionId, summary && summaryId]
+                            .filter(Boolean)
+                            .join(" ")
+                        : undefined
+                    }
+                    aria-expanded={configurableFormat ? expanded : undefined}
+                    aria-controls={configurableFormat ? panelId : undefined}
+                    onClick={
+                      configurableFormat
+                        ? () => toggleExpanded(option.format)
+                        : undefined
+                    }
+                  >
+                    <span
+                      aria-hidden={true}
+                      className="inline-flex h-6 w-6 items-center justify-center"
                     >
-                      <ChevronRightIcon
-                        className={cn(
-                          "h-4 w-4 text-muted-foreground transition-transform",
-                          expanded && "rotate-90",
-                        )}
+                      {configurableFormat && (
+                        <ChevronRightIcon
+                          className={cn(
+                            "h-4 w-4 text-muted-foreground transition-transform",
+                            expanded && "rotate-90",
+                          )}
+                        />
+                      )}
+                    </span>
+                    <span className="flex min-w-0 items-center gap-3 pl-1">
+                      <option.icon
+                        aria-hidden={true}
+                        data-testid={`export-format-icon-${option.format}`}
+                        className="h-4 w-4 shrink-0 text-muted-foreground"
                       />
-                    </Button>
-                  ) : (
-                    <span aria-hidden={true} className="h-6 w-6" />
-                  )}
-                  <div className="flex min-w-0 items-center gap-3 pl-1">
-                    <option.icon
-                      aria-hidden={true}
-                      data-testid={`export-format-icon-${option.format}`}
-                      className="h-4 w-4 shrink-0 text-muted-foreground"
-                    />
-                    <div className="grid min-w-0 gap-1">
-                      <span className="flex min-w-0 items-baseline gap-x-2">
-                        <span className="text-sm font-medium leading-tight">
-                          {optionLabel}
-                        </span>
-                        {summary && (
-                          <span
-                            data-testid={`export-summary-${option.format}`}
-                            className="min-w-0 truncate text-xs text-muted-foreground"
-                          >
-                            {summary}
+                      <span className="grid min-w-0 gap-1">
+                        <span className="flex min-w-0 items-baseline gap-x-2">
+                          <span className="text-sm font-medium leading-tight">
+                            {optionLabel}
                           </span>
-                        )}
-                      </span>
-                      <span className="text-xs text-muted-foreground leading-tight">
-                        {option.format === "parquet" && hasGeometry
-                          ? "Parquet with geometry and CRS metadata"
-                          : option.description}
+                          {summary && (
+                            <span
+                              id={summaryId}
+                              data-testid={`export-summary-${option.format}`}
+                              className="min-w-0 truncate text-xs text-muted-foreground"
+                            >
+                              {summary}
+                            </span>
+                          )}
+                        </span>
+                        <span
+                          id={descriptionId}
+                          className="text-xs text-muted-foreground leading-tight"
+                        >
+                          {option.format === "parquet" && hasGeometry
+                            ? "Parquet with geometry and CRS metadata"
+                            : option.description}
+                        </span>
                       </span>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-0.5">
+                    </span>
+                  </FormatHeader>
+                  <div className="flex items-center gap-0.5 pr-2.5">
                     <Tooltip
                       content={
                         option.canDownload

package/src/components/data-table/range-focus/atoms.ts

@@ -244,15 +244,13 @@ const {
       cellId: nextCell.id,
     };
 
-    if (isShiftKey && state.selectedStartCell) {
-      const cellsInRange = getCellsBetween(
-        table,
-        state.selectedStartCell,
-        newCell,
-      );
+    if (isShiftKey) {
+      const anchor = state.selectedStartCell ?? currentCell;
+      const cellsInRange = getCellsBetween(table, anchor, newCell);
       return {
         ...state,
         selectedCells: new Set(cellsInRange),
+        selectedStartCell: anchor,
         focusedCell: newCell,
       };
     } else {