@marimo-team/islands 0.24.3-dev5 → 0.24.3-dev52

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { ExtractAtomValue } from "jotai";
+import { isValidElement, type ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import { hasRunAnyCellAtom } from "@/components/editor/cell/useRunCells";
 import { userConfigAtom } from "@/core/config/config";
@@ -450,6 +452,191 @@ describe("wrapTooltipTargets", () => {
       </Tooltip>
     `);
   });
+
+  test("data-tooltip multiline via &#10; entity renders <br/>", () => {
+    const html =
+      '<span data-tooltip="Line A&#10;Line B&#10;Line C">hover</span>';
+    const result = parseHtml({ html });
+    expect(result).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              Line A
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line B
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line C
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="Line A
+      Line B
+      Line C"
+        >
+          hover
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("data-tooltip multiline via literal \\n renders <br/>", () => {
+    const html = '<span data-tooltip="Line A\nLine B">hover</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              Line A
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line B
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="Line A
+      Line B"
+        >
+          hover
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("data-tooltip single line still works as before", () => {
+    const html = '<span data-tooltip="Single line">hover</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content="Single line"
+      >
+        <span
+          data-tooltip="Single line"
+        >
+          hover
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test.each([
+    ["CRLF", "A\r\nB", '<span class="whitespace-pre-wrap">A<br/>B</span>'],
+    [
+      "encoded CRLF",
+      "A&#13;&#10;B",
+      '<span class="whitespace-pre-wrap">A<br/>B</span>',
+    ],
+    ["leading newline", "\nA", "A"],
+    ["trailing newline", "A\n", "A"],
+    [
+      "boundary newlines",
+      "\n\nA\nB\n\n",
+      '<span class="whitespace-pre-wrap">A<br/>B</span>',
+    ],
+    [
+      "boundary CRLF",
+      "&#13;&#10;A&#13;&#10;B&#13;&#10;",
+      '<span class="whitespace-pre-wrap">A<br/>B</span>',
+    ],
+    ["only newlines", "\n\n", ""],
+    ["only CRLF", "&#13;&#10;&#13;&#10;", ""],
+    [
+      "internal blank line",
+      "A\n\nB",
+      '<span class="whitespace-pre-wrap">A<br/><br/>B</span>',
+    ],
+    [
+      "spaces and tabs",
+      "\n A\t\n\tB \n",
+      '<span class="whitespace-pre-wrap"> A\t<br/>\tB </span>',
+    ],
+    [
+      "HTML text",
+      "&lt;b&gt;A&lt;/b&gt;\nB",
+      '<span class="whitespace-pre-wrap">&lt;b&gt;A&lt;/b&gt;<br/>B</span>',
+    ],
+  ])("data-tooltip handles %s", (_, content, expected) => {
+    const result = parseHtml({
+      html: `<span data-tooltip="${content}">Hover me</span>`,
+    });
+    if (!isValidElement<{ content: ReactNode }>(result)) {
+      throw new Error("Expected a Tooltip element");
+    }
+    expect(renderToStaticMarkup(result.props.content)).toBe(expected);
+  });
+
+  test("data-tooltip with newline renders as line breaks", () => {
+    const html = '<span data-tooltip="Line one\nLine two">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              Line one
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              Line two
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="Line one
+      Line two"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("data-tooltip with multiple newlines renders all as line breaks", () => {
+    const html = '<span data-tooltip="A\nB\nC">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content={
+          <span
+            className="whitespace-pre-wrap"
+          >
+            <React.Fragment>
+              A
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              B
+            </React.Fragment>
+            <React.Fragment>
+              <br />
+              C
+            </React.Fragment>
+          </span>
+        }
+      >
+        <span
+          data-tooltip="A
+      B
+      C"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
 });
 
 describe("parseHtml with < nad >", () => {

package/src/plugins/core/registerReactComponent.tsx

@@ -274,7 +274,6 @@ function PluginSlotInternal<T>(
       Objects.mapValues(hostElement.dataset, (value) =>
         typeof value === "string" ? parseAttrValue(value) : value,
       ),
-      hostElement.shadowRoot,
     );
   }
 

package/src/plugins/impl/FormPlugin.tsx

@@ -219,6 +219,8 @@ const Form = ({
   // The Form may be rendered before the child plugin is, so after mount
   // we lookup the plugin once again.
   useEffect(() => {
+    // TODO: Replace the post-mount registry lookup with reactive initialization.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- The child registry entry may not exist until after the parent mounts.
     setInternalValue(UI_ELEMENT_REGISTRY.lookupValue(elementId));
   }, [elementId]);
 

package/src/plugins/impl/MatrixPlugin.tsx

@@ -126,6 +126,8 @@ const MatrixComponent = ({
   // which avoids stale-state bugs when the matrix shape changes.
   const [draft, setDraft] = useState(value);
   useEffect(() => {
+    // TODO: Model the active draft without synchronizing state in an effect.
+    // oxlint-disable-next-line react/no-deriving-state-in-effects -- Synchronize the editable draft when the controlled value changes.
     setDraft(value);
   }, [value]);
   const displayValue = activeCell == null ? value : draft;

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -90,6 +90,8 @@ const RangeSliderComponent = ({
 
   // 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]);
 

package/src/plugins/impl/SliderPlugin.tsx

@@ -158,6 +158,8 @@ const SliderComponent = ({
   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]);
 

package/src/plugins/impl/data-editor/__tests__/glide-data-editor.test.tsx

@@ -6,31 +6,36 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { GlideDataEditor } from "../glide-data-editor";
 
-const capturedDataEditor = vi.hoisted(() => ({
-  ref: undefined as React.RefObject<HTMLElement> | undefined,
-  onCellEdited: undefined as
-    | ((cell: [number, number], value: { data: unknown }) => void)
-    | undefined,
-  onRowAppended: undefined as (() => void) | undefined,
-}));
+interface MockDataEditorProps {
+  portalElementRef?: React.RefObject<HTMLElement>;
+  onCellEdited?: (cell: [number, number], value: { data: unknown }) => void;
+  onRowAppended?: () => void;
+}
+
+const captureDataEditorProps = vi.hoisted(() =>
+  vi.fn<(props: MockDataEditorProps) => void>(),
+);
+
+const capturedDataEditor = {
+  get ref() {
+    return captureDataEditorProps.mock.lastCall?.[0].portalElementRef;
+  },
+  get onCellEdited() {
+    return captureDataEditorProps.mock.lastCall?.[0].onCellEdited;
+  },
+  get onRowAppended() {
+    return captureDataEditorProps.mock.lastCall?.[0].onRowAppended;
+  },
+};
 
 vi.mock("@glideapps/glide-data-grid", async () => {
   const React = await import("react");
   return {
     default: React.forwardRef(function MockDataEditor(
-      props: {
-        portalElementRef?: React.RefObject<HTMLElement>;
-        onCellEdited?: (
-          cell: [number, number],
-          value: { data: unknown },
-        ) => void;
-        onRowAppended?: () => void;
-      },
+      props: MockDataEditorProps,
       _ref: React.Ref<HTMLDivElement>,
     ) {
-      capturedDataEditor.ref = props.portalElementRef;
-      capturedDataEditor.onCellEdited = props.onCellEdited;
-      capturedDataEditor.onRowAppended = props.onRowAppended;
+      captureDataEditorProps(props);
       return <div data-testid="mock-data-editor" />;
     }),
     CompactSelection: {

package/src/plugins/impl/data-frames/panel.tsx

@@ -177,6 +177,7 @@ export const TransformPanel: React.FC<Props> = ({
   return (
     <ColumnInfoContext value={effectiveColumns}>
       <ColumnFetchValuesContext value={getColumnValues}>
+        {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Prevent Enter from submitting while using controls in the lazy form. */}
         <form
           onSubmit={(e) => e.preventDefault()}
           // When lazy, prevent Enter from submitting

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -41,7 +41,7 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
 
   const containerStyle: React.CSSProperties = {
     width: width || "100%",
-    height: height || (direction === "vertical" ? "400px" : "auto"),
+    height: height || "auto",
     maxWidth: "100%",
     // The slider derives its height entirely from its (loaded) images, so a
     // broken/slow-loading source would otherwise collapse it to nothing and

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -115,6 +115,21 @@ describe("ImageComparisonComponent", () => {
     }
   });
 
+  it.each(["horizontal", "vertical"] as const)(
+    "lets the container grow to the images when no height is given (%s)",
+    (direction) => {
+      const { container } = render(
+        <ImageComparisonComponent {...baseProps} direction={direction} />,
+      );
+
+      // A fixed height would crop tall images and leave the output's expand
+      // button with nothing to reveal.
+      const slider = container.querySelector("img-comparison-slider");
+      expect(slider).toBeTruthy();
+      expect(slider?.parentElement?.style.height).toBe("auto");
+    },
+  );
+
   it("leaves images unstyled when no dimensions are given", () => {
     const { getAllByAltText } = render(
       <ImageComparisonComponent {...baseProps} />,

package/src/plugins/layout/AccordionPlugin.tsx

@@ -23,6 +23,7 @@ interface Data {
    * Whether to allow multiple tabs to be open.
    */
   multiple: boolean;
+  expanded: string[];
 }
 
 export class AccordionPlugin implements IStatelessPlugin<Data> {
@@ -31,6 +32,7 @@ export class AccordionPlugin implements IStatelessPlugin<Data> {
   validator = z.object({
     labels: z.array(z.string()),
     multiple: z.boolean(),
+    expanded: z.array(z.string()).default([]),
   });
 
   render(props: IStatelessPluginProps<Data>): JSX.Element {
@@ -43,11 +45,14 @@ export class AccordionPlugin implements IStatelessPlugin<Data> {
 const AccordionComponent = ({
   labels,
   multiple,
+  expanded,
   children,
 }: PropsWithChildren<Data>): JSX.Element => {
-  const type = multiple ? "multiple" : "single";
+  const expansionProps = multiple
+    ? { type: "multiple" as const, defaultValue: expanded }
+    : { type: "single" as const, defaultValue: expanded[0], collapsible: true };
   return (
-    <Accordion type={type} className="text-muted-foreground" collapsible={true}>
+    <Accordion {...expansionProps} className="text-muted-foreground">
       {React.Children.map(children, (child, index) => {
         return (
           <AccordionItem key={index} value={index.toString()}>

package/src/plugins/layout/JsonOutputPlugin.tsx

@@ -2,7 +2,6 @@
 
 import type { JSX } from "react";
 import { z } from "zod";
-import { EmotionCacheProvider } from "../../components/editor/output/EmotionCacheProvider";
 import { JsonOutput } from "../../components/editor/output/JsonOutput";
 import type {
   IStatelessPlugin,
@@ -30,18 +29,16 @@ export class JsonOutputPlugin implements IStatelessPlugin<Data> {
     valueTypes: z.enum(["json", "python"]).default("python"),
   });
 
-  render({ data, host }: IStatelessPluginProps<Data>): JSX.Element {
+  render({ data }: IStatelessPluginProps<Data>): JSX.Element {
     // `false` defaults to no text label
     const name = data.name === undefined ? false : data.name || "";
     return (
-      <EmotionCacheProvider container={host.shadowRoot}>
-        <JsonOutput
-          data={data.jsonData}
-          format="auto"
-          valueTypes={data.valueTypes}
-          name={name}
-        />
-      </EmotionCacheProvider>
+      <JsonOutput
+        data={data.jsonData}
+        format="auto"
+        valueTypes={data.valueTypes}
+        name={name}
+      />
     );
   }
 }

package/src/plugins/layout/__test__/AccordionPlugin.test.tsx

@@ -0,0 +1,66 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { AccordionPlugin } from "../AccordionPlugin";
+
+const plugin = new AccordionPlugin();
+
+function renderAccordion(multiple: boolean, expanded?: string[]) {
+  return plugin.render({
+    host: document.createElement("marimo-accordion"),
+    data: plugin.validator.parse({
+      labels: ["Summary", "Details"],
+      multiple,
+      expanded,
+    }),
+    children: [
+      <p key="summary">Overview</p>,
+      <p key="details">More information</p>,
+    ],
+  });
+}
+
+describe("AccordionPlugin", () => {
+  afterEach(cleanup);
+
+  it.each([
+    { multiple: false, expanded: undefined, expected: ["false", "false"] },
+    { multiple: true, expanded: [], expected: ["false", "false"] },
+    { multiple: false, expanded: ["0"], expected: ["true", "false"] },
+    { multiple: false, expanded: ["1"], expected: ["false", "true"] },
+    { multiple: true, expanded: ["0", "1"], expected: ["true", "true"] },
+  ])(
+    "sets initial expansion: $multiple, $expanded",
+    ({ multiple, expanded, expected }) => {
+      const { getAllByRole } = render(renderAccordion(multiple, expanded));
+      expect(
+        getAllByRole("button").map((button) =>
+          button.getAttribute("aria-expanded"),
+        ),
+      ).toEqual(expected);
+    },
+  );
+
+  it("lets users collapse and switch the initially expanded item", () => {
+    const { getAllByRole, rerender } = render(renderAccordion(false, ["1"]));
+    const [summary, details] = getAllByRole("button");
+    fireEvent.click(details);
+    expect(details.getAttribute("aria-expanded")).toBe("false");
+    rerender(renderAccordion(false, ["1"]));
+    expect(details.getAttribute("aria-expanded")).toBe("false");
+    fireEvent.click(details);
+    fireEvent.click(summary);
+    expect(
+      [summary, details].map((button) => button.getAttribute("aria-expanded")),
+    ).toEqual(["true", "false"]);
+  });
+
+  it("lets users collapse items independently with multiple enabled", () => {
+    const { getAllByRole } = render(renderAccordion(true, ["0", "1"]));
+    const [summary, details] = getAllByRole("button");
+    fireEvent.click(summary);
+    expect(
+      [summary, details].map((button) => button.getAttribute("aria-expanded")),
+    ).toEqual(["false", "true"]);
+  });
+});