@marimo-team/islands 0.23.14-dev23 → 0.23.14-dev25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.14-dev23",
+  "version": "0.23.14-dev25",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -45,7 +45,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
-    "@glideapps/glide-data-grid": "6.0.4-alpha9",
+    "@glideapps/glide-data-grid": "6.0.4-alpha24",
     "@hookform/resolvers": "^5.2.2",
     "@img-comparison-slider/react": "^8.0.2",
     "@internationalized/date": "^3.10.1",

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/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}

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

@@ -0,0 +1,73 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * Dismiss any open Glide Data Grid overlay by firing Escape on it.
+ */
+export function dismissGlideOverlay() {
+  const overlay = document.querySelector(
+    "[data-testid='glide-data-editor-portal'] .gdg-clip-region",
+  );
+  if (overlay) {
+    overlay.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+    );
+  }
+}
+
+function getGlidePortalContainer(): Element {
+  return document.fullscreenElement ?? document.body;
+}
+
+function useGlidePortalContainer(): Element {
+  const [container, setContainer] = useState<Element>(getGlidePortalContainer);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      if (document.fullscreenElement) {
+        setContainer(document.fullscreenElement);
+      } else {
+        dismissGlideOverlay();
+        setContainer(document.body);
+      }
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    // Sync on mount in case fullscreen became active before this editor mounted.
+    handleFullscreenChange();
+
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+
+  return container;
+}
+
+/**
+ * Per-instance Glide Data Grid overlay portal on document.body.
+ * Moves into the active fullscreen element via createPortal so edit overlays stay visible
+ */
+export function GlideDataEditorPortal({
+  portalRef,
+}: {
+  portalRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  const container = useGlidePortalContainer();
+
+  return createPortal(
+    <div
+      ref={portalRef}
+      data-testid="glide-data-editor-portal"
+      style={{
+        position: "fixed",
+        left: 0,
+        top: 0,
+        zIndex: 9999,
+      }}
+    />,
+    container,
+  );
+}

package/dist/data-grid-overlay-editor-mfEJ5475.js

@@ -1,128 +0,0 @@
-import { s as __toESM } from "./chunk-BNovOVIE.js";
-import { t as require_react } from "./react-DA-nE2FX.js";
-import { t as require_react_dom } from "./react-dom-BTJzcVJ9.js";
-import { _ as isEditableGridCell, i as makeCSSStyle, n as ThemeContext, t as ClickOutsideContainer, v as isInnerOnlyCell, y as isObjectEditorCallbackResult } from "./click-outside-container-BDd67_1U.js";
-import { t as styled_default } from "./dist-D_bzzWBm.js";
-var import_react_dom = require_react_dom(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), _exp2 = () => (n) => n.targetX, _exp3 = () => (n) => n.targetY, _exp4 = () => (n) => n.targetWidth, _exp5 = () => (n) => n.targetHeight, _exp6 = () => (n) => n.targetY + 10, _exp7 = () => (n) => Math.max(0, (n.targetHeight - 28) / 2);
-const DataGridOverlayEditorStyle = /* @__PURE__ */ styled_default("div")({
-  name: "DataGridOverlayEditorStyle",
-  class: "gdg-d19meir1",
-  propsAsIs: false,
-  vars: {
-    "d19meir1-0": [_exp3(), "px"],
-    "d19meir1-1": [_exp2(), "px"],
-    "d19meir1-2": [_exp4(), "px"],
-    "d19meir1-3": [_exp5(), "px"],
-    "d19meir1-4": [_exp6(), "px"],
-    "d19meir1-5": [_exp7(), "px"]
-  }
-});
-function useRefState() {
-  let [n, c] = import_react.useState();
-  return [n ?? void 0, c];
-}
-function useStayOnScreen() {
-  let [n, c] = useRefState(), [l, u] = import_react.useState(0), [d, f] = import_react.useState(true);
-  return import_react.useLayoutEffect(() => {
-    if (n === void 0 || !("IntersectionObserver" in window)) return;
-    let c2 = new IntersectionObserver((n2) => {
-      n2.length !== 0 && f(n2[0].isIntersecting);
-    }, { threshold: 1 });
-    return c2.observe(n), () => c2.disconnect();
-  }, [n]), import_react.useEffect(() => {
-    if (d || n === void 0) return;
-    let c2, l2 = () => {
-      let { right: d2 } = n.getBoundingClientRect();
-      u((n2) => Math.min(n2 + window.innerWidth - d2 - 10, 0)), c2 = requestAnimationFrame(l2);
-    };
-    return c2 = requestAnimationFrame(l2), () => {
-      c2 !== void 0 && cancelAnimationFrame(c2);
-    };
-  }, [n, d]), {
-    ref: c,
-    style: import_react.useMemo(() => ({ transform: `translateX(${l}px)` }), [l])
-  };
-}
-var data_grid_overlay_editor_default = (n) => {
-  let { target: c, content: l, onFinishEditing: p, forceEditMode: m, initialValue: h, imageEditorOverride: g, markdownDivCreateNode: _, highlight: v, className: y, theme: b, id: x, cell: S, bloom: C, validateCell: w, getCellRenderer: T, provideEditor: E, isOutsideClick: D, customEventTarget: O } = n, [k, A] = import_react.useState(m ? l : void 0), j = import_react.useRef(k ?? l);
-  j.current = k ?? l;
-  let [M, N] = import_react.useState(() => w === void 0 ? true : !(isEditableGridCell(l) && (w == null ? void 0 : w(S, l, j.current)) === false)), P = import_react.useCallback((n2, c2) => {
-    p(M ? n2 : void 0, c2);
-  }, [M, p]), F = import_react.useCallback((n2) => {
-    if (w !== void 0 && n2 !== void 0 && isEditableGridCell(n2)) {
-      let c2 = w(S, n2, j.current);
-      c2 === false ? N(false) : (typeof c2 == "object" && (n2 = c2), N(true));
-    }
-    A(n2);
-  }, [S, w]), I = import_react.useRef(false), L = import_react.useRef(void 0), R = import_react.useCallback(() => {
-    P(k, [0, 0]), I.current = true;
-  }, [k, P]), z = import_react.useCallback((n2, c2) => {
-    P(n2, c2 ?? L.current ?? [0, 0]), I.current = true;
-  }, [P]), B = import_react.useCallback(async (n2) => {
-    let c2 = false;
-    n2.key === "Escape" ? (n2.stopPropagation(), n2.preventDefault(), L.current = [0, 0]) : n2.key === "Enter" && !n2.shiftKey ? (n2.stopPropagation(), n2.preventDefault(), L.current = [0, 1], c2 = true) : n2.key === "Tab" && (n2.stopPropagation(), n2.preventDefault(), L.current = [n2.shiftKey ? -1 : 1, 0], c2 = true), window.setTimeout(() => {
-      !I.current && L.current !== void 0 && (P(c2 ? k : void 0, L.current), I.current = true);
-    }, 0);
-  }, [P, k]), V = k ?? l, [H, U] = import_react.useMemo(() => {
-    var _a, _b;
-    if (isInnerOnlyCell(l)) return [];
-    let n2 = E == null ? void 0 : E(l);
-    return n2 === void 0 ? [(_b = (_a = T(l)) == null ? void 0 : _a.provideEditor) == null ? void 0 : _b.call(_a, l), false] : [n2, false];
-  }, [
-    l,
-    T,
-    E
-  ]), { ref: W, style: G } = useStayOnScreen(), K = true, q, J = true, Y;
-  if (H !== void 0) {
-    K = H.disablePadding !== true, J = H.disableStyling !== true;
-    let n2 = isObjectEditorCallbackResult(H);
-    n2 && (Y = H.styleOverride);
-    let l2 = n2 ? H.editor : H;
-    q = import_react.createElement(l2, {
-      isHighlighted: v,
-      onChange: F,
-      value: V,
-      initialValue: h,
-      onFinishedEditing: z,
-      validatedSelection: isEditableGridCell(V) ? V.selectionRange : void 0,
-      forceEditMode: m,
-      target: c,
-      imageEditorOverride: g,
-      markdownDivCreateNode: _,
-      isValid: M,
-      theme: b
-    });
-  }
-  Y = {
-    ...Y,
-    ...G
-  };
-  let X = document.getElementById("portal");
-  if (X === null) return console.error('Cannot open Data Grid overlay editor, because portal not found.  Please add `<div id="portal" />` as the last child of your `<body>`.'), null;
-  let Z = J ? "gdg-style" : "gdg-unstyle";
-  M || (Z += " gdg-invalid"), K && (Z += " gdg-pad");
-  let Q = (C == null ? void 0 : C[0]) ?? 1, $ = (C == null ? void 0 : C[1]) ?? 1;
-  return (0, import_react_dom.createPortal)(import_react.createElement(ThemeContext.Provider, { value: b }, import_react.createElement(ClickOutsideContainer, {
-    style: makeCSSStyle(b),
-    className: y,
-    onClickOutside: R,
-    isOutsideClick: D,
-    customEventTarget: O
-  }, import_react.createElement(DataGridOverlayEditorStyle, {
-    ref: W,
-    id: x,
-    className: Z,
-    style: Y,
-    as: U === true ? "label" : void 0,
-    targetX: c.x - Q,
-    targetY: c.y - $,
-    targetWidth: c.width + Q * 2,
-    targetHeight: c.height + $ * 2
-  }, import_react.createElement("div", {
-    className: "gdg-clip-region",
-    onKeyDown: B
-  }, q)))), X);
-};
-export {
-  data_grid_overlay_editor_default as default
-};