@marimo-team/frontend 0.24.3-dev1 → 0.24.3-dev13

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