@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev201

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

@@ -10,13 +10,16 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from "@testing-library/react";
 import { Provider } from "jotai";
+import { useState } from "react";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import type { DownloadAsFunction } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { store } from "@/core/state/jotai";
+import { Deferred } from "@/utils/Deferred";
 import {
   type GetDataUrl,
   type GetRowIds,
@@ -463,7 +466,7 @@ describe("LoadingDataTableComponent", () => {
   });
 });
 
-describe("static notebook control suppression", () => {
+describe("table pagination and static notebook control suppression", () => {
   const fieldTypes: FieldTypesWithExternalType = [
     ["id", ["integer", "integer"]],
     ["name", ["string", "string"]],
@@ -538,6 +541,389 @@ describe("static notebook control suppression", () => {
     mockIsStatic.mockReturnValue(false);
   });
 
+  it("preserves the preview banner for ordinary paginated tables with unknown totals", async () => {
+    const props = makeProps();
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent {...props} totalRows="too_many" />
+      </Wrapper>,
+    );
+    expect(
+      await screen.findByText("Previewing the first 10 rows."),
+    ).toBeInTheDocument();
+  });
+
+  it("pages lazy results with unknown totals and resets search, sorting, and filters to page one", async () => {
+    const props = makeProps();
+    const search = vi
+      .fn()
+      .mockImplementation(
+        async (request: {
+          page_number: number;
+          query?: string;
+          sort?: { by: string; descending: boolean }[];
+        }) => ({
+          data: [
+            { id: request.page_number + 1, name: request.query || "item" },
+          ],
+          total_rows: "too_many",
+          has_next_page: request.page_number === 0,
+        }),
+      );
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...props}
+          lazy={true}
+          totalRows="too_many"
+          selection={null}
+          showColumnSummaries={false}
+          search={search}
+        />
+      </Wrapper>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    expect(screen.getByText("Unknown, 2 columns")).toBeInTheDocument();
+    expect(screen.queryByTestId("last-page-button")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Previewing the first/)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    fireEvent.click(screen.getByTestId("previous-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    fireEvent.change(screen.getByPlaceholderText("Search..."), {
+      target: { value: "new" },
+    });
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({ query: "new", page_number: 0 }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    fireEvent.click(
+      within(screen.getByRole("columnheader", { name: /name/ })).getByRole(
+        "button",
+        { name: "Sort column ascending" },
+      ),
+    );
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({
+          page_number: 0,
+          sort: [{ by: "name", descending: false }],
+        }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    const columnMenu = within(
+      screen.getByRole("columnheader", { name: /name/ }),
+    ).getByRole("button", { name: "Column options" });
+    fireEvent.keyDown(columnMenu, { key: "Enter" });
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Filter" }));
+    fireEvent.change(screen.getByPlaceholderText("Text…"), {
+      target: { value: "item" },
+    });
+    fireEvent.click(screen.getByLabelText("Apply filter"));
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({
+          page_number: 0,
+          filters: expect.objectContaining({ children: expect.any(Array) }),
+        }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+  });
+
+  it.each(["success", "error"] as const)(
+    "ignores a stale lazy page %s after the query changes",
+    async (outcome) => {
+      const props = makeProps();
+      const initial = {
+        data: [{ id: 1, name: "initial-page" }],
+        total_rows: "too_many" as const,
+        has_next_page: true,
+      };
+      const oldPage = new Deferred<typeof initial>();
+      const newQuery = new Deferred<typeof initial>();
+      const search = vi
+        .fn()
+        .mockResolvedValueOnce(initial)
+        .mockReturnValueOnce(oldPage.promise)
+        .mockReturnValueOnce(newQuery.promise);
+      render(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...props}
+            lazy={true}
+            totalRows="too_many"
+            selection={null}
+            showColumnSummaries={false}
+            search={search}
+          />
+        </Wrapper>,
+      );
+      await screen.findByText("initial-page");
+      fireEvent.click(screen.getByTestId("next-page-button"));
+      await waitFor(() =>
+        expect(search).toHaveBeenLastCalledWith(
+          expect.objectContaining({ page_number: 1 }),
+        ),
+      );
+      expect(screen.getByTestId("next-page-button")).toBeDisabled();
+
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "current" },
+      });
+      await waitFor(() =>
+        expect(search).toHaveBeenLastCalledWith(
+          expect.objectContaining({ query: "current", page_number: 0 }),
+        ),
+      );
+      await act(async () => {
+        newQuery.resolve({
+          data: [{ id: 2, name: "latest-page" }],
+          total_rows: "too_many",
+          has_next_page: false,
+        });
+      });
+      await screen.findByText("latest-page");
+
+      await act(async () => {
+        if (outcome === "success") {
+          oldPage.resolve({
+            ...initial,
+            data: [{ id: 3, name: "stale-result" }],
+          });
+        } else {
+          oldPage.reject(new Error("stale-page-error"));
+        }
+      });
+      expect(screen.getByText("latest-page")).toBeInTheDocument();
+      expect(screen.queryByText("stale-result")).not.toBeInTheDocument();
+      expect(screen.queryByText("stale-page-error")).not.toBeInTheDocument();
+      expect(screen.getByTestId("previous-page-button")).toBeDisabled();
+      expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    },
+  );
+
+  it("recovers from a failed lazy page by navigating back", async () => {
+    const props = makeProps();
+    const initial = {
+      data: [{ id: 1, name: "initial-page" }],
+      total_rows: "too_many" as const,
+      has_next_page: true,
+    };
+    const failedPage = new Deferred<typeof initial>();
+    const search = vi
+      .fn()
+      .mockResolvedValueOnce(initial)
+      .mockReturnValueOnce(failedPage.promise)
+      .mockResolvedValueOnce({
+        ...initial,
+        data: [{ id: 1, name: "recovered-page" }],
+      })
+      .mockResolvedValueOnce({
+        ...initial,
+        data: [{ id: 2, name: "last-page" }],
+        has_next_page: false,
+      });
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...props}
+          lazy={true}
+          totalRows="too_many"
+          selection={null}
+          showColumnSummaries={false}
+          search={search}
+        />
+      </Wrapper>,
+    );
+    await screen.findByText("initial-page");
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    expect(screen.getByText("initial-page")).toBeInTheDocument();
+    await act(async () => {
+      failedPage.reject(new Error("page-fetch-failed"));
+    });
+    await screen.findByText("page-fetch-failed");
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    expect(screen.getByTestId("previous-page-button")).toBeEnabled();
+
+    fireEvent.click(screen.getByTestId("previous-page-button"));
+    await screen.findByText("recovered-page");
+    expect(search).toHaveBeenLastCalledWith(
+      expect.objectContaining({ page_number: 0 }),
+    );
+    expect(screen.queryByText("page-fetch-failed")).not.toBeInTheDocument();
+    expect(screen.getByTestId("next-page-button")).toBeEnabled();
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await screen.findByText("last-page");
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+  });
+
+  it("requests only the first page with the new configured page size", async () => {
+    const props = makeProps();
+    const view = (pageSize: number) => (
+      <Wrapper>
+        <LoadingDataTableComponent {...props} pageSize={pageSize} />
+      </Wrapper>
+    );
+    const { rerender } = render(view(PAGE_SIZE));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1, page_size: PAGE_SIZE }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    props.search.mockClear();
+
+    rerender(view(5));
+    await waitFor(() => expect(props.search).toHaveBeenCalled());
+    expect(
+      props.search.mock.calls.every(
+        ([request]) => request.page_number === 0 && request.page_size === 5,
+      ),
+    ).toBe(true);
+  });
+
+  it("preserves a new page size when a pending response changes the row count in the same batch", async () => {
+    const props = makeProps();
+    const Harness = () => {
+      const [pageSize, setPageSize] = useState(PAGE_SIZE);
+      return (
+        <Wrapper>
+          <button type="button" onClick={() => setPageSize(5)}>
+            Change configured page size
+          </button>
+          <LoadingDataTableComponent {...props} pageSize={pageSize} />
+        </Wrapper>
+      );
+    };
+    render(<Harness />);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    const response = {
+      data: firstPage,
+      total_rows: 25,
+      cell_styles: null,
+      cell_hover_texts: null,
+    };
+    const pendingPage = new Deferred<typeof response>();
+    props.search.mockReturnValueOnce(pendingPage.promise);
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1, page_size: PAGE_SIZE }),
+      ),
+    );
+    props.search.mockClear();
+
+    await act(async () => {
+      pendingPage.resolve(response);
+      // Settle the table-loading promises without committing the queued render.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      fireEvent.click(
+        screen.getByRole("button", { name: "Change configured page size" }),
+      );
+    });
+
+    await waitFor(() => expect(props.search).toHaveBeenCalled());
+    expect(props.search).toHaveBeenLastCalledWith(
+      expect.objectContaining({ page_number: 0, page_size: 5 }),
+    );
+  });
+
+  it("returns to the first page when a refreshed result changes the row count", async () => {
+    const props = makeProps();
+    const view = () => (
+      <Wrapper>
+        <LoadingDataTableComponent {...props} />
+      </Wrapper>
+    );
+    const { rerender } = render(view());
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    props.search = vi.fn().mockResolvedValue({
+      data: firstPage,
+      total_rows: 25,
+      cell_styles: null,
+      cell_hover_texts: null,
+    });
+
+    rerender(view());
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 0, page_size: PAGE_SIZE }),
+      ),
+    );
+  });
+
   it("renders kernel-dependent controls in normal mode", async () => {
     const props = makeProps();
     render(

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  act,
   fireEvent,
   render,
   screen,
@@ -88,6 +89,50 @@ beforeAll(() => {
 });
 
 describe("FileBrowserPlugin session cache recovery", () => {
+  it("delays the initial loading overlay and hides it when listing completes", async () => {
+    vi.useFakeTimers();
+    try {
+      let resolveListing: (value: {
+        files: MockFile[];
+        total_count: number;
+        is_truncated: boolean;
+      }) => void = () => undefined;
+      const listDirectory = vi.fn(
+        () =>
+          new Promise((resolve) => {
+            resolveListing = resolve;
+          }),
+      );
+      const { unmount } = renderBrowser({ list_directory: listDirectory });
+
+      await act(async () => {
+        vi.advanceTimersByTime(199);
+      });
+      expect(screen.queryByText("Listing files...")).not.toBeInTheDocument();
+      await act(async () => {
+        vi.advanceTimersByTime(1);
+      });
+      expect(screen.getByText("Listing files...")).toBeInTheDocument();
+
+      await act(async () => {
+        resolveListing({
+          files: FILES,
+          total_count: FILES.length,
+          is_truncated: false,
+        });
+      });
+      expect(screen.queryByText("Listing files...")).not.toBeInTheDocument();
+      expect(screen.getByText("docs")).toBeInTheDocument();
+      await act(async () => {
+        vi.advanceTimersByTime(200);
+      });
+      expect(screen.queryByText("Listing files...")).not.toBeInTheDocument();
+      unmount();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it("retries a failed cached listing when the plugin resets", async () => {
     const host = document.createElement("marimo-file-browser");
     const wrapper = document.createElement("marimo-ui-element");

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

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import type { IPluginProps } from "../../types";
+import { RangeSliderPlugin } from "../RangeSliderPlugin";
+
+vi.mock("@/components/ui/range-slider", () => ({
+  RangeSlider: () => <div data-testid="range-slider" />,
+}));
+
+vi.mock("react-aria", () => ({
+  useLocale: () => ({ locale: "en-US" }),
+}));
+
+describe("RangeSliderPlugin", () => {
+  type PluginProps = IPluginProps<
+    number[],
+    z.infer<typeof RangeSliderPlugin.prototype.validator>
+  >;
+
+  const createProps = (
+    value: number[],
+    data: Partial<PluginProps["data"]> = {},
+  ): PluginProps => ({
+    host: document.createElement("div"),
+    value,
+    setValue: vi.fn(),
+    data: {
+      initialValue: value,
+      label: null,
+      start: 0,
+      stop: 10,
+      step: 0.01,
+      steps: null,
+      debounce: false,
+      orientation: "horizontal",
+      showValue: true,
+      fullWidth: true,
+      disabled: false,
+      ...data,
+    },
+    functions: {},
+  });
+
+  it("rounds floating-point artifacts in the displayed range", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.2, 1.500000000000001]);
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.2, 1.5")).toBeDefined();
+  });
+
+  it("preserves precision from finer-grained steps", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.234, 1.235000000000001], { step: 0.001 });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.234, 1.235")).toBeDefined();
+  });
+
+  it("retains value precision when no step is supplied", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.2345, 1.500000000000001], {
+      step: undefined,
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.2345, 1.5")).toBeDefined();
+  });
+
+  it("preserves precision for small displayed values", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0.00123, 0.0012400000000000002], {
+      stop: 0.01,
+      step: 0.00001,
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.23e-3, 1.24e-3")).toBeDefined();
+  });
+
+  it("infers precision from custom steps", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0, 1], {
+      stop: 2,
+      step: undefined,
+      steps: [1, 1.234, 2],
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1, 1.234")).toBeDefined();
+  });
+
+  it("preserves decimals from the slider origin", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0.5, 1.5], { start: 0.5, stop: 10, step: 1 });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("0.5, 1.5")).toBeDefined();
+  });
+});

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

@@ -212,6 +212,28 @@ describe("SliderPlugin", () => {
     expect(setValue).toHaveBeenCalledWith(9);
   });
 
+  it("preserves an uncommitted drag until the controlled value changes", () => {
+    const plugin = new SliderPlugin();
+    const setValue = vi.fn();
+    const props = createProps({
+      debounce: true,
+      includeInput: false,
+      setValue,
+    });
+    const { getByRole, rerender } = render(plugin.render(props));
+
+    fireEvent.click(getByRole("button", { name: "Slider change" }));
+    rerender(
+      plugin.render({ ...props, data: { ...props.data, label: "Updated" } }),
+    );
+    fireEvent.click(getByRole("button", { name: "Slider commit" }));
+    expect(setValue).toHaveBeenLastCalledWith(6);
+
+    rerender(plugin.render({ ...props, value: 2 }));
+    fireEvent.click(getByRole("button", { name: "Slider commit" }));
+    expect(setValue).toHaveBeenLastCalledWith(2);
+  });
+
   describe("editable input with steps (regression for #9850)", () => {
     it("displays the actual step value, not the index", () => {
       const plugin = new SliderPlugin();
@@ -381,9 +403,8 @@ describe("SliderPlugin", () => {
         vi.advanceTimersByTime(0);
       });
 
-      // Shrink `steps` so the held index (4) is now out of range. The index
-      // syncs in an effect after this render, so the render must not throw on
-      // the stale, out-of-range index.
+      // Shrink `steps` so the held index (4) is now out of range. Updating
+      // the controlled index must render the new valid step without throwing.
       const shrunkProps = createStepsProps({
         steps: [10, 20],
         valueIndex: 1,