@marimo-team/frontend 0.24.1-dev99 → 0.24.2-dev129

package/src/components/editor/Output.tsx

@@ -18,10 +18,12 @@ import {
   ChevronsDownUpIcon,
   ChevronsUpDownIcon,
   ExpandIcon,
+  ShrinkIcon,
 } from "lucide-react";
 import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
 import { viewStateAtom } from "@/core/mode";
+import { useEventListener } from "@/hooks/useEventListener";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { renderHTML } from "@/plugins/core/RenderHTML";
@@ -31,11 +33,13 @@ import { getContainerWidth } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import { Events } from "@/utils/events";
 import { invariant } from "@/utils/invariant";
+import { Logger } from "@/utils/Logger";
 import { processMimeBundle } from "@/utils/mime-types";
 import { Objects } from "@/utils/objects";
 import { LazyVegaEmbed } from "../charts/lazy";
 import { ChartLoadingState } from "../data-table/charts/components/chart-states";
 import { Button } from "../ui/button";
+import { useIsFullScreen } from "../ui/fullscreen";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { Tooltip } from "../ui/tooltip";
 import { CsvViewer } from "./file-tree/renderers";
@@ -408,6 +412,12 @@ const Div = React.forwardRef<
 >((props, ref) => <div ref={ref} {...props} />);
 Div.displayName = "Div";
 
+function exitFullscreen() {
+  document.exitFullscreen().catch((error) => {
+    Logger.warn("Failed to exit fullscreen", error);
+  });
+}
+
 /**
  * Detects if there is overflow in the output area and adds a button to optionally expand
  */
@@ -425,6 +435,16 @@ const ExpandableOutput = React.memo(
     const [isExpanded, setIsExpanded] = useExpandedOutput(cellId);
     const isOverflowing = useOverflowDetection(containerRef);
     const { hasFullscreen } = useIframeCapabilities();
+    const isFullscreen = useIsFullScreen(containerRef);
+
+    // Not every host exits fullscreen on Escape by itself. A null target keeps
+    // the listener off every output that is not fullscreen.
+    useEventListener(isFullscreen ? document : null, "keydown", (event) => {
+      if (event.key !== "Escape" || !document.fullscreenElement) {
+        return;
+      }
+      exitFullscreen();
+    });
 
     return (
       <>
@@ -488,6 +508,26 @@ const ExpandableOutput = React.memo(
               isExpanded || forceExpand ? { maxHeight: "none" } : undefined
             }
           >
+            {/* Fullscreen paints this element only, and the action buttons sit
+                outside it. A host does not always draw an exit overlay, so the
+                output carries its own exit control. */}
+            {isFullscreen && (
+              <Tooltip content="Exit fullscreen" side="left">
+                <Button
+                  data-testid="exit-fullscreen-output-button"
+                  aria-label="Exit fullscreen"
+                  className="absolute right-2 top-2 z-2 p-1 bg-background/90 border border-border hover:bg-muted print:hidden"
+                  onClick={exitFullscreen}
+                  size="xs"
+                  variant="text"
+                >
+                  <ShrinkIcon
+                    className="size-4 opacity-60 hover:opacity-80"
+                    strokeWidth={1.25}
+                  />
+                </Button>
+              </Tooltip>
+            )}
             {children}
           </div>
         </div>

package/src/components/editor/__tests__/Output.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { OutputArea, OutputRenderer } from "../Output";
@@ -158,3 +158,86 @@ describe("OutputRenderer image and SVG rendering", () => {
     expect(imgElement).toHaveAttribute("src", base64PngDataUrl);
   });
 });
+
+describe("OutputArea fullscreen exit control", () => {
+  let fullscreenElement: Element | null = null;
+  const exitFullscreen = vi.fn(() => Promise.resolve());
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    exitFullscreen.mockClear();
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+    Object.defineProperty(document, "exitFullscreen", {
+      configurable: true,
+      value: exitFullscreen,
+    });
+  });
+
+  // Drop the stubs so that the real document properties come back.
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+    Reflect.deleteProperty(document, "exitFullscreen");
+  });
+
+  const renderOutput = () =>
+    render(
+      <TooltipProvider>
+        <OutputArea
+          output={{
+            channel: "output",
+            data: "Hello World",
+            mimetype: "text/plain",
+          }}
+          cellId={cellId("test")}
+          stale={false}
+          loading={false}
+          allowExpand={true}
+        />
+      </TooltipProvider>,
+    );
+
+  const enterFullscreen = (container: HTMLElement) => {
+    fullscreenElement = container.querySelector('[data-cell-role="output"]');
+    act(() => {
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+  };
+
+  it("hides the exit button outside fullscreen", () => {
+    renderOutput();
+    expect(
+      screen.queryByTestId("exit-fullscreen-output-button"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the exit button when the output is the fullscreen element", () => {
+    const { container } = renderOutput();
+    enterFullscreen(container);
+    expect(
+      screen.getByTestId("exit-fullscreen-output-button"),
+    ).toBeInTheDocument();
+  });
+
+  it("exits fullscreen on click", () => {
+    const { container } = renderOutput();
+    enterFullscreen(container);
+    fireEvent.click(screen.getByTestId("exit-fullscreen-output-button"));
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  it("exits fullscreen on Escape", () => {
+    const { container } = renderOutput();
+    enterFullscreen(container);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores Escape outside fullscreen", () => {
+    renderOutput();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(exitFullscreen).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/connections/secret-combobox.tsx

@@ -68,6 +68,8 @@ interface SecretComboboxProps {
   allowCreateSecret?: (search: string) => boolean;
 }
 
+const defaultCustomValueLabel = (custom: string) => `Use "${custom}"`;
+
 /**
  * Searchable combobox for connection fields that may reference secrets.
  *
@@ -84,7 +86,7 @@ export const SecretCombobox: React.FC<SecretComboboxProps> = ({
   onCreateSecret,
   className,
   searchPlaceholder,
-  formatCustomValueLabel = (custom) => `Use "${custom}"`,
+  formatCustomValueLabel = defaultCustomValueLabel,
   createSecretLabel = "Create a new secret",
   allowCustomValue,
   allowCreateSecret,