@marimo-team/islands 0.24.3-dev9 → 0.25.1-dev1

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/impl/vega/__tests__/make-selectable.test.ts

@@ -986,22 +986,15 @@ describe("makeSelectable", () => {
     expect(paramNames).toContain("legend_selection_Origin");
 
     // Nested specs should NOT have params (they should be hoisted)
-    if ("hconcat" in newSpec) {
-      for (const subSpec of newSpec.hconcat) {
-        if ("vconcat" in subSpec) {
-          invariant("vconcat" in subSpec, "subSpec should have vconcat");
-          for (const innerSpec of subSpec.vconcat) {
-            expect("params" in innerSpec).toBe(false);
-            // But should have opacity encoding
-            if ("mark" in innerSpec) {
-              expect(innerSpec.encoding?.opacity).toBeDefined();
-            }
-          }
-        } else if ("mark" in subSpec) {
-          expect(subSpec.params).toBeUndefined();
-          // But should have opacity encoding
-          expect(subSpec.encoding?.opacity).toBeDefined();
-        }
+    invariant("hconcat" in newSpec, "expected a horizontal concat spec");
+    for (const subSpec of newSpec.hconcat) {
+      const innerSpecs = "vconcat" in subSpec ? subSpec.vconcat : [subSpec];
+      for (const innerSpec of innerSpecs) {
+        expect(
+          "params" in innerSpec ? innerSpec.params : undefined,
+        ).toBeUndefined();
+        invariant("mark" in innerSpec, "expected a marked nested spec");
+        expect(innerSpec.encoding?.opacity).toBeDefined();
       }
     }
     expect(newSpec).toMatchSnapshot();
@@ -1045,10 +1038,9 @@ describe("makeSelectable", () => {
     expect(topLevelParamNames).toContain("select_interval");
 
     // Nested specs should not have params
-    if ("hconcat" in newSpec) {
-      for (const subSpec of newSpec.hconcat) {
-        expect("params" in subSpec).toBe(false);
-      }
+    invariant("hconcat" in newSpec, "expected a horizontal concat spec");
+    for (const subSpec of newSpec.hconcat) {
+      expect("params" in subSpec).toBe(false);
     }
     expect(newSpec).toMatchSnapshot();
     expect(parse(newSpec)).toBeDefined();
@@ -1085,12 +1077,11 @@ describe("makeSelectable", () => {
 
     // But chart selection params should NOT be hoisted (different types)
     // Bar gets point+interval with x encoding, area gets point with color encoding
-    if ("hconcat" in newSpec) {
-      const subspecParams = newSpec.hconcat.flatMap((subSpec) =>
-        "params" in subSpec ? subSpec.params : [],
-      );
-      expect(subspecParams.length).toBeGreaterThan(0);
-    }
+    invariant("hconcat" in newSpec, "expected a horizontal concat spec");
+    const subspecParams = newSpec.hconcat.flatMap((subSpec) =>
+      "params" in subSpec ? subSpec.params : [],
+    );
+    expect(subspecParams.length).toBeGreaterThan(0);
     expect(newSpec).toMatchSnapshot();
     expect(parse(newSpec)).toBeDefined();
   });
@@ -1120,13 +1111,12 @@ describe("makeSelectable", () => {
 
     // Chart selection params should NOT be hoisted (different encodings)
     // Point chart uses x,y encodings, arc chart uses color encoding
-    if ("hconcat" in newSpec) {
-      const subspecParams = newSpec.hconcat.flatMap((subSpec) =>
-        "params" in subSpec ? subSpec.params : [],
-      );
-      // Both subspecs should have their own params
-      expect(subspecParams.length).toBeGreaterThan(0);
-    }
+    invariant("hconcat" in newSpec, "expected a horizontal concat spec");
+    const subspecParams = newSpec.hconcat.flatMap((subSpec) =>
+      "params" in subSpec ? subSpec.params : [],
+    );
+    // Both subspecs should have their own params
+    expect(subspecParams.length).toBeGreaterThan(0);
     expect(newSpec).toMatchSnapshot();
     expect(parse(newSpec)).toBeDefined();
   });
@@ -1161,13 +1151,12 @@ describe("makeSelectable", () => {
 
     // But chart-specific params may or may not be hoisted depending on if they match
     // The point chart has x,y encodings, bar has x encoding - these differ
-    if ("hconcat" in newSpec) {
-      const subspecParams = newSpec.hconcat.flatMap((subSpec) =>
-        "params" in subSpec ? subSpec.params : [],
-      );
-      // Each subspec should have its own chart selection params
-      expect(subspecParams.length).toBeGreaterThan(0);
-    }
+    invariant("hconcat" in newSpec, "expected a horizontal concat spec");
+    const subspecParams = newSpec.hconcat.flatMap((subSpec) =>
+      "params" in subSpec ? subSpec.params : [],
+    );
+    // Each subspec should have its own chart selection params
+    expect(subspecParams.length).toBeGreaterThan(0);
     expect(newSpec).toMatchSnapshot();
     expect(parse(newSpec)).toBeDefined();
   });
@@ -1331,16 +1320,21 @@ describe("pan/zoom modifier key (issue #3812)", () => {
     const newSpec = makeSelectable(spec, {});
     const mod = getPanZoomModifier();
 
-    for (const param of newSpec.params ?? []) {
-      if (!("select" in param) || typeof param.select !== "object") {
-        continue;
-      }
-      const select = param.select as { on?: string; translate?: string };
+    const eventSelections = (newSpec.params ?? [])
+      .flatMap((param) =>
+        "select" in param && typeof param.select === "object"
+          ? [param.select as { on?: string; translate?: string }]
+          : [],
+      )
+      .filter(
+        (select): select is { on: string; translate?: string } =>
+          typeof select.on === "string" && select.on.includes("event."),
+      );
+    expect(eventSelections).not.toHaveLength(0);
+    for (const select of eventSelections) {
       // The selection gating and pan/zoom must agree on the modifier, otherwise
       // one gesture triggers both.
-      if (typeof select.on === "string" && select.on.includes("event.")) {
-        expect(select.on).toContain(`event.${mod}`);
-      }
+      expect(select.on).toContain(`event.${mod}`);
     }
   });
 });

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"]);
+  });
+});