@marimo-team/islands 0.25.3-dev10 → 0.25.3-dev101

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

@@ -0,0 +1,72 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { I18nProvider } from "react-aria";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DatePopover } from "../date-popover";
+
+vi.mock("@/components/ui/tooltip", () => ({
+  Tooltip: ({ content }: { content: ReactNode }) => content,
+}));
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("DatePopover", () => {
+  it.each([0, 123])(
+    "updates the local timezone and time on rerender with %i milliseconds",
+    (milliseconds) => {
+      const NativeDateTimeFormat = Intl.DateTimeFormat;
+      let systemTimezone = "America/Los_Angeles";
+      vi.spyOn(Intl, "DateTimeFormat").mockImplementation(
+        function (locales, options) {
+          return new NativeDateTimeFormat(locales, {
+            ...options,
+            timeZone: options?.timeZone ?? systemTimezone,
+          });
+        },
+      );
+
+      const date = new Date("2026-01-15T12:00:00Z");
+      date.setUTCMilliseconds(milliseconds);
+      const content = () => (
+        <I18nProvider locale="en-US">
+          <DatePopover date={date} type="datetime">
+            timestamp
+          </DatePopover>
+        </I18nProvider>
+      );
+      const { rerender } = render(content());
+      const previousTime =
+        screen.getByText(systemTimezone).nextElementSibling?.textContent;
+      const utcTime = screen.getByText("UTC").nextElementSibling?.textContent;
+
+      systemTimezone = "Asia/Tokyo";
+      rerender(content());
+
+      const expected = new NativeDateTimeFormat("en-US", {
+        timeZone: systemTimezone,
+        ...(milliseconds
+          ? {
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+              fractionalSecondDigits: 3,
+            }
+          : { dateStyle: "long", timeStyle: "medium" }),
+      }).format(date);
+      expect(screen.queryByText("America/Los_Angeles")).toBeNull();
+      expect(
+        screen.getByText(systemTimezone).nextElementSibling?.textContent,
+      ).toBe(expected);
+      expect(expected).not.toBe(previousTime);
+      expect(screen.getByText("UTC").nextElementSibling?.textContent).toBe(
+        utcTime,
+      );
+    },
+  );
+});

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

@@ -531,6 +531,23 @@ describe("ExportActions dialog", () => {
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 
+  it("does not revive an earlier source failure when switching back", async () => {
+    downloadAs.mockRejectedValueOnce(new Error("First source failed"));
+    const { rerenderExportActions } = renderExportActions({
+      metadataSource: "first",
+    });
+    await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "First source failed",
+    );
+
+    rerenderExportActions({ metadataSource: "second" });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    rerenderExportActions({ metadataSource: "first" });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
   async function startGeoParquetInstall(strictMode = false) {
     const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
     downloadAs.mockResolvedValueOnce({
@@ -914,6 +931,94 @@ describe("ExportActions dialog", () => {
     expect(within(dialog).queryByRole("group")).not.toBeInTheDocument();
   });
 
+  it("describes format options with their description and current settings", async () => {
+    renderExportActions({
+      getExportMetadata: vi.fn().mockResolvedValue(geometryMetadata),
+    });
+    await openDialog();
+    await screen.findByRole("button", { name: "GeoParquet options" });
+
+    for (const [label, description] of [
+      ["CSV", "Comma-separated values Comma · UTF-8"],
+      ["TSV", "Best for Excel and Google Sheets UTF-8"],
+      ["JSON", "Raw JSON data Escapes non-ASCII"],
+      ["GeoParquet", "Parquet with geometry and CRS metadata location"],
+      ["GeoJSON", "Geometry in longitude and latitude location"],
+    ]) {
+      expect(
+        screen.getByRole("button", { name: `${label} options` }),
+      ).toHaveAccessibleDescription(description);
+    }
+
+    const csvOptions = screen.getByRole("button", { name: "CSV options" });
+    fireEvent.click(csvOptions);
+    fireEvent.change(screen.getByRole("combobox", { name: "Delimiter" }), {
+      target: { value: ";" },
+    });
+    expect(csvOptions).toHaveAccessibleDescription(
+      "Comma-separated values Semicolon · UTF-8",
+    );
+    fireEvent.click(csvOptions);
+    expect(csvOptions).toHaveAccessibleDescription(
+      "Comma-separated values Semicolon · UTF-8",
+    );
+  });
+
+  it.each([
+    ["CSV", "Comma-separated values"],
+    ["TSV", "Best for Excel and Google Sheets"],
+    ["JSON", "Raw JSON data"],
+    ["GeoParquet", "Parquet with geometry and CRS metadata"],
+    ["GeoJSON", "Geometry in longitude and latitude"],
+  ])(
+    "toggles %s options from the row label and description",
+    async (label, description) => {
+      renderExportActions({
+        getExportMetadata: vi.fn().mockResolvedValue(geometryMetadata),
+      });
+      await openDialog();
+      const toggle = await screen.findByRole("button", {
+        name: `${label} options`,
+      });
+
+      fireEvent.click(screen.getByText(label));
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+      expect(
+        screen.getByRole("group", { name: `${label} options` }),
+      ).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText(description));
+      expect(toggle).toHaveAttribute("aria-expanded", "false");
+      expect(
+        screen.queryByRole("group", { name: `${label} options` }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("keeps download and copy independent of row expansion", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        text: vi.fn().mockResolvedValue("name,value\n"),
+      }),
+    );
+    renderExportActions();
+    await openDialog();
+    const toggle = screen.getByRole("button", { name: "CSV options" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(screen.getByText("CSV"));
+    fireEvent.click(screen.getByRole("button", { name: "Copy CSV" }));
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    await waitFor(() => {
+      expect(copyToClipboard).toHaveBeenCalledWith("name,value\n");
+    });
+  });
+
   it("sends only changed CSV options with a download", async () => {
     renderExportActions();
     await openDialog();

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

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  buildHighlightPattern,
+  findMatchRanges,
+  highlightMatches,
+  highlightRanges,
+} from "../search-highlight";
+
+function highlight(text: string, query: string) {
+  return highlightMatches(text, buildHighlightPattern(query));
+}
+
+function marksOf(node: React.ReactNode) {
+  const { container } = render(<span>{node}</span>);
+  return {
+    container,
+    marks: [...container.querySelectorAll("mark")].map((m) => m.textContent),
+  };
+}
+
+describe("buildHighlightPattern", () => {
+  it("returns undefined for an empty or missing query", () => {
+    expect(buildHighlightPattern("")).toBeUndefined();
+    expect(buildHighlightPattern(undefined)).toBeUndefined();
+  });
+
+  it("escapes regex metacharacters so the query matches literally", () => {
+    const { marks } = marksOf(highlight("a.b a-b (x)", ".b"));
+    expect(marks).toEqual([".b"]);
+    expect(marksOf(highlight("f(x)", "(x)")).marks).toEqual(["(x)"]);
+    expect(marksOf(highlight("C and C++", "c++")).marks).toEqual(["C++"]);
+  });
+});
+
+describe("highlightMatches", () => {
+  it("returns the input unchanged without a pattern", () => {
+    expect(highlightMatches("Alice Smith", undefined)).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when there is no match", () => {
+    expect(highlight("Alice Smith", "zzz")).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when the query is longer than the text", () => {
+    expect(highlight("ab", "abc")).toBe("ab");
+  });
+
+  it("wraps a single match and keeps the surrounding text", () => {
+    const { container, marks } = marksOf(highlight("Alice Smith", "ce S"));
+    expect(marks).toEqual(["ce S"]);
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("matches case-insensitively and keeps the original casing", () => {
+    const { marks } = marksOf(highlight("Alice Smith", "smi"));
+    expect(marks).toEqual(["Smi"]);
+  });
+
+  it("wraps every occurrence", () => {
+    const { container, marks } = marksOf(highlight("a-A-a", "a"));
+    expect(marks).toEqual(["a", "A", "a"]);
+    expect(container.textContent).toBe("a-A-a");
+  });
+
+  it("produces no empty segments for matches at the edges", () => {
+    const segments = highlight("xax", "x") as React.ReactNode[];
+    expect(Array.isArray(segments)).toBe(true);
+    expect(segments).toHaveLength(3);
+    expect(segments[1]).toBe("a");
+  });
+
+  it("is safe to reuse one global pattern across calls", () => {
+    const pattern = buildHighlightPattern("a");
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+  });
+});
+
+describe("Unicode case folding", () => {
+  it("folds the Kelvin sign to k like the backend engines", () => {
+    expect(marksOf(highlight("K", "k")).marks).toEqual(["K"]);
+  });
+
+  it("folds every Greek sigma form", () => {
+    expect(marksOf(highlight("ΟΣ ος οσ", "σ")).marks).toEqual(["Σ", "ς", "σ"]);
+  });
+});
+
+describe("highlightRanges", () => {
+  it("applies shared ranges to a segment at an offset", () => {
+    const ranges = findMatchRanges(
+      "see https://x",
+      buildHighlightPattern("see https"),
+    );
+    expect(ranges).toEqual([[0, 9]]);
+    const { marks: textMarks } = marksOf(highlightRanges("see ", ranges, 0));
+    expect(textMarks).toEqual(["see "]);
+    const { marks: linkMarks } = marksOf(
+      highlightRanges("https://x", ranges, 4),
+    );
+    expect(linkMarks).toEqual(["https"]);
+  });
+
+  it("returns the segment unchanged when no range overlaps it", () => {
+    expect(highlightRanges("zzz", [[10, 12]], 0)).toBe("zzz");
+  });
+});

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

@@ -2,6 +2,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { parseContent } from "@/utils/url-parser";
+import { buildHighlightPattern } from "../search-highlight";
 import { isMarkdown, UrlDetector } from "../url-detector";
 
 describe("UrlDetector", () => {
@@ -201,3 +202,76 @@ describe("isMarkdown", () => {
     expect(isMarkdown("Visit [marimo](https://marimo.io)")).toBe(true);
   });
 });
+
+describe("UrlDetector with highlightPattern", () => {
+  it("wraps a text match in a mark", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("smi")}
+      />,
+    );
+    const marks = container.querySelectorAll("mark");
+    expect(marks).toHaveLength(1);
+    expect(marks[0].textContent).toBe("Smi");
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("wraps a match inside a link label", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("marimo")}
+      />,
+    );
+    const link = container.querySelector("a");
+    expect(link).not.toBeNull();
+    const mark = link?.querySelector("mark");
+    expect(mark?.textContent).toBe("marimo");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+  });
+
+  it("renders no mark for an empty query", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("")}
+      />,
+    );
+    expect(container.querySelector("mark")).toBeNull();
+  });
+});
+
+describe("UrlDetector highlight across part boundaries", () => {
+  it("marks a query that spans a text part and a link", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("see https")}
+      />,
+    );
+    const marks = [...container.querySelectorAll("mark")].map(
+      (m) => m.textContent,
+    );
+    expect(marks).toEqual(["see ", "https"]);
+    const link = container.querySelector("a");
+    expect(link?.querySelector("mark")?.textContent).toBe("https");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+    expect(container.textContent).toBe("see https://marimo.io/docs");
+  });
+
+  it("marks the fallback link when an image fails to load", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("https://example.com/image.png")}
+        highlightPattern={buildHighlightPattern("image")}
+      />,
+    );
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    fireEvent.error(img as HTMLImageElement);
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", "https://example.com/image.png");
+    expect(link?.querySelector("mark")?.textContent).toBe("image");
+  });
+});

package/src/components/data-table/cell-selection/feature.ts

@@ -98,7 +98,7 @@ export const CellSelectionFeature: TableFeature = {
           ]);
         } else {
           // This cell becomes the single selected cell
-          table.setCellSelection((_) => [
+          table.setCellSelection(() => [
             {
               rowId: rowId,
               columnName: columnName,
@@ -115,7 +115,7 @@ export const CellSelectionFeature: TableFeature = {
           );
         } else {
           // Clear the selection
-          table.setCellSelection((_) => []);
+          table.setCellSelection(() => []);
         }
       }
     };

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

@@ -30,7 +30,7 @@ export interface CellSelectionCell {
 }
 
 // These are additional properties add to the table instance in createTable
-export interface CellSelectionInstance<TData extends RowData> {
+export interface CellSelectionInstance {
   setCellSelection?: (updater: Updater<CellSelectionState>) => void;
 
   resetCellSelection?(defaultValue?: CellSelectionState): void;
@@ -44,7 +44,7 @@ declare module "@tanstack/react-table" {
     TData extends RowData,
   > extends CellSelectionOptions {}
 
-  interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}
+  interface Table<TData extends RowData> extends CellSelectionInstance {}
 
   interface Cell<TData extends RowData, TValue> extends CellSelectionCell {}
 }

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -10,13 +10,27 @@ import { cellId } from "@/__tests__/branded";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { vegaLoader } from "@/plugins/impl/vega/loader";
 import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
-import { getChartTabName, tabsStorageAtom } from "../storage";
+import { createTabId, getChartTabName, tabsStorageAtom } from "../storage";
 import { ChartType, NONE_VALUE } from "../types";
+import { TOO_MANY_ROWS } from "../../types";
 
 vi.mock("@/components/charts/lazy", () => ({
   LazyVegaEmbed: vi.fn(() => null),
 }));
 
+vi.mock("../components/chart-items", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../components/chart-items")>()),
+  ChartTypeSelect: ({
+    onValueChange,
+  }: {
+    onValueChange: (value: string) => void;
+  }) => (
+    <button type="button" onClick={() => onValueChange("line")}>
+      Change chart type
+    </button>
+  ),
+}));
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
 });
@@ -38,6 +52,7 @@ describe("ChartPanel", () => {
             id,
             [
               {
+                id: createTabId(),
                 tabName,
                 chartType: ChartType.BAR,
                 config: {
@@ -283,4 +298,62 @@ describe("ChartPanel", () => {
       });
     },
   );
+  it("keeps panel state when a chart type change renames the tab", async () => {
+    const store = createStore();
+    const id = cellId("rename-keeps-state");
+    const tabName = getChartTabName(0, ChartType.BAR);
+    store.set(
+      tabsStorageAtom,
+      new Map([
+        [
+          id,
+          [
+            {
+              id: createTabId(),
+              tabName,
+              chartType: ChartType.BAR,
+              config: {
+                general: {
+                  xColumn: { field: "value", type: "number" },
+                  yColumn: {
+                    field: "value",
+                    type: "integer",
+                    aggregate: NONE_VALUE,
+                  },
+                },
+              },
+            },
+          ],
+        ],
+      ]),
+    );
+    const sample = [{ value: 1 }];
+    const props: TablePanelProps = {
+      cellId: id,
+      data: sample,
+      dataTable: <div />,
+      totalRows: TOO_MANY_ROWS,
+      columns: 1,
+      displayHeader: true,
+      fieldTypes: [["value", ["number", "float64"]]],
+    };
+    const { getByRole, findByRole, queryByRole } = render(
+      <Provider store={store}>
+        <Tooltip.Provider>
+          <TablePanel {...props} />
+        </Tooltip.Provider>
+      </Provider>,
+    );
+    fireEvent.click(getByRole("tab", { name: tabName }));
+    fireEvent.click(await findByRole("button", { name: "Proceed" }));
+    await waitFor(() => {
+      expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+    });
+
+    fireEvent.click(getByRole("button", { name: "Change chart type" }));
+
+    const renamed = getChartTabName(0, ChartType.LINE);
+    await findByRole("tab", { name: renamed });
+    expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+  });
 });

package/src/components/data-table/charts/__tests__/storage.test.ts

@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
-import { KEY, tabsStorageAtom } from "../storage";
+import { createTabId, KEY, tabsStorageAtom } from "../storage";
 import { ChartType } from "../types";
 
 describe("Chart Transforms Storage", () => {
@@ -39,6 +39,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -63,6 +64,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData1 = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -73,6 +75,7 @@ describe("Chart Transforms Storage", () => {
         }),
       };
       const tabData2 = {
+        id: createTabId(),
         tabName: "Tab 2" as TabName,
         chartType: ChartType.BAR,
         config: ChartSchema.parse({