@marimo-team/islands 0.25.3-dev51 → 0.25.3-dev55

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
-import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { type JSX, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
   FILE_ICON as FILE_TYPE_ICONS,
@@ -16,6 +16,7 @@ import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
 import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
 import { type FilePath, PathBuilder, Paths } from "@/utils/paths";
@@ -200,7 +201,6 @@ export const FileBrowser = ({
 }: FileBrowserProps): JSX.Element | null => {
   const [path, setPath] = useInternalStateWithSync(initialPath);
   const [isUpdatingPath, setIsUpdatingPath] = useState(false);
-  const [showLoadingOverlay, setShowLoadingOverlay] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
   const gridRef = useRef<HTMLTableElement | null>(null);
@@ -219,20 +219,8 @@ export const FileBrowser = ({
     return list_directory({ path: path });
   }, [path, randomId, list_directory]);
 
-  useEffect(() => {
-    if (!isPending) {
-      setShowLoadingOverlay(false);
-      return;
-    }
-
-    const timeout = window.setTimeout(() => {
-      setShowLoadingOverlay(true);
-    }, 200);
-
-    return () => {
-      window.clearTimeout(timeout);
-    };
-  }, [isPending]);
+  const loadingDelayElapsed = useDelayElapsed(isPending ? 200 : 0);
+  const showLoadingOverlay = isPending && loadingDelayElapsed;
 
   // Reset the roving tabindex whenever the listing reloads (a new path or a
   // same-path refresh) so activeIndex never points past the current rows.

package/src/plugins/impl/SliderPlugin.tsx

@@ -1,8 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useEffect, useId, useMemo, useState } from "react";
+import { type JSX, useId, useMemo } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
+import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
 import { clamp } from "@/utils/math";
 import {
@@ -156,13 +157,10 @@ const SliderComponent = ({
   const { locale } = useLocale();
 
   // Hold internal value
-  const [internalValue, setInternalValue] = useState(value);
-  // Update internal value on prop change
-  useEffect(() => {
-    // TODO: Replace this synchronization with a controlled-state primitive.
-    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable buffer when the controlled value changes.
-    setInternalValue(value);
-  }, [value]);
+  const [internalValue, setInternalValue] = useInternalStateWithSync(
+    value,
+    Object.is,
+  );
 
   const stepsConfig = useMemo(() => computeStepsConfig(steps), [steps]);
 

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

@@ -12,11 +12,13 @@ import {
   waitFor,
 } 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 +465,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 +540,120 @@ describe("static notebook control suppression", () => {
     mockIsStatic.mockReturnValue(false);
   });
 
+  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__/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,

package/src/plugins/impl/chat/__tests__/chat-prompts.test.tsx

@@ -0,0 +1,93 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ComponentProps } from "react";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import type { PopoverContent } from "@/components/ui/popover";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { Chatbot } from "../chat-ui";
+
+vi.mock("@/components/editor/ai/add-cell-with-ai", () => ({
+  PromptInput: ({ value }: { value: string }) => (
+    <textarea aria-label="Chat prompt" value={value} readOnly={true} />
+  ),
+}));
+
+vi.mock("@/components/ui/popover", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@/components/ui/popover")>();
+  return {
+    ...actual,
+    // Keep the form mounted when the prompt menu takes focus so this tests
+    // the prompt reset rather than the overlay's incidental unmount.
+    PopoverContent: (props: ComponentProps<typeof PopoverContent>) => (
+      <actual.PopoverContent
+        {...props}
+        onInteractOutside={(event) => event.preventDefault()}
+      />
+    ),
+  };
+});
+
+describe("chat prompt variables", () => {
+  const originalScrollTo = HTMLElement.prototype.scrollTo;
+  beforeAll(() => {
+    HTMLElement.prototype.scrollTo = vi.fn();
+  });
+  afterAll(() => {
+    HTMLElement.prototype.scrollTo = originalScrollTo;
+  });
+
+  it("clears entered values and replaces the fields when selecting another prompt", async () => {
+    const firstPrompt = "Tell {{name}} about {{topic}}";
+    const secondPrompt = "Send {{name}} to {{destination}}";
+    render(
+      <TooltipProvider>
+        <Chatbot
+          prompts={[firstPrompt, secondPrompt]}
+          config={{
+            max_tokens: null,
+            temperature: null,
+            top_p: null,
+            top_k: null,
+            frequency_penalty: null,
+            presence_penalty: null,
+          }}
+          showConfigurationControls={false}
+          maxHeight={undefined}
+          allowAttachments={false}
+          disabled={false}
+          value={[]}
+          setValue={vi.fn()}
+          host={document.createElement("div")}
+          get_chat_history={vi.fn().mockResolvedValue({ messages: [] })}
+          delete_chat_history={vi.fn().mockResolvedValue(null)}
+          delete_chat_message={vi.fn().mockResolvedValue(null)}
+          send_prompt={vi.fn().mockResolvedValue(null)}
+          cancel_prompt={vi.fn().mockResolvedValue(null)}
+        />
+      </TooltipProvider>,
+    );
+
+    const promptMenu = screen.getByRole("button", { expanded: false });
+    fireEvent.keyDown(promptMenu, { key: "ArrowDown" });
+    fireEvent.click(await screen.findByRole("menuitem", { name: firstPrompt }));
+    fireEvent.change(await screen.findByLabelText("name"), {
+      target: { value: "Ada" },
+    });
+    fireEvent.change(screen.getByLabelText("topic"), {
+      target: { value: "Python" },
+    });
+    expect(screen.getByRole("button", { name: "Submit" })).toBeEnabled();
+
+    fireEvent.keyDown(promptMenu, { key: "ArrowDown" });
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: secondPrompt }),
+    );
+
+    expect(await screen.findByLabelText("destination")).toHaveValue("");
+    expect(screen.getByLabelText("name")).toHaveValue("");
+    expect(screen.queryByLabelText("topic")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Submit" })).toBeDisabled();
+  });
+});

package/src/plugins/impl/chat/chat-ui.tsx

@@ -24,7 +24,7 @@ import {
   Trash2Icon,
   X,
 } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
   describeChatAbortReason,
@@ -163,7 +163,9 @@ export const Chatbot: React.FC<Props> = (props) => {
 
   // Use a ref to avoid stale closure in the fetch callback
   const configRef = useRef<ChatConfig>(config);
-  configRef.current = config;
+  useLayoutEffect(() => {
+    configRef.current = config;
+  }, [config]);
 
   // For frontend-managed streaming, create a controller to enqueue chunks to.
   const frontendStreamControllerRef =
@@ -411,9 +413,8 @@ export const Chatbot: React.FC<Props> = (props) => {
     });
   }, [messages.length, scrollContainerRef]);
 
-  const codemirrorView = codeMirrorInputRef.current?.view;
-
   const resetInput = () => {
+    const codemirrorView = codeMirrorInputRef.current?.view;
     // Clear input immediately by directly manipulating the editor
     // There is some delay if we use setInput("") only
     if (codemirrorView) {
@@ -566,6 +567,7 @@ export const Chatbot: React.FC<Props> = (props) => {
             onSelect={(prompt) => {
               setInput(prompt);
               requestAnimationFrame(() => {
+                const codemirrorView = codeMirrorInputRef.current?.view;
                 codemirrorView?.focus();
                 moveToEndOfEditor(codemirrorView);
               });
@@ -862,6 +864,7 @@ const PromptsPopover: React.FC<{
 
       <PopoverContent side="right" align="end" className="min-w-80 px-2">
         <PromptVariablesForm
+          key={selectedPrompt}
           prompt={selectedPrompt}
           onClose={() => setIsPopoverOpen(false)}
           onSelect={onSelect}
@@ -876,9 +879,7 @@ const PromptVariablesForm: React.FC<{
   onClose: () => void;
   onSelect: (prompt: string) => void;
 }> = ({ prompt, onClose, onSelect }) => {
-  const [variables, setVariables] = useState<{ [key: string]: string }>({});
-
-  useEffect(() => {
+  const [variables, setVariables] = useState<{ [key: string]: string }>(() => {
     const variableRegex = /{{(\w+)}}/g;
     const matches = [...prompt.matchAll(variableRegex)];
     const initialVariables = matches.reduce<{ [key: string]: string }>(
@@ -888,8 +889,8 @@ const PromptVariablesForm: React.FC<{
       },
       {},
     );
-    setVariables(initialVariables);
-  }, [prompt]);
+    return initialVariables;
+  });
 
   const handleVariableChange = (variable: string, value: string) => {
     setVariables((prev) => ({ ...prev, [variable]: value }));