@marimo-team/islands 0.23.14-dev3 → 0.23.14-dev31

package/src/core/wasm/PyodideLoader.tsx

@@ -5,54 +5,41 @@ import type React from "react";
 import type { PropsWithChildren } from "react";
 import { useEffect, useRef } from "react";
 import { LargeSpinner } from "@/components/icons/large-spinner";
+import { ProgressiveBoundary } from "@/components/lifecycle/ProgressiveBoundary";
 import { toast } from "@/components/ui/use-toast";
-import { hasCellsAtom } from "@/core/cells/cells";
-import { showCodeInRunModeAtom } from "@/core/meta/state";
-import { store } from "@/core/state/jotai";
+import { canPaintAtom } from "@/core/lifecycle/render-policy";
+import { wasmInitStateAtom } from "@/core/wasm/state";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { prettyError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
-import { hasQueryParam } from "@/utils/urls";
-import { KnownQueryParams } from "../constants";
-import { type AppMode, getInitialAppMode } from "../mode";
 import { PyodideBridge } from "./bridge";
-import { hasAnyOutputAtom, wasmInitializationAtom } from "./state";
 import { isWasm } from "./utils";
 
 /**
- * HOC to load Pyodide before rendering children, if necessary.
+ * Paints the snapshot (or hydrated cells) immediately and lets Pyodide
+ * finish downloading in the background. UI elements aren't interactive
+ * until Pyodide is ready.
  */
 export const PyodideLoader: React.FC<PropsWithChildren> = ({ children }) => {
   if (!isWasm()) {
     return children;
   }
-
   return <PyodideLoaderInner>{children}</PyodideLoaderInner>;
 };
 
 const PyodideLoaderInner: React.FC<PropsWithChildren> = ({ children }) => {
-  // Don't block render on Pyodide: a hydrated snapshot can paint immediately
-  // while Pyodide downloads in the background.
   const { error } = useAsyncData(async () => {
     await PyodideBridge.INSTANCE.initialized.promise;
     return true;
   }, []);
 
-  const hasCells = useAtomValue(hasCellsAtom);
-  const hasOutput = useAtomValue(hasAnyOutputAtom);
-  const nothingToShow = shouldShowSpinner({
-    hasCells,
-    hasOutput,
-    mode: getInitialAppMode(),
-    codeHidden: isCodeHidden(),
-  });
+  const canPaint = useAtomValue(canPaintAtom);
 
+  // If the snapshot is already on screen, toast instead of throwing so we
+  // don't tear it down. With nothing painted, throw to surface the error UI.
   const didToastErrorRef = useRef(false);
   useEffect(() => {
-    // With snapshot content on-screen, toast instead of throwing so the
-    // snapshot stays readable. The ref ensures we only toast once even if
-    // nothingToShow toggles later.
-    if (error && !nothingToShow && !didToastErrorRef.current) {
+    if (error && canPaint && !didToastErrorRef.current) {
       didToastErrorRef.current = true;
       Logger.error("Pyodide failed to initialize", error);
       toast({
@@ -61,50 +48,21 @@ const PyodideLoaderInner: React.FC<PropsWithChildren> = ({ children }) => {
         variant: "danger",
       });
     }
-  }, [error, nothingToShow]);
+  }, [error, canPaint]);
 
-  if (error && nothingToShow) {
+  if (error && !canPaint) {
     throw error;
   }
 
-  if (nothingToShow) {
-    return <WasmSpinner />;
-  }
-
-  return children;
-};
-
-function isCodeHidden() {
-  // Code is hidden if ANY are true:
-  // - the query param is set to false
-  // - the view.showAppCode is false
   return (
-    hasQueryParam(KnownQueryParams.showCode, "false") ||
-    !store.get(showCodeInRunModeAtom)
+    <ProgressiveBoundary requires={canPaintAtom} fallback={<WasmSpinner />}>
+      {children}
+    </ProgressiveBoundary>
   );
-}
-
-/**
- * Pure predicate: should the WASM loader render a spinner instead of its
- * children? We block render only when nothing user-visible would appear:
- *   - no cells have been hydrated (Pyodide hasn't parsed the notebook), or
- *   - we are in headless run mode (code hidden) with no outputs to display.
- */
-export function shouldShowSpinner(input: {
-  hasCells: boolean;
-  hasOutput: boolean;
-  mode: AppMode;
-  codeHidden: boolean;
-}): boolean {
-  const { hasCells, hasOutput, mode, codeHidden } = input;
-  if (!hasCells) {
-    return true;
-  }
-  return !hasOutput && mode === "read" && codeHidden;
-}
-
-export const WasmSpinner: React.FC<PropsWithChildren> = ({ children }) => {
-  const wasmInitialization = useAtomValue(wasmInitializationAtom);
+};
 
-  return <LargeSpinner title={wasmInitialization} />;
+const WasmSpinner: React.FC = () => {
+  const state = useAtomValue(wasmInitStateAtom);
+  const title = state.kind === "loading" ? state.message : "Loading…";
+  return <LargeSpinner title={title} />;
 };

package/src/core/wasm/bridge.ts

@@ -38,7 +38,7 @@ import type { IConnectionTransport } from "../websocket/transports/transport";
 import { PyodideRouter } from "./router";
 import { getWorkerRPC } from "./rpc";
 import { createShareableLink } from "./share";
-import { wasmInitializationAtom, wasmInitStatusAtom } from "./state";
+import { wasmInitStateAtom } from "./state";
 import { fallbackFileStore, notebookFileStore } from "./store";
 import { isWasm } from "./utils";
 import type { SaveWorkerSchema } from "./worker/save-worker";
@@ -120,11 +120,16 @@ export class PyodideBridge implements RunRequests, EditRequests {
       // By initializing after, we get hits on cached network requests
       this.saveRpc = this.getSaveWorker();
       this.setInterruptBuffer();
-      store.set(wasmInitStatusAtom, "ready");
+      store.set(wasmInitStateAtom, { kind: "ready" });
       this.initialized.resolve();
     });
     this.rpc.addMessageListener("initializingMessage", ({ message }) => {
-      store.set(wasmInitializationAtom, message);
+      // Only bump the progress label while still loading — if we've already
+      // reached "ready" or "error", a late message shouldn't roll us back.
+      const current = store.get(wasmInitStateAtom);
+      if (current.kind === "loading") {
+        store.set(wasmInitStateAtom, { kind: "loading", message });
+      }
     });
     this.rpc.addMessageListener("initializedError", ({ error }) => {
       // If already initialized, surface as a toast and leave the deferred /
@@ -138,7 +143,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
         });
         return;
       }
-      store.set(wasmInitStatusAtom, "error");
+      store.set(wasmInitStateAtom, { kind: "error", message: error });
       this.initialized.reject(new Error(error));
     });
     this.rpc.addMessageListener("kernelMessage", ({ message }) => {

package/src/core/wasm/state.ts

@@ -1,24 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom } from "jotai";
-import { notebookAtom } from "../cells/cells";
-import { isOutputEmpty } from "../cells/outputs";
 
-export const wasmInitializationAtom = atom<string>("Initializing...");
+/** Tagged so the progress label and error message can't drift apart. */
+export type WasmInitState =
+  | { kind: "loading"; message: string }
+  | { kind: "ready" }
+  | { kind: "error"; message: string };
 
-export type WasmInitStatus = "loading" | "ready" | "error";
-export const wasmInitStatusAtom = atom<WasmInitStatus>("loading");
-
-export const hasAnyOutputAtom = atom<boolean>((get) => {
-  const notebook = get(notebookAtom);
-  const runtimeStates = Object.values(notebook.cellRuntime);
-  // First check if there is any output
-  const hasOutput = runtimeStates.some(
-    (runtime) => !isOutputEmpty(runtime.output),
-  );
-  if (hasOutput) {
-    return true;
-  }
-  // If there is no output, check if they have all run to completion
-  // in case this notebook doesn't contain outputs
-  return runtimeStates.every((runtime) => runtime.status === "idle");
+export const wasmInitStateAtom = atom<WasmInitState>({
+  kind: "loading",
+  message: "Initializing...",
 });

package/src/css/app/codemirror.css

@@ -138,3 +138,17 @@
   display: inline-block;
   padding: 2px;
 }
+
+/* Rename symbol popup (F2). The upstream popup hardcodes white inline styles;
+  override with theme tokens. */
+.cm-rename-popup {
+  background: var(--popover) !important;
+  border-color: var(--border) !important;
+  color: var(--popover-foreground) !important;
+}
+
+.cm-rename-popup input {
+  background: var(--background) !important;
+  border-color: var(--border) !important;
+  color: var(--foreground) !important;
+}

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

@@ -0,0 +1,55 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDelayElapsed } from "../useDelayElapsed";
+
+describe("useDelayElapsed", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("resolves true immediately when delay <= 0", () => {
+    const { result } = renderHook(() => useDelayElapsed(0));
+    expect(result.current).toBe(true);
+  });
+
+  it("stays false until the delay elapses, then flips true", () => {
+    const { result } = renderHook(() => useDelayElapsed(2000));
+    expect(result.current).toBe(false);
+
+    act(() => vi.advanceTimersByTime(1999));
+    expect(result.current).toBe(false);
+
+    act(() => vi.advanceTimersByTime(1));
+    expect(result.current).toBe(true);
+  });
+
+  it("restarts the timer when the delay changes", () => {
+    const { result, rerender } = renderHook(
+      ({ delay }) => useDelayElapsed(delay),
+      { initialProps: { delay: 1000 } },
+    );
+
+    act(() => vi.advanceTimersByTime(1000));
+    expect(result.current).toBe(true);
+
+    rerender({ delay: 500 });
+    expect(result.current).toBe(false);
+
+    act(() => vi.advanceTimersByTime(500));
+    expect(result.current).toBe(true);
+  });
+
+  it("clears the timer on unmount", () => {
+    const { unmount } = renderHook(() => useDelayElapsed(1000));
+    expect(vi.getTimerCount()).toBe(1);
+    unmount();
+    // The pending timeout must be cleared, not left dangling.
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});

package/src/hooks/useDelayElapsed.ts

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useLayoutEffect, useState } from "react";
+
+/**
+ * Returns `false` until `delayMs` has elapsed since mount (or since `delayMs`
+ * last changed), then `true`. Resolves to `true` immediately when
+ * `delayMs <= 0`. Useful for suppressing spinner/fallback flashes.
+ */
+export function useDelayElapsed(delayMs: number): boolean {
+  const [elapsed, setElapsed] = useState(delayMs <= 0);
+
+  // Layout effect (not a plain effect) so that when `delayMs` flips from `<= 0`
+  // to `> 0` — e.g. a gate re-closing — we reset `elapsed` to `false` before
+  // the browser paints, rather than briefly flashing the fallback for a frame.
+  useLayoutEffect(() => {
+    if (delayMs <= 0) {
+      setElapsed(true);
+      return;
+    }
+    setElapsed(false);
+    const timeout = setTimeout(() => setElapsed(true), delayMs);
+    return () => clearTimeout(timeout);
+  }, [delayMs]);
+
+  return elapsed;
+}

package/src/plugins/impl/DataTablePlugin.tsx

@@ -805,6 +805,7 @@ export const LoadingDataTableComponent = memo(
             dataTable={dataTable}
             getDataUrl={props.get_data_url}
             fieldTypes={props.fieldTypes}
+            rowHeaders={props.rowHeaders}
             cellId={cellId}
           />
         ) : (

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -140,7 +140,8 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     return null;
   }
 
-  if (!isAnyWidgetModule(jsModule)) {
+  const widget = resolveAnyWidget(jsModule, jsUrl);
+  if (!widget) {
     return (
       <ErrorBanner error={getInvalidAnyWidgetModuleError(jsModule, jsUrl)} />
     );
@@ -150,7 +151,7 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     <LoadedSlot
       // Force remount when the widget module or model changes (cell re-run).
       key={`${jsHash}:${modelId}`}
-      widget={jsModule.default}
+      widget={widget}
       modelId={modelId}
       host={host}
     />
@@ -200,6 +201,55 @@ function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
   );
 }
 
+const warnedLegacyNamedExportUrls = new Set<string>();
+// Cache the synthesized widget per module namespace so its identity stays
+// stable across re-renders (like a default export), avoiding needless
+// WidgetBinding re-initialization.
+const legacyWidgetCache = new WeakMap<object, AnyWidget>();
+
+/**
+ * Resolve the AnyWidget from a loaded module: prefer the AFM-spec default
+ * export, otherwise synthesize one from legacy named `render`/`initialize`
+ * exports. Returns null if neither is present.
+ */
+function resolveAnyWidget(mod: any, jsUrl: string): AnyWidget | null {
+  if (isAnyWidgetModule(mod)) {
+    return mod.default;
+  }
+
+  // Only fall back to legacy (pre-AFM) named exports when there is no default
+  // export at all; a present-but-invalid default should surface an error
+  // rather than be masked.
+  if (mod?.default != null) {
+    return null;
+  }
+
+  const hasNamedRender = typeof mod?.render === "function";
+  const hasNamedInitialize = typeof mod?.initialize === "function";
+  if (!hasNamedRender && !hasNamedInitialize) {
+    return null;
+  }
+
+  const cached = legacyWidgetCache.get(mod);
+  if (cached) {
+    return cached;
+  }
+
+  if (!warnedLegacyNamedExportUrls.has(jsUrl)) {
+    warnedLegacyNamedExportUrls.add(jsUrl);
+    Logger.warn(
+      `Anywidget module at ${jsUrl} uses deprecated top-level named ` +
+        "exports (`render`/`initialize`). Per the AFM spec, use a default " +
+        "export instead: `export default { render }`. " +
+        "See https://anywidget.dev/en/afm/",
+    );
+  }
+
+  const widget: AnyWidget = { render: mod.render, initialize: mod.initialize };
+  legacyWidgetCache.set(mod, widget);
+  return widget;
+}
+
 function getInvalidAnyWidgetModuleError(mod: unknown, jsUrl: string): Error {
   const afmDocs = "https://anywidget.dev/en/afm/";
   const hasNamedRender = isRecord(mod) && hasFunctionProperty(mod, "render");
@@ -296,5 +346,6 @@ export const visibleForTesting = {
   LoadedSlot,
   runAnyWidgetModule,
   isAnyWidgetModule,
+  resolveAnyWidget,
   getInvalidAnyWidgetModuleError,
 };

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -9,8 +9,12 @@ import { MODEL_MANAGER, Model } from "../model";
 import type { WidgetModelId } from "../types";
 import { BINDING_MANAGER } from "../widget-binding";
 
-const { LoadedSlot, isAnyWidgetModule, getInvalidAnyWidgetModuleError } =
-  visibleForTesting;
+const {
+  LoadedSlot,
+  isAnyWidgetModule,
+  resolveAnyWidget,
+  getInvalidAnyWidgetModuleError,
+} = visibleForTesting;
 
 // Helper to create typed model IDs for tests
 const asModelId = (id: string): WidgetModelId => id as WidgetModelId;
@@ -170,6 +174,52 @@ describe("isAnyWidgetModule", () => {
   });
 });
 
+describe("resolveAnyWidget", () => {
+  const jsUrl = "./@file/widget.js";
+
+  it("should return the default export when present", () => {
+    const widget = { render: () => undefined };
+    expect(resolveAnyWidget({ default: widget }, jsUrl)).toBe(widget);
+  });
+
+  it("should return a default factory function", () => {
+    const factory = async () => ({ render: () => {} });
+    expect(resolveAnyWidget({ default: factory }, jsUrl)).toBe(factory);
+  });
+
+  it("should synthesize a widget from a legacy named render export", () => {
+    const render = vi.fn();
+    const resolved = resolveAnyWidget({ render }, jsUrl);
+    expect(resolved).not.toBeNull();
+    expect(resolved).toMatchObject({ render });
+  });
+
+  it("should synthesize a widget from a legacy named initialize export", () => {
+    const initialize = vi.fn();
+    const resolved = resolveAnyWidget({ initialize }, jsUrl);
+    expect(resolved).not.toBeNull();
+    expect(resolved).toMatchObject({ initialize });
+  });
+
+  it("should return null for a module with no valid exports", () => {
+    expect(resolveAnyWidget({}, jsUrl)).toBeNull();
+    expect(resolveAnyWidget({ default: {} }, jsUrl)).toBeNull();
+    expect(resolveAnyWidget({ render: "not a function" }, jsUrl)).toBeNull();
+  });
+
+  it("should return a stable widget identity across calls for one module", () => {
+    const mod = { render: vi.fn() };
+    expect(resolveAnyWidget(mod, jsUrl)).toBe(resolveAnyWidget(mod, jsUrl));
+  });
+
+  it("should not fall back to named exports when a default export is present", () => {
+    // A present-but-invalid default should surface an error, not be masked.
+    expect(
+      resolveAnyWidget({ default: {}, render: vi.fn() }, jsUrl),
+    ).toBeNull();
+  });
+});
+
 describe("getInvalidAnyWidgetModuleError", () => {
   const jsUrl = "./@file/widget.js";
 

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

@@ -0,0 +1,187 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import React from "react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { GlideDataEditor } from "../glide-data-editor";
+
+const capturedPortalRef = vi.hoisted(() => ({
+  ref: undefined as React.RefObject<HTMLElement> | undefined,
+}));
+
+vi.mock("@glideapps/glide-data-grid", async () => {
+  const React = await import("react");
+  return {
+    default: React.forwardRef(function MockDataEditor(
+      props: { portalElementRef?: React.RefObject<HTMLElement> },
+      _ref: React.Ref<HTMLDivElement>,
+    ) {
+      capturedPortalRef.ref = props.portalElementRef;
+      return <div data-testid="mock-data-editor" />;
+    }),
+    CompactSelection: {
+      empty: () => ({}),
+    },
+    GridCellKind: {
+      Text: "text",
+      Number: "number",
+      Boolean: "boolean",
+    },
+    GridColumnIcon: {
+      ProtectedColumnOverlay: "protected",
+    },
+  };
+});
+
+vi.mock("@/theme/useTheme", () => ({
+  useTheme: () => ({ theme: "light" }),
+}));
+
+const editorProps = {
+  data: [{ name: "alice" }],
+  setData: vi.fn(),
+  columnFields: new Map([["name", "string"]]) as Map<string, "string">,
+  setColumnFields: vi.fn(),
+  editableColumns: "all" as const,
+  edits: [],
+  onAddEdits: vi.fn(),
+  onAddRows: vi.fn(),
+  onDeleteRows: vi.fn(),
+  onRenameColumn: vi.fn(),
+  onDeleteColumn: vi.fn(),
+  onAddColumn: vi.fn(),
+};
+
+describe("GlideDataEditor portal", () => {
+  let fullscreenElement: Element | null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      get: () => fullscreenElement,
+      configurable: true,
+    });
+    document.body
+      .querySelectorAll("[data-testid='glide-data-editor-portal']")
+      .forEach((node) => {
+        node.remove();
+      });
+  });
+
+  it("renders a body-level portal and passes it to DataEditor", async () => {
+    const { container } = render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    const portal = screen.getByTestId("glide-data-editor-portal");
+    expect(portal.parentElement).toBe(document.body);
+    expect(container.contains(portal)).toBe(false);
+    expect(capturedPortalRef.ref).toBeDefined();
+    await waitFor(() => {
+      expect(capturedPortalRef.ref?.current).toBe(portal);
+    });
+  });
+
+  it("mounts into the fullscreen element when fullscreen is already active", () => {
+    const fullscreenContainer = document.createElement("div");
+    document.body.appendChild(fullscreenContainer);
+    fullscreenElement = fullscreenContainer;
+
+    render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    const portal = fullscreenContainer.querySelector(
+      "[data-testid='glide-data-editor-portal']",
+    );
+    expect(portal).not.toBeNull();
+    expect(portal?.parentElement).toBe(fullscreenContainer);
+
+    fullscreenContainer.remove();
+  });
+
+  it("moves the portal into the fullscreen element while fullscreen is active", async () => {
+    render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    expect(
+      document.body.querySelector("[data-testid='glide-data-editor-portal']"),
+    ).not.toBeNull();
+
+    const fullscreenContainer = document.createElement("div");
+    document.body.appendChild(fullscreenContainer);
+
+    act(() => {
+      fullscreenElement = fullscreenContainer;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    await waitFor(() => {
+      const portal = fullscreenContainer.querySelector(
+        "[data-testid='glide-data-editor-portal']",
+      );
+      expect(portal?.parentElement).toBe(fullscreenContainer);
+    });
+
+    act(() => {
+      fullscreenElement = null;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    await waitFor(() => {
+      const portal = document.body.querySelector(
+        "[data-testid='glide-data-editor-portal']",
+      );
+      expect(portal?.parentElement).toBe(document.body);
+    });
+
+    fullscreenContainer.remove();
+  });
+
+  it("unmounts cleanly while fullscreen is active", async () => {
+    const fullscreenContainer = document.createElement("div");
+    document.body.appendChild(fullscreenContainer);
+
+    const { unmount } = render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} />
+      </TooltipProvider>,
+    );
+
+    act(() => {
+      fullscreenElement = fullscreenContainer;
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    await waitFor(() => {
+      expect(
+        fullscreenContainer.querySelector(
+          "[data-testid='glide-data-editor-portal']",
+        ),
+      ).not.toBeNull();
+    });
+
+    expect(() => {
+      act(() => unmount());
+    }).not.toThrow();
+
+    expect(
+      fullscreenContainer.querySelector(
+        "[data-testid='glide-data-editor-portal']",
+      ),
+    ).toBeNull();
+    expect(
+      document.body.querySelector("[data-testid='glide-data-editor-portal']"),
+    ).toBeNull();
+
+    fullscreenContainer.remove();
+  });
+});

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

@@ -56,6 +56,7 @@ import {
   removeColumn,
   renameColumn,
 } from "./data-utils";
+import { GlideDataEditorPortal } from "./glide-portal";
 
 interface GlideDataEditorProps<T> {
   data: T[];
@@ -88,6 +89,7 @@ export const GlideDataEditor = <T,>({
 }: GlideDataEditorProps<T>) => {
   const { theme } = useTheme();
   const dataEditorRef = useRef<DataEditorRef>(null);
+  const portalElementRef = useRef<HTMLDivElement>(null);
 
   const [menu, setMenu] = useState<{ col: number; bounds: Rectangle }>();
   const [showSearch, setShowSearch] = useState<boolean>(false);
@@ -613,9 +615,13 @@ export const GlideDataEditor = <T,>({
 
   return (
     <div className="relative w-full min-w-0">
+      <GlideDataEditorPortal portalRef={portalElementRef} />
       <ErrorBoundary>
         <DataEditor
           ref={dataEditorRef}
+          // Glide types portalElementRef as RefObject<HTMLElement> (non-null); React 19 refs include null.
+          // @ts-expect-error glide-data-grid stale RefObject typing
+          portalElementRef={portalElementRef}
           getCellContent={getCellContent}
           columns={columns}
           gridSelection={selection}