@marimo-team/islands 0.25.2-dev14 → 0.25.2-dev140

package/src/plugins/impl/__test__/slider-labels.test.tsx

@@ -0,0 +1,136 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { SliderPlugin } from "../SliderPlugin";
+
+SetupMocks.resizeObserver();
+const plugin = new SliderPlugin();
+function props(label: string | null) {
+  return {
+    host: document.createElement("div"),
+    value: 5,
+    setValue: vi.fn(),
+    functions: {},
+    data: plugin.validator.parse({
+      initialValue: 5,
+      start: 0,
+      stop: 10,
+      step: 1,
+      steps: null,
+      label,
+    }),
+  };
+}
+
+describe("SliderPlugin accessible labels", () => {
+  test("names the actual thumb from formatted labels and updates its reference", () => {
+    const initial = props("<strong>Price &amp; tax</strong>");
+    const { rerender } = render(plugin.render(initial));
+    const thumb = screen.getByRole("slider", { name: "Price & tax" });
+    const labelId = thumb.getAttribute("aria-labelledby");
+    rerender(
+      plugin.render({
+        ...initial,
+        data: { ...initial.data, label: "Updated price" },
+      }),
+    );
+    const updatedThumb = screen.getByRole("slider", { name: "Updated price" });
+    expect(updatedThumb).toHaveAccessibleName("Updated price");
+    expect(updatedThumb).toHaveAttribute("aria-labelledby", labelId);
+    rerender(
+      plugin.render({ ...initial, data: { ...initial.data, label: null } }),
+    );
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Slider");
+    expect(screen.getByRole("slider")).not.toHaveAttribute("aria-labelledby");
+  });
+
+  test.each([null, ""])("retains a fallback name for label %s", (label) => {
+    render(plugin.render(props(label)));
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Slider");
+  });
+
+  test("keeps repeated widget labels independently associated", () => {
+    render(
+      <>
+        {plugin.render(props("Price"))}
+        {plugin.render(props("Price"))}
+      </>,
+    );
+    const thumbs = screen.getAllByRole("slider", { name: "Price" });
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0].getAttribute("aria-labelledby")).not.toBe(
+      thumbs[1].getAttribute("aria-labelledby"),
+    );
+  });
+
+  test.each([false, true])(
+    "preserves keyboard commits with debounce=%s",
+    (debounce) => {
+      const initial = props("Price");
+      render(
+        plugin.render({ ...initial, data: { ...initial.data, debounce } }),
+      );
+      fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+      expect(initial.setValue).toHaveBeenCalledWith(6);
+    },
+  );
+
+  test("preserves maximum and minimum keyboard boundaries", () => {
+    const initial = props("Price");
+    const { rerender } = render(plugin.render({ ...initial, value: 10 }));
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(initial.setValue).not.toHaveBeenCalled();
+    rerender(plugin.render({ ...initial, value: 0 }));
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(initial.setValue).not.toHaveBeenCalled();
+  });
+
+  test("retains the name while disabled and removes keyboard focusability", () => {
+    const initial = props("Price");
+    render(
+      plugin.render({ ...initial, data: { ...initial.data, disabled: true } }),
+    );
+    const thumb = screen.getByRole("slider", { name: "Price" });
+    expect(thumb).not.toHaveAttribute("tabindex");
+    expect(thumb).toHaveAttribute("data-disabled");
+  });
+
+  test("preserves vertical keyboard interaction", () => {
+    const initial = props("Price");
+    render(
+      plugin.render({
+        ...initial,
+        data: { ...initial.data, orientation: "vertical" },
+      }),
+    );
+    const thumb = screen.getByRole("slider", { name: "Price" });
+    expect(thumb).toHaveAttribute("aria-orientation", "vertical");
+    fireEvent.keyDown(thumb, { key: "ArrowUp" });
+    expect(initial.setValue).toHaveBeenCalledWith(6);
+  });
+
+  test("preserves mapped values while naming the index-space thumb", () => {
+    const initial = props("Mapped price");
+    render(
+      plugin.render({
+        ...initial,
+        value: 1,
+        data: {
+          ...initial.data,
+          start: 0,
+          stop: 2,
+          steps: [10, 20, 50],
+          showValue: true,
+        },
+      }),
+    );
+    expect(screen.getByText("20")).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole("slider", { name: "Mapped price" }), {
+      key: "ArrowRight",
+    });
+    expect(initial.setValue).toHaveBeenCalledWith(2);
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "2");
+    expect(screen.getByRole("tooltip")).toHaveTextContent("50");
+  });
+});

package/src/plugins/impl/__test__/text-labels.test.tsx

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import type { IPlugin } from "../../types";
+import { TextInputPlugin } from "../TextInputPlugin";
+import { TextAreaPlugin } from "../TextAreaPlugin";
+
+function testLabelBehavior<D extends { label: string | null }>(
+  plugin: IPlugin<string, D>,
+) {
+  for (const debounce of [false, true, 200]) {
+    test(`${plugin.tagName} associates formatted label with debounce=${debounce}`, () => {
+      const setValue = vi.fn();
+      const props = {
+        host: document.createElement("div"),
+        value: "",
+        setValue,
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "<strong>Notes &amp; details</strong>",
+          debounce,
+        }),
+      };
+      const { rerender } = render(plugin.render(props));
+      const control = screen.getByLabelText("Notes & details");
+      expect(control).toHaveAccessibleName("Notes & details");
+      const id = control.id;
+      rerender(
+        plugin.render({
+          ...props,
+          data: { ...props.data, label: "Updated notes" },
+        }),
+      );
+      expect(screen.getByLabelText("Updated notes").id).toBe(id);
+      rerender(
+        plugin.render({ ...props, data: { ...props.data, label: null } }),
+      );
+      expect(control).toHaveAccessibleName("");
+    });
+    test(`${plugin.tagName} preserves commit timing with debounce=${debounce}`, () => {
+      vi.useFakeTimers();
+      try {
+        const setValue = vi.fn();
+        const props = {
+          host: document.createElement("div"),
+          value: "",
+          setValue,
+          functions: {},
+          data: plugin.validator.parse({
+            initialValue: "",
+            placeholder: "",
+            label: "Notes",
+            debounce,
+          }),
+        };
+        render(plugin.render(props));
+        const control = screen.getByLabelText("Notes");
+        if (debounce === false) {
+          fireEvent.input(control, { target: { value: "hello" } });
+        } else {
+          fireEvent.change(control, { target: { value: "hello" } });
+        }
+        const immediateCalls = debounce === false ? 1 : 0;
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        act(() => vi.advanceTimersByTime(199));
+        expect(setValue).toHaveBeenCalledTimes(immediateCalls);
+        if (debounce === true) {
+          fireEvent.blur(control);
+        } else if (typeof debounce === "number") {
+          act(() => vi.advanceTimersByTime(1));
+        }
+        expect(setValue).toHaveBeenCalledWith("hello");
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  }
+}
+
+for (const kind of ["text", "password", "email", "url"] as const) {
+  test(`native association preserves ${kind} input attributes`, () => {
+    const plugin = new TextInputPlugin();
+    render(
+      plugin.render({
+        host: document.createElement("div"),
+        value: "",
+        setValue: vi.fn(),
+        functions: {},
+        data: plugin.validator.parse({
+          initialValue: "",
+          placeholder: "",
+          label: "Account",
+          kind,
+          disabled: true,
+          minLength: 2,
+          maxLength: 30,
+        }),
+      }),
+    );
+    const control = screen.getByLabelText("Account");
+    expect(control).toHaveAttribute("type", kind);
+    expect(control).toBeDisabled();
+    expect(control).toBeRequired();
+    expect(control).toHaveAttribute("minlength", "2");
+    expect(control).toHaveAttribute("maxlength", "30");
+  });
+}
+
+function testMultipleInstances<D>(plugin: IPlugin<string, D>) {
+  test(`${plugin.tagName} keeps repeated labels independently associated`, () => {
+    const props = {
+      host: document.createElement("div"),
+      value: "",
+      setValue: vi.fn(),
+      functions: {},
+      data: plugin.validator.parse({
+        initialValue: "",
+        placeholder: "",
+        label: "Notes",
+      }),
+    };
+    render(
+      <>
+        {plugin.render(props)}
+        {plugin.render(props)}
+      </>,
+    );
+    const controls = screen.getAllByLabelText("Notes");
+    expect(controls).toHaveLength(2);
+    expect(controls[0].id).not.toBe(controls[1].id);
+    expect(controls[0]).toHaveAccessibleName("Notes");
+    expect(controls[1]).toHaveAccessibleName("Notes");
+  });
+}
+
+testLabelBehavior(new TextInputPlugin());
+testLabelBehavior(new TextAreaPlugin());
+testMultipleInstances(new TextInputPlugin());
+testMultipleInstances(new TextAreaPlugin());

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -4,11 +4,17 @@ import { Tooltip } from "radix-ui";
 
 const TooltipProvider = Tooltip.Provider;
 
-import { act, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
-import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { DownloadAsFunction } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { store } from "@/core/state/jotai";
 import {
@@ -19,6 +25,10 @@ import {
 
 // Default to normal (non-static) mode; individual tests flip this on.
 const mockIsStatic = vi.fn().mockReturnValue(false);
+vi.mock("@/utils/download", () => ({
+  downloadByURL: vi.fn(),
+  withLoadingToast: vi.fn(async (_title, callback) => callback()),
+}));
 vi.mock("@/core/static/static-state", async (importOriginal) => {
   const actual =
     await importOriginal<typeof import("@/core/static/static-state")>();
@@ -30,9 +40,15 @@ beforeAll(() => {
 });
 
 describe("LoadingDataTableComponent", () => {
-  it("keeps data columns when inferred types include a row header", async () => {
+  it("keeps data columns and routes each export to its RPC", async () => {
     const host = document.createElement("div");
     const data = JSON.stringify([{ index: "first", value: 1 }]);
+    const downloadAs = vi
+      .fn()
+      .mockResolvedValue({ url: "export", filename: "table.csv" });
+    const downloadGeoJSON = vi
+      .fn()
+      .mockResolvedValue({ url: "export", filename: "table.geojson" });
 
     render(
       <Provider store={store}>
@@ -43,7 +59,7 @@ describe("LoadingDataTableComponent", () => {
             pagination={false}
             pageSize={10}
             selection={null}
-            showDownload={false}
+            showDownload={true}
             showFilters={false}
             showColumnSummaries={false}
             showDataTypes={false}
@@ -68,7 +84,22 @@ describe("LoadingDataTableComponent", () => {
               cell_styles: null,
               cell_hover_texts: null,
             })}
-            download_as={vi.fn() as DownloadAsArgs}
+            download_as={downloadAs}
+            download_geojson={downloadGeoJSON}
+            get_export_metadata={vi.fn().mockResolvedValue({
+              geometry_columns: [
+                { name: "value", encoding: "objects", crs: "EPSG:4326" },
+              ],
+              primary_geometry_column: "value",
+              default_geometry_column: "value",
+              formats: {
+                geojson: {
+                  available: true,
+                  reason: null,
+                  missing_packages: [],
+                },
+              },
+            })}
             get_column_summaries={vi.fn()}
             get_data_url={vi.fn() as GetDataUrl}
             get_row_ids={vi.fn() as GetRowIds}
@@ -83,6 +114,26 @@ describe("LoadingDataTableComponent", () => {
         screen.getByRole("columnheader", { name: "value" }),
       ).toBeInTheDocument();
     });
+    fireEvent.click(screen.getByTestId("export-button"));
+    await screen.findByRole("dialog", { name: "Export table" });
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoJSON" }),
+      ).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Download GeoJSON" }));
+    await waitFor(() =>
+      expect(downloadGeoJSON).toHaveBeenCalledWith({
+        format: "geojson",
+        geometry_column: "value",
+      }),
+    );
+    expect(downloadAs).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() =>
+      expect(downloadAs).toHaveBeenCalledWith({ format: "csv" }),
+    );
+    expect(downloadGeoJSON).toHaveBeenCalledTimes(1);
   });
 
   it("does not log duplicate keys when a pivot becomes empty", async () => {
@@ -122,7 +173,9 @@ describe("LoadingDataTableComponent", () => {
       showSearch: false,
       value: [] as (number | string | { rowId: string; columnName?: string })[],
       setValue: vi.fn(),
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn(),
       get_data_url: vi.fn() as GetDataUrl,
       get_row_ids: vi.fn() as GetRowIds,
@@ -263,7 +316,9 @@ describe("LoadingDataTableComponent", () => {
       showSearch: true,
       value: [] as (number | string | { rowId: string; columnName?: string })[],
       setValue,
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn().mockResolvedValue({
         data: null,
         stats: {},
@@ -379,7 +434,9 @@ describe("static notebook control suppression", () => {
         cell_styles: null,
         cell_hover_texts: null,
       }),
-      download_as: vi.fn() as DownloadAsArgs,
+      download_as: vi.fn() as DownloadAsFunction,
+      download_geojson: vi.fn(),
+      get_export_metadata: vi.fn(),
       get_column_summaries: vi.fn().mockResolvedValue({
         data: null,
         stats: {},

package/src/plugins/impl/__tests__/NumberPlugin.test.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
+import { useState } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { z } from "zod";
 import { initialModeAtom } from "@/core/mode";
@@ -474,4 +475,161 @@ describe("NumberPlugin", () => {
     );
     expect(numberField?.classList.contains("w-full")).toBe(true);
   });
+
+  describe("does not snap values to step (#9106)", () => {
+    // Feeds `setValue` back into `value`, as the kernel round-trip does.
+    const renderNumber = (
+      initialValue: number,
+      data: Pick<z.infer<NumberPlugin["validator"]>, "start" | "stop" | "step">,
+      { debounce = false } = {},
+    ) => {
+      const plugin = new NumberPlugin();
+      const setValue = vi.fn();
+      const Harness = () => {
+        const [value, setState] = useState<number | null>(initialValue);
+        return plugin.render({
+          host: document.createElement("div"),
+          value,
+          setValue: (next) => {
+            setValue(next);
+            setState(next);
+          },
+          data: {
+            ...data,
+            label: null,
+            debounce,
+            fullWidth: false,
+          },
+          functions: {},
+        });
+      };
+      const { getByRole } = render(<Harness />);
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+      const input = getByRole("textbox", {
+        name: "Number input",
+      }) as HTMLInputElement;
+      return { input, setValue };
+    };
+
+    const typeAndCommit = (input: HTMLInputElement, text: string) => {
+      act(() => {
+        input.focus();
+      });
+      fireEvent.change(input, { target: { value: text } });
+      act(() => {
+        input.blur();
+      });
+    };
+
+    it.each([
+      { value: 2.23, start: 1.255_57, step: 0.001 },
+      { value: 2.233_45, start: 1, step: 0.001 },
+    ])(
+      "displays $value as-is with start=$start and step=$step",
+      ({ value, start, step }) => {
+        const { input } = renderNumber(value, { start, stop: 20, step });
+        expect(input.value).toBe(String(value));
+      },
+    );
+
+    it.each([
+      { typed: "2.3377", start: 1, step: 0.01 },
+      { typed: "2.23111", start: 1.222, step: 0.01 },
+    ])(
+      "keeps typed value $typed with start=$start and step=$step",
+      ({ typed, start, step }) => {
+        const { input, setValue } = renderNumber(2.233_45, {
+          start,
+          stop: 20,
+          step,
+        });
+        typeAndCommit(input, typed);
+        expect(setValue).toHaveBeenLastCalledWith(Number(typed));
+        expect(input.value).toBe(typed);
+        expect(input.getAttribute("aria-invalid")).not.toBe("true");
+        // React Aria sets a custom validity on this text input in native mode,
+        // which would block `mo.ui.form` submission.
+        expect(input.validity.valid).toBe(true);
+      },
+    );
+
+    it("clamps typed values to start and stop", () => {
+      const { input, setValue } = renderNumber(5, {
+        start: 2,
+        stop: 10,
+        step: 1,
+      });
+      typeAndCommit(input, "25");
+      expect(setValue).toHaveBeenLastCalledWith(10);
+      expect(input.value).toBe("10");
+      typeAndCommit(input, "1");
+      expect(setValue).toHaveBeenLastCalledWith(2);
+      expect(input.value).toBe("2");
+    });
+
+    it("shows the bound when typing past a bound it is already at", () => {
+      const { input, setValue } = renderNumber(10, {
+        start: 2,
+        stop: 10,
+        step: 1,
+      });
+      typeAndCommit(input, "50");
+      expect(setValue).not.toHaveBeenCalled();
+      expect(input.value).toBe("10");
+    });
+
+    it("increments and decrements by step", () => {
+      const { input, setValue } = renderNumber(5, {
+        start: 0,
+        stop: 10,
+        step: 0.5,
+      });
+      fireEvent.keyDown(input, { key: "ArrowUp" });
+      expect(setValue).toHaveBeenLastCalledWith(5.5);
+      expect(input.value).toBe("5.5");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(setValue).toHaveBeenLastCalledWith(5);
+      expect(input.value).toBe("5");
+    });
+
+    it.each([
+      { key: "ArrowUp", expected: 3 },
+      { key: "ArrowDown", expected: 2 },
+    ])(
+      "$key from an off-step value moves to the nearest step ($expected)",
+      ({ key, expected }) => {
+        const { input, setValue } = renderNumber(2.23, {
+          start: 0,
+          stop: 10,
+          step: 1,
+        });
+        fireEvent.keyDown(input, { key });
+        expect(setValue).toHaveBeenLastCalledWith(expected);
+        expect(input.value).toBe(String(expected));
+      },
+    );
+
+    it.each([
+      { typed: "2.3377", expected: 2.3377 },
+      { typed: "50", expected: 20 },
+    ])(
+      "commits typed $typed as $expected after the debounce delay",
+      ({ typed, expected }) => {
+        const { input, setValue } = renderNumber(
+          2.233_45,
+          { start: 1, stop: 20, step: 0.01 },
+          { debounce: true },
+        );
+        typeAndCommit(input, typed);
+        expect(setValue).not.toHaveBeenCalled();
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+        expect(setValue).toHaveBeenLastCalledWith(expected);
+        expect(input.value).toBe(String(expected));
+      },
+    );
+  });
 });