@marimo-team/islands 0.23.7-dev9 → 0.23.7

package/src/plugins/impl/TabsPlugin.tsx

@@ -7,6 +7,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "../../components/ui/tabs";
+import { cn } from "../../utils/cn";
 import { renderHTML } from "../core/RenderHTML";
 import type { IPlugin, IPluginProps } from "../types";
 import { Labeled } from "./common/labeled";
@@ -17,6 +18,7 @@ interface Data {
    */
   tabs: string[];
   label: string | null;
+  orientation: "horizontal" | "vertical";
 }
 
 // Selected tab index
@@ -28,6 +30,7 @@ export class TabsPlugin implements IPlugin<T, Data> {
   validator = z.object({
     tabs: z.array(z.string()),
     label: z.string().nullable(),
+    orientation: z.enum(["horizontal", "vertical"]).default("horizontal"),
   });
 
   render(props: IPluginProps<T, Data>): JSX.Element {
@@ -51,6 +54,7 @@ interface TabComponentProps extends Data {
 const TabComponent = ({
   tabs,
   label,
+  orientation,
   value,
   setValue,
   children,
@@ -70,19 +74,43 @@ const TabComponent = ({
     setInternalValue(value);
   }
 
+  const isVertical = orientation === "vertical";
+  const childArray =
+    children == null ? [] : Array.isArray(children) ? children : [children];
+
   return (
-    <Labeled label={label} align="top">
-      <Tabs value={internalValue} onValueChange={handleChange}>
-        <TabsList>
+    <Labeled label={label} align="top" fullWidth={true}>
+      <Tabs
+        value={internalValue}
+        onValueChange={handleChange}
+        orientation={orientation}
+        className={cn(isVertical && "flex flex-row gap-3")}
+      >
+        <TabsList
+          className={cn(
+            "scrollbar-thin",
+            isVertical
+              ? "flex flex-col items-stretch justify-start h-auto max-h-none shrink-0 min-w-[10rem] overflow-y-auto"
+              : "max-w-full overflow-x-auto justify-start",
+          )}
+        >
           {tabs.map((tab, index) => (
-            <TabsTrigger key={index} value={index.toString()}>
+            <TabsTrigger
+              key={index}
+              value={index.toString()}
+              className={cn(isVertical && "w-full justify-start")}
+            >
               {renderHTML({ html: tab })}
             </TabsTrigger>
           ))}
         </TabsList>
-        {React.Children.map(children, (child, index) => {
-          return <TabsContent value={index.toString()}>{child}</TabsContent>;
-        })}
+        <div className={cn(isVertical && "flex-1 min-w-0")}>
+          {childArray.map((child, index) => (
+            <TabsContent key={index} value={index.toString()}>
+              {child}
+            </TabsContent>
+          ))}
+        </div>
       </Tabs>
     </Labeled>
   );

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

@@ -36,6 +36,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: true,
           initialValue: [],
+          disabled: false,
         },
         value: [],
         setValue: vi.fn(),
@@ -48,6 +49,58 @@ describe("DropdownPlugin", () => {
       ).toBeInTheDocument();
     });
 
+    it("renders disabled native select when disabled is true", () => {
+      const plugin = new DropdownPlugin();
+      const host = document.createElement("div");
+      const props: IPluginProps<
+        string[],
+        z.infer<(typeof plugin)["validator"]>
+      > = {
+        data: {
+          label: "Test Label",
+          options: ["Option 1", "Option 2"],
+          allowSelectNone: false,
+          fullWidth: false,
+          searchable: false,
+          disabled: true,
+          initialValue: [],
+        },
+        value: [],
+        setValue: vi.fn(),
+        host,
+        functions: {},
+      };
+      render(plugin.render(props));
+      expect(screen.getByTestId("marimo-plugin-dropdown")).toBeDisabled();
+    });
+
+    it("renders disabled searchable combobox with aria-disabled", () => {
+      const plugin = new DropdownPlugin();
+      const host = document.createElement("div");
+      const props: IPluginProps<
+        string[],
+        z.infer<(typeof plugin)["validator"]>
+      > = {
+        data: {
+          label: "Test Label",
+          options: ["Option 1", "Option 2"],
+          allowSelectNone: false,
+          fullWidth: false,
+          searchable: true,
+          disabled: true,
+          initialValue: [],
+        },
+        value: [],
+        setValue: vi.fn(),
+        host,
+        functions: {},
+      };
+      render(plugin.render(props));
+      const trigger = screen.getByTestId("marimo-plugin-searchable-dropdown")
+        .firstChild as HTMLElement;
+      expect(trigger).toHaveAttribute("aria-disabled", "true");
+    });
+
     it("renders default dropdown when searchable is false", () => {
       const plugin = new DropdownPlugin();
       const host = document.createElement("div");
@@ -62,6 +115,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: false,
           initialValue: [],
+          disabled: false,
         },
         value: [],
         setValue: vi.fn(),
@@ -87,6 +141,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: true,
           initialValue: [],
+          disabled: false,
         },
         value: [],
         setValue,
@@ -129,6 +184,7 @@ describe("DropdownPlugin", () => {
           fullWidth: false,
           searchable: true,
           initialValue: [],
+          disabled: false,
         },
         value: ["Apple"],
         setValue,

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

@@ -0,0 +1,154 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import type { IPluginProps } from "../../types";
+import { TabsPlugin } from "../TabsPlugin";
+
+describe("TabsPlugin", () => {
+  beforeAll(() => {
+    store.set(initialModeAtom, "edit");
+  });
+
+  const renderPlugin = (
+    data: z.input<TabsPlugin["validator"]>,
+    initialValue = "0",
+  ) => {
+    const plugin = new TabsPlugin();
+    const host = document.createElement("div");
+    const setValue = vi.fn();
+    const children = [
+      <span key="0">Content 0</span>,
+      <span key="1">Content 1</span>,
+      <span key="2">Content 2</span>,
+    ];
+    const makeProps = (
+      value: string,
+    ): IPluginProps<string, z.infer<TabsPlugin["validator"]>> => ({
+      data: plugin.validator.parse(data),
+      value,
+      setValue,
+      host,
+      functions: {},
+      children,
+    });
+    const result = render(plugin.render(makeProps(initialValue)));
+    return {
+      ...result,
+      setValue,
+      rerenderWithValue: (newValue: string) =>
+        result.rerender(plugin.render(makeProps(newValue))),
+    };
+  };
+
+  it("renders all tab triggers", () => {
+    renderPlugin({
+      tabs: ["First", "Second", "Third"],
+      label: null,
+    });
+    expect(screen.getByRole("tab", { name: "First" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Second" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Third" })).toBeInTheDocument();
+  });
+
+  it("supports vertical orientation", () => {
+    renderPlugin({
+      tabs: ["First", "Second"],
+      label: null,
+      orientation: "vertical",
+    });
+    const tablist = screen.getByRole("tablist");
+    expect(tablist).toHaveAttribute("data-orientation", "vertical");
+    expect(tablist.className).toMatch(/flex-col/);
+    // Horizontal scroll classes should not be applied in vertical mode.
+    expect(tablist.className).not.toMatch(/overflow-x-auto/);
+  });
+
+  it("falls back to horizontal when orientation is omitted (back-compat)", () => {
+    // Older Python kernels won't send `orientation` — make sure the validator
+    // defaults it so the frontend keeps working.
+    const plugin = new TabsPlugin();
+    const parsed = plugin.validator.parse({
+      tabs: ["First"],
+      label: null,
+    });
+    expect(parsed.orientation).toBe("horizontal");
+  });
+
+  it("selects the tab matching the initial value", () => {
+    renderPlugin({ tabs: ["First", "Second", "Third"], label: null }, "1");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-state", "inactive");
+    expect(tabs[1]).toHaveAttribute("data-state", "active");
+    expect(tabs[2]).toHaveAttribute("data-state", "inactive");
+  });
+
+  it("defaults to the first tab when value is empty", () => {
+    renderPlugin({ tabs: ["First", "Second"], label: null }, "");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-state", "active");
+    expect(tabs[1]).toHaveAttribute("data-state", "inactive");
+  });
+
+  it("calls setValue with the clicked tab's index", () => {
+    const { setValue } = renderPlugin({
+      tabs: ["First", "Second", "Third"],
+      label: null,
+    });
+    // Radix Tabs' trigger reacts to mousedown (left button), not click —
+    // see https://github.com/radix-ui/primitives/blob/main/packages/react/tabs/src/Tabs.tsx
+    fireEvent.mouseDown(screen.getByRole("tab", { name: "Third" }), {
+      button: 0,
+    });
+    expect(setValue).toHaveBeenCalledWith("2");
+  });
+
+  it("syncs selection when value is updated externally", () => {
+    const { rerenderWithValue } = renderPlugin(
+      { tabs: ["First", "Second", "Third"], label: null },
+      "0",
+    );
+    expect(screen.getAllByRole("tab")[0]).toHaveAttribute(
+      "data-state",
+      "active",
+    );
+
+    rerenderWithValue("2");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-state", "inactive");
+    expect(tabs[2]).toHaveAttribute("data-state", "active");
+  });
+
+  it("renders HTML in tab labels via renderHTML", () => {
+    renderPlugin({
+      tabs: ["<strong>Bold</strong>", "Plain"],
+      label: null,
+    });
+    const boldTab = screen.getByRole("tab", { name: "Bold" });
+    // The label markup is preserved (not escaped as text), so the trigger
+    // contains a real <strong> element.
+    expect(boldTab.querySelector("strong")).not.toBeNull();
+  });
+
+  it("renders no tabpanels when tabs and children are empty", () => {
+    // When the Python side passes `tabs={}`, slotted HTML is empty and the
+    // resulting React children are null/undefined. We should render zero
+    // `TabsContent`s — not a stray one paired to a non-existent trigger.
+    const plugin = new TabsPlugin();
+    const host = document.createElement("div");
+    const props: IPluginProps<string, z.infer<TabsPlugin["validator"]>> = {
+      data: plugin.validator.parse({ tabs: [], label: null }),
+      value: "",
+      setValue: vi.fn(),
+      host,
+      functions: {},
+      children: null,
+    };
+    render(plugin.render(props));
+    expect(screen.queryAllByRole("tab")).toHaveLength(0);
+    expect(screen.queryAllByRole("tabpanel")).toHaveLength(0);
+  });
+});

package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap

@@ -27,11 +27,12 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_27_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_26_-form-item"
             type="button"
@@ -58,7 +59,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -82,11 +83,12 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_29_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_28_-form-item"
             type="button"
@@ -113,7 +115,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -399,11 +401,12 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_2p_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_2o_-form-item"
             type="button"
@@ -430,7 +433,7 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -596,11 +599,12 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_1p_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_1o_-form-item"
             type="button"
@@ -627,7 +631,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -651,11 +655,12 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_1r_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_1q_-form-item"
             type="button"
@@ -682,7 +687,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -798,11 +803,12 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_3b_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_3a_-form-item"
             type="button"
@@ -829,7 +835,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -853,11 +859,12 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_3d_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_3c_-form-item"
             type="button"
@@ -884,7 +891,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -908,11 +915,12 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_3f_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_3e_-form-item"
             type="button"
@@ -939,7 +947,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -1298,11 +1306,12 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_4_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_3_-form-item"
             type="button"
@@ -1329,7 +1338,7 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -1581,11 +1590,12 @@ exports[`renderZodSchema > should render a form unique 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_32_"
+            aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+            class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
             data-state="closed"
             id="_r_31_-form-item"
             type="button"
@@ -1612,7 +1622,7 @@ exports[`renderZodSchema > should render a form unique 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -1740,11 +1750,12 @@ exports[`renders custom forms column_id_array 1`] = `
       aria-invalid="false"
       class="relative"
     >
-      <div
+      <button
         aria-controls="radix-_r_41_"
+        aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+        class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
         data-state="closed"
         id="_r_40_-form-item"
         type="button"
@@ -1771,7 +1782,7 @@ exports[`renders custom forms column_id_array 1`] = `
             d="m6 9 6 6 6-6"
           />
         </svg>
-      </div>
+      </button>
       <div
         class="flex flex-col gap-1 items-start"
       />
@@ -1790,11 +1801,12 @@ exports[`renders custom forms column_id_dot_array 1`] = `
       aria-invalid="false"
       class="relative"
     >
-      <div
+      <button
         aria-controls="radix-_r_43_"
+        aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
+        class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid min-w-[180px]"
         data-state="closed"
         id="_r_42_-form-item"
         type="button"
@@ -1821,7 +1833,7 @@ exports[`renders custom forms column_id_dot_array 1`] = `
             d="m6 9 6 6 6-6"
           />
         </svg>
-      </div>
+      </button>
       <div
         class="flex flex-col gap-1 items-start"
       />

package/src/plugins/impl/data-frames/schema.ts

@@ -80,7 +80,10 @@ export const FilterConditionSchema = z
       .enum(Object.keys(ALL_OPERATORS) as [OperatorType, ...OperatorType[]])
       .describe(FieldOptions.of({ label: " " })),
     type: z.literal("condition").default("condition"),
-    value: z.any().describe(FieldOptions.of({ label: "Value" })),
+    value: z
+      .any()
+      .optional()
+      .describe(FieldOptions.of({ label: "Value" })),
     negate: z.boolean().default(false),
   })
   .describe(FieldOptions.of({ direction: "row", special: "column_filter" }));

package/src/plugins/layout/DownloadPlugin.tsx

@@ -80,22 +80,26 @@ const DownloadButton = ({
   const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async (e: React.MouseEvent) => {
-    if (!data.lazy) {
+    if (data.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
       return;
     }
 
-    if (data.disabled) {
+    e.preventDefault();
+
+    if (!data.lazy) {
+      downloadByURL(data.data, data.filename ?? undefined);
       return;
     }
 
-    e.preventDefault();
     setIsLoading(true);
 
     try {
       const loadedData = await load({});
       downloadByURL(
         loadedData.data,
-        loadedData.filename || data.filename || "download",
+        loadedData.filename ?? data.filename ?? undefined,
       );
     } catch (error) {
       toast({
@@ -114,9 +118,7 @@ const DownloadButton = ({
   return (
     <a
       href={data.data}
-      download={data.filename || true}
-      target="_blank"
-      rel="noopener noreferrer"
+      download={data.filename ?? ""}
       onClick={handleClick}
       className={buttonVariants({
         variant: "secondary",