@marimo-team/islands 0.24.1-dev115 → 0.24.1-dev116

package/src/components/ui/__tests__/fullscreen.test.tsx

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, render } from "@testing-library/react";
+import { useRef } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useIsFullScreen } from "../fullscreen";
+
+const FullScreenFlag = ({ label }: { label: string }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const isFullScreen = useIsFullScreen(ref);
+
+  return (
+    <div ref={ref} data-testid={label}>
+      {String(isFullScreen)}
+    </div>
+  );
+};
+
+describe("useIsFullScreen", () => {
+  let fullscreenElement: Element | null = null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+  });
+
+  const countFullScreenListeners = (calls: unknown[][]) =>
+    calls.filter((call) => call[0] === "fullscreenchange").length;
+
+  it("adds one document listener for many subscribers", () => {
+    const addEventListener = vi.spyOn(document, "addEventListener");
+
+    render(
+      <>
+        <FullScreenFlag label="first" />
+        <FullScreenFlag label="second" />
+        <FullScreenFlag label="third" />
+      </>,
+    );
+
+    expect(countFullScreenListeners(addEventListener.mock.calls)).toBe(1);
+    addEventListener.mockRestore();
+  });
+
+  it("removes the listener when the last subscriber unmounts", () => {
+    const removeEventListener = vi.spyOn(document, "removeEventListener");
+
+    const { unmount } = render(
+      <>
+        <FullScreenFlag label="first" />
+        <FullScreenFlag label="second" />
+      </>,
+    );
+
+    expect(countFullScreenListeners(removeEventListener.mock.calls)).toBe(0);
+
+    unmount();
+
+    expect(countFullScreenListeners(removeEventListener.mock.calls)).toBe(1);
+    removeEventListener.mockRestore();
+  });
+
+  it("reports true for the full screen element only", () => {
+    const { getByTestId } = render(
+      <>
+        <FullScreenFlag label="first" />
+        <FullScreenFlag label="second" />
+      </>,
+    );
+
+    expect(getByTestId("first")).toHaveTextContent("false");
+    expect(getByTestId("second")).toHaveTextContent("false");
+
+    fullscreenElement = getByTestId("second");
+    act(() => {
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    expect(getByTestId("first")).toHaveTextContent("false");
+    expect(getByTestId("second")).toHaveTextContent("true");
+  });
+});

package/src/components/ui/fullscreen.tsx

@@ -4,7 +4,7 @@ import type { Popover } from "radix-ui";
 
 type PopoverContentProps = Popover.PopoverContentProps;
 
-import React, { useState } from "react";
+import React, { type RefObject, useState, useSyncExternalStore } from "react";
 import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useEventListener } from "@/hooks/useEventListener";
 
@@ -27,6 +27,48 @@ export function useFullScreenElement() {
   return fullScreenElement;
 }
 
+const fullScreenSubscribers = new Set<() => void>();
+
+function notifyFullScreenSubscribers() {
+  for (const subscriber of fullScreenSubscribers) {
+    subscriber();
+  }
+}
+
+/**
+ * One document listener serves every subscriber, so the cost of a full screen
+ * transition does not grow with the number of mounted components.
+ */
+function subscribeToFullScreen(onStoreChange: () => void) {
+  if (fullScreenSubscribers.size === 0) {
+    document.addEventListener("fullscreenchange", notifyFullScreenSubscribers);
+  }
+  fullScreenSubscribers.add(onStoreChange);
+
+  return () => {
+    fullScreenSubscribers.delete(onStoreChange);
+    if (fullScreenSubscribers.size === 0) {
+      document.removeEventListener(
+        "fullscreenchange",
+        notifyFullScreenSubscribers,
+      );
+    }
+  };
+}
+
+/**
+ * Whether the given element is the full screen element.
+ *
+ * The hook returns a boolean, so a component re-renders only when its own
+ * element enters or leaves full screen.
+ */
+export function useIsFullScreen(ref: RefObject<Element | null>): boolean {
+  return useSyncExternalStore(subscribeToFullScreen, () => {
+    const fullScreenElement = document.fullscreenElement;
+    return fullScreenElement !== null && fullScreenElement === ref.current;
+  });
+}
+
 /**
  * HOC wrapping a Portal component to use the
  * full screen element as the container if we are in full screen mode

package/src/hooks/useEventListener.ts

@@ -17,7 +17,7 @@ export function isRefObject<T>(target: unknown): target is RefObject<T | null> {
 }
 
 export function useEventListener<K extends keyof DocumentEventMap>(
-  targetValue: Document,
+  targetValue: Document | null,
   type: K,
   listener: (ev: DocumentEventMap[K]) => unknown,
   options?: boolean | AddEventListenerOptions,