@marimo-team/islands 0.25.2-dev12 → 0.25.2-dev121

package/src/hooks/__tests__/useEventListener.test.tsx

@@ -2,7 +2,7 @@
 
 import { renderHook } from "@testing-library/react";
 import { useRef } from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   type HTMLElementNotDerivedFromRef,
   isRefObject,
@@ -28,6 +28,50 @@ describe("isRefObject", () => {
   });
 });
 
+describe.each([1, 2])("with %i anchors named current", (count) => {
+  let iframe: HTMLIFrameElement;
+  let browserWindow: Window;
+
+  beforeEach(() => {
+    // An iframe preserves named properties hidden by Vitest's global window.
+    iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    if (!iframe.contentWindow) {
+      throw new Error("Expected an iframe window");
+    }
+    browserWindow = iframe.contentWindow;
+    const anchors = Array.from({ length: count }, () => {
+      const anchor = browserWindow.document.createElement("a");
+      anchor.id = "current";
+      return anchor;
+    });
+    browserWindow.document.body.append(...anchors);
+  });
+
+  afterEach(() => {
+    iframe.remove();
+  });
+
+  it("does not mistake window for a React ref", () => {
+    expect("current" in browserWindow).toBe(true);
+    expect(isRefObject(browserWindow)).toBe(false);
+  });
+
+  it("attaches and removes the listener on window", () => {
+    const listener = vi.fn();
+    const { unmount } = renderHook(() =>
+      useEventListener(browserWindow, "resize", listener),
+    );
+
+    browserWindow.dispatchEvent(new Event("resize"));
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unmount();
+    browserWindow.dispatchEvent(new Event("resize"));
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe("useEventListener", () => {
   beforeEach(() => {
     vi.clearAllMocks();

package/src/hooks/useEventListener.ts

@@ -13,7 +13,12 @@ export type HTMLElementNotDerivedFromRef<T = HTMLElement> = T & {
 };
 
 export function isRefObject<T>(target: unknown): target is RefObject<T | null> {
-  return target !== null && typeof target === "object" && "current" in target;
+  return (
+    target !== null &&
+    typeof target === "object" &&
+    !("addEventListener" in target) &&
+    "current" in target
+  );
 }
 
 export function useEventListener<K extends keyof DocumentEventMap>(

package/src/mount.tsx

@@ -62,7 +62,7 @@ import {
 import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
 import type { FileStore } from "./core/wasm/store";
 import { notebookFileStore } from "./core/wasm/store";
-import { WebSocketState } from "./core/websocket/types";
+import { ConnectionState } from "./core/websocket/types";
 import {
   handleWidgetMessage,
   WIDGET_REGISTRY,
@@ -359,7 +359,7 @@ function initStore(options: unknown) {
     });
     // If the remote runtime is not lazy, start it in CONNECTING
     if (!firstRuntimeConfig.lazy && !isStaticNotebook()) {
-      store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+      store.set(connectionAtom, { state: ConnectionState.CONNECTING });
     }
   } else {
     store.set(runtimeConfigAtom, {

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

@@ -32,6 +32,61 @@ function makePlugin(tagName: string) {
   };
 }
 
+describe("stylesheet copying", () => {
+  afterEach(() => {
+    delete (Document.prototype as Partial<Document>).adoptedStyleSheets;
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  test.each([
+    {
+      name: "linked stylesheet",
+      href: "http://localhost/assets/index.css",
+      title: "marimo-linked-test",
+      expectedBaseURL: "http://localhost/assets/index.css",
+    },
+    {
+      name: "inline stylesheet",
+      href: null,
+      title: "marimo-inline-test",
+      expectedBaseURL: document.baseURI,
+    },
+  ])(
+    "preserves the base URL of a $name",
+    ({ href, title, expectedBaseURL }) => {
+      const constructedStyleSheet = {
+        replaceSync: vi.fn(),
+      } as unknown as CSSStyleSheet;
+      const constructor = vi.fn(function () {
+        return constructedStyleSheet;
+      });
+      constructor.prototype.replace = vi.fn();
+      vi.stubGlobal("CSSStyleSheet", constructor);
+      Object.defineProperty(Document.prototype, "adoptedStyleSheets", {
+        configurable: true,
+        value: [],
+      });
+
+      const source = {
+        cssRules: [],
+        href,
+        ownerNode: null,
+        title,
+      } as unknown as CSSStyleSheet;
+      vi.spyOn(document, "styleSheets", "get").mockReturnValue([
+        source,
+      ] as unknown as StyleSheetList);
+
+      const tag = uniqueTag("stylesheet-base-url");
+      registerReactComponent(makePlugin(tag));
+      document.createElement(tag);
+
+      expect(constructor).toHaveBeenCalledWith({ baseURL: expectedBaseURL });
+    },
+  );
+});
+
 describe("isCustomMarimoElement", () => {
   test("returns false for null", () => {
     expect(isCustomMarimoElement(null)).toBe(false);

package/src/plugins/core/registerReactComponent.tsx

@@ -519,7 +519,9 @@ export function registerReactComponent<T>(plugin: IPlugin<T, unknown>): void {
         if (!styleSheetCache.has(sheetUniqueKey)) {
           // We need to create a new stylesheet because we can't use the same
           // stylesheet otherwise the browser will throw an error.
-          const newSheet = new CSSStyleSheet();
+          const newSheet = new CSSStyleSheet({
+            baseURL: sheet.href ?? document.baseURI,
+          });
           try {
             newSheet.replaceSync(
               Array.from(sheet.cssRules)

package/src/plugins/impl/CheckboxPlugin.tsx

@@ -46,7 +46,7 @@ const CheckboxComponent = ({
   const id = useId();
 
   return (
-    <Labeled label={data.label} align="right" id={id}>
+    <Labeled label={data.label} align="right" controlId={id}>
       <Checkbox
         data-testid="marimo-plugin-checkbox"
         checked={value}

package/src/plugins/impl/DataTablePlugin.tsx

@@ -36,7 +36,12 @@ import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-owner
 import { LoadingTable } from "@/components/data-table/loading-table";
 import {
   type DownloadAsArgs,
+  type DownloadAsFunction,
   DownloadAsSchema,
+  type DownloadGeoJSON,
+  DownloadGeoJSONSchema,
+  type GetExportMetadata,
+  GetExportMetadataSchema,
 } from "@/components/data-table/schemas";
 import { TableExplorerPanel } from "@/components/data-table/table-explorer-panel/table-explorer-panel";
 import {
@@ -209,7 +214,9 @@ interface Data<T> {
 
 // oxlint-disable-next-line typescript/consistent-type-definitions
 type DataTableFunctions = {
-  download_as: DownloadAsArgs;
+  download_as: DownloadAsFunction;
+  download_geojson: DownloadGeoJSON;
+  get_export_metadata: GetExportMetadata;
   get_column_summaries: <T>(opts: {}) => Promise<ColumnSummaries<T>>;
   search: <T>(req: {
     sort?: {
@@ -302,6 +309,8 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
   )
   .withFunctions<DataTableFunctions>({
     download_as: DownloadAsSchema,
+    download_geojson: DownloadGeoJSONSchema,
+    get_export_metadata: GetExportMetadataSchema,
     get_column_summaries: rpc.input(z.looseObject({})).output(
       z.object({
         data: z.union([z.string(), z.array(z.looseObject({}))]).nullable(),
@@ -839,7 +848,9 @@ const DataTableComponent = ({
   fieldTypes,
   paginationState,
   setPaginationState,
-  download_as: downloadAs,
+  download_as,
+  download_geojson,
+  get_export_metadata: getExportMetadata,
   columnSummaries,
   className,
   setValue,
@@ -880,6 +891,15 @@ const DataTableComponent = ({
     sizeBytesIsLoading?: boolean;
   }): JSX.Element => {
   const id = useId();
+  const downloadAs = useCallback<DownloadAsArgs>(
+    (request) => {
+      const { format, ...options } = request;
+      return format === "geojson"
+        ? download_geojson({ format, ...options })
+        : download_as({ format, ...options });
+    },
+    [download_as, download_geojson],
+  );
   const { locale } = useLocale();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
   const { isPanelOpen, isAnyPanelOpen, togglePanel, panelType, setPanelType } =
@@ -1168,6 +1188,7 @@ const DataTableComponent = ({
             hoverTemplate={hoverTemplate}
             cellHoverTexts={cellHoverTexts}
             downloadAs={showDownload ? downloadAs : undefined}
+            getExportMetadata={showDownload ? getExportMetadata : undefined}
             showSearch={showSearch}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}

package/src/plugins/impl/DatePickerPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDate, parseDate } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -49,6 +49,7 @@ interface DatePickerProps extends Data {
 }
 
 const DatePickerComponent = (props: DatePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (valueAsDate: CalendarDate | null) => {
     if (!valueAsDate) {
       return;
@@ -59,12 +60,13 @@ const DatePickerComponent = (props: DatePickerProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
         granularity="day"
         value={parseDate(props.value)}
         onChange={handleInput}
-        aria-label={props.label ?? "date picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date picker"}
         minValue={parseDate(props.start)}
         maxValue={parseDate(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DateRangePlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDate, parseDate } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DateRangePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -48,6 +48,7 @@ interface DateRangePickerProps extends Data {
 }
 
 const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (
     valueAsDateRange: {
       start: CalendarDate;
@@ -64,7 +65,7 @@ const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DateRangePicker
         granularity="day"
         value={{
@@ -72,7 +73,8 @@ const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
           end: parseDate(props.value[1]),
         }}
         onChange={handleInput}
-        aria-label={props.label ?? "date range picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date range picker"}
         minValue={parseDate(props.start)}
         maxValue={parseDate(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DateTimePickerPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDateTime, parseDateTime } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -50,6 +50,7 @@ interface DateTimePickerProps extends Data {
 }
 
 const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (valueAsDateTime: CalendarDateTime | null) => {
     if (!valueAsDateTime) {
       return;
@@ -63,12 +64,13 @@ const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
   const parsedValue = props.value ? parseDateTime(props.value) : undefined;
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
         granularity={props.precision}
         value={parsedValue}
         onChange={handleInput}
-        aria-label={props.label ?? "date time picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date time picker"}
         minValue={parseDateTime(props.start)}
         maxValue={parseDateTime(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DropdownPlugin.tsx

@@ -79,7 +79,7 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
   const singleValue = value.length === 0 ? defaultValue : value[0];
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <NativeSelect
         data-testid="marimo-plugin-dropdown"
         onChange={(e) => {

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -68,7 +68,7 @@ export const Multiselect = ({
   );
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <SelectList<string>
         id={id}
         options={items}

package/src/plugins/impl/NumberPlugin.tsx

@@ -70,7 +70,7 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} id={id} fullWidth={props.fullWidth}>
+    <Labeled label={props.label} controlId={id} fullWidth={props.fullWidth}>
       <NumberField
         data-testid="marimo-plugin-number-input"
         className={cn("min-w-[3em]", props.fullWidth && "w-full")}

package/src/plugins/impl/RadioPlugin.tsx

@@ -51,7 +51,11 @@ export const Radio = (props: RadioProps): JSX.Element => {
   const id = useId();
 
   return (
-    <Labeled label={props.label} id={id} align={props.inline ? "left" : "top"}>
+    <Labeled
+      label={props.label}
+      controlId={id}
+      align={props.inline ? "left" : "top"}
+    >
       <RadioGroup
         data-testid="marimo-plugin-radio"
         value={props.value ?? ""}

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -98,7 +98,7 @@ const RangeSliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
       align={orientation === "horizontal" ? "left" : "top"}
       className={cn(fullWidth && "my-1 w-full")}
       fullWidth={fullWidth}

package/src/plugins/impl/SearchableSelect.tsx

@@ -33,7 +33,7 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
   );
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <SelectList<string>
         id={id}
         options={items}

package/src/plugins/impl/SliderPlugin.tsx

@@ -152,6 +152,7 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
+  const labelId = useId();
   const { locale } = useLocale();
 
   // Hold internal value
@@ -224,7 +225,8 @@ const SliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
+      labelId={labelId}
       align={orientation === "horizontal" ? "left" : "top"}
       fullWidth={fullWidth}
       className={cn(fullWidth && "my-1 w-full")}
@@ -238,6 +240,8 @@ const SliderComponent = ({
       >
         <Slider
           id={id}
+          aria-labelledby={label ? labelId : undefined}
+          aria-label={label ? undefined : "Slider"}
           className={cn(
             "relative flex items-center select-none",
             !fullWidth && "data-[orientation=horizontal]:w-36 ",

package/src/plugins/impl/SwitchPlugin.tsx

@@ -34,7 +34,12 @@ const SwitchComponent = ({
   const id = useId();
 
   return (
-    <Labeled label={data.label} align="right" id={id} labelClassName="ml-1">
+    <Labeled
+      label={data.label}
+      align="right"
+      controlId={id}
+      labelClassName="ml-1"
+    >
       <Switch
         data-testid="marimo-plugin-switch"
         checked={value}

package/src/plugins/impl/TextAreaPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import {
@@ -56,6 +56,7 @@ interface TextAreaComponentProps extends Data {
 }
 
 const TextAreaComponent = (props: TextAreaComponentProps) => {
+  const textareaId = useId();
   const bottomAdornment = props.maxLength ? (
     <span className="text-muted-foreground text-xs font-medium">
       {props.value.length}/{props.maxLength}
@@ -64,8 +65,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
 
   if (props.debounce === true) {
     return (
-      <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+      <Labeled
+        controlId={textareaId}
+        label={props.label}
+        align="top"
+        fullWidth={props.fullWidth}
+      >
         <OnBlurredTextarea
+          id={textareaId}
           className={cn("font-code", {
             "w-full": props.fullWidth,
           })}
@@ -86,8 +93,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
 
   if (typeof props.debounce === "number") {
     return (
-      <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+      <Labeled
+        controlId={textareaId}
+        label={props.label}
+        align="top"
+        fullWidth={props.fullWidth}
+      >
         <DebouncedTextarea
+          id={textareaId}
           className={cn("font-code", {
             "w-full": props.fullWidth,
           })}
@@ -108,8 +121,14 @@ const TextAreaComponent = (props: TextAreaComponentProps) => {
   }
 
   return (
-    <Labeled label={props.label} align="top" fullWidth={props.fullWidth}>
+    <Labeled
+      controlId={textareaId}
+      label={props.label}
+      align="top"
+      fullWidth={props.fullWidth}
+    >
       <Textarea
+        id={textareaId}
         className={cn("font-code", {
           "w-full": props.fullWidth,
         })}

package/src/plugins/impl/TextInputPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { AtSignIcon, GlobeIcon, LockIcon } from "lucide-react";
-import { type JSX, useRef, useState } from "react";
+import { type JSX, useId, useRef, useState } from "react";
 import { z } from "zod";
 import {
   DebouncedInput,
@@ -73,6 +73,7 @@ interface TextComponentProps extends Data {
 }
 
 const TextComponent = (props: TextComponentProps) => {
+  const inputId = useId();
   // Before first real keystroke: show masked placeholder, suppress setValue.
   // After first keystroke: normal password field.
   const initiallyMasked =
@@ -125,6 +126,7 @@ const TextComponent = (props: TextComponentProps) => {
   if (props.debounce === true) {
     input = (
       <OnBlurredInput
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -143,6 +145,7 @@ const TextComponent = (props: TextComponentProps) => {
   } else if (typeof props.debounce === "number") {
     input = (
       <DebouncedInput
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -163,6 +166,7 @@ const TextComponent = (props: TextComponentProps) => {
   } else {
     input = (
       <Input
+        id={inputId}
         data-testid="marimo-plugin-text-input"
         type={props.kind}
         icon={icon[props.kind]}
@@ -182,7 +186,11 @@ const TextComponent = (props: TextComponentProps) => {
   }
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled
+      controlId={inputId}
+      label={props.label}
+      fullWidth={props.fullWidth}
+    >
       {input}
     </Labeled>
   );