@marimo-team/frontend 0.25.2-dev12 → 0.25.2-dev4

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
+import { type LucideIcon, CornerLeftUp } from "lucide-react";
 import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
@@ -12,6 +12,7 @@ import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
+import { NativeSelect } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
@@ -471,19 +472,12 @@ export const FileBrowser = ({
   //
   // Assumes that path contains at least one delimiter, which is true
   // only if this is an absolute path.
-  const { protocol, parentDirectories } = getProtocolAndParentDirectories({
+  const { parentDirectories } = getProtocolAndParentDirectories({
     path,
     delimiter,
     initialPath,
     restrictNavigation,
   });
-  const breadcrumbs = parentDirectories.toReversed().map((dir) => ({
-    path: dir,
-    name:
-      dir === protocol
-        ? protocol
-        : (dir.split(delimiter).findLast(Boolean) ?? dir),
-  }));
 
   const selectionKindLabel =
     selectionMode === "all"
@@ -521,42 +515,18 @@ export const FileBrowser = ({
     <div>
       {error && <Banner kind="danger">{error.message}</Banner>}
       {renderHeader()}
-      <nav aria-label="Current directory" className="mt-2">
-        <ol className="flex flex-wrap items-center gap-0.5 text-sm">
-          {breadcrumbs.map((crumb, index) => {
-            const isCurrent = index === breadcrumbs.length - 1;
-            return (
-              <li key={crumb.path} className="flex items-center gap-0.5">
-                {index > 0 && (
-                  <ChevronRightIcon
-                    size={14}
-                    className="text-muted-foreground shrink-0"
-                    aria-hidden={true}
-                  />
-                )}
-                <button
-                  type="button"
-                  title={crumb.path}
-                  aria-current={isCurrent ? "page" : undefined}
-                  onClick={() => {
-                    if (!isCurrent) {
-                      setNewPath(crumb.path);
-                    }
-                  }}
-                  className={cn(
-                    "rounded px-1 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
-                    isCurrent
-                      ? "font-medium cursor-default"
-                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
-                  )}
-                >
-                  {crumb.name}
-                </button>
-              </li>
-            );
-          })}
-        </ol>
-      </nav>
+      <NativeSelect
+        className="mt-2 w-full"
+        placeholder={path}
+        value={path}
+        onChange={(e) => setNewPath(e.target.value)}
+      >
+        {parentDirectories.map((dir) => (
+          <option value={dir} key={dir}>
+            {dir}
+          </option>
+        ))}
+      </NativeSelect>
 
       {data && typeof data.total_count === "number" && (
         <div className="text-xs text-muted-foreground mt-1 px-1">

package/src/plugins/impl/__tests__/FileBrowserPlugin.test.tsx

@@ -1,12 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import {
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  within,
-} from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { initialModeAtom } from "@/core/mode";
@@ -193,7 +187,7 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
     const docsRow = docs.closest('[role="row"]')!;
     fireEvent.keyDown(docsRow, { key: "ArrowDown" }); // move active off the parent
     fireEvent.click(docs); // navigate into "docs"
-    await within(screen.getByRole("grid")).findByText("docs"); // listing reloads (mock returns same files)
+    await screen.findByText("docs"); // listing reloads (mock returns same files)
     const rows = screen.getAllByRole("row");
     expect(rows[0]).toHaveAttribute("tabindex", "0");
     // the focused row must match the only tabbable row
@@ -367,80 +361,3 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
 function rowFor(name: string): HTMLElement {
   return screen.getByText(name).closest('[role="row"]') as HTMLElement;
 }
-
-describe("FileBrowserPlugin breadcrumbs", () => {
-  function breadcrumbs() {
-    return within(
-      screen.getByRole("navigation", { name: "Current directory" }),
-    );
-  }
-
-  it("renders a crumb per ancestor with the current directory last", async () => {
-    renderBrowser();
-    await screen.findByText("docs");
-    const items = breadcrumbs().getAllByRole("listitem");
-    expect(items.map((li) => li.textContent)).toEqual(["/", "home", "user"]);
-    expect(breadcrumbs().getByRole("button", { name: "user" })).toHaveAttribute(
-      "aria-current",
-      "page",
-    );
-    expect(
-      breadcrumbs().getByRole("button", { name: "home" }),
-    ).not.toHaveAttribute("aria-current");
-  });
-
-  it("keeps focus on a crumb after navigating to it", async () => {
-    const { listDirectory } = renderBrowser();
-    await screen.findByText("docs");
-    const home = breadcrumbs().getByRole("button", { name: "home" });
-    home.focus();
-    fireEvent.click(home);
-    await waitFor(() =>
-      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
-    );
-    const current = breadcrumbs().getByRole("button", { name: "home" });
-    expect(current).toHaveAttribute("aria-current", "page");
-    expect(current).toBe(home);
-    expect(current).toHaveFocus();
-  });
-
-  it("does not reload when the current crumb is clicked", async () => {
-    const { listDirectory } = renderBrowser();
-    await screen.findByText("docs");
-    fireEvent.click(breadcrumbs().getByRole("button", { name: "user" }));
-    expect(listDirectory).toHaveBeenCalledTimes(1);
-  });
-
-  it("navigates to an ancestor when a crumb is clicked", async () => {
-    const { listDirectory } = renderBrowser();
-    await screen.findByText("docs");
-    fireEvent.click(breadcrumbs().getByRole("button", { name: "home" }));
-    await waitFor(() =>
-      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
-    );
-    fireEvent.click(breadcrumbs().getByRole("button", { name: "/" }));
-    await waitFor(() =>
-      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/" }),
-    );
-  });
-
-  it("hides ancestors outside the initial path when navigation is restricted", async () => {
-    render(
-      <FileBrowser
-        initialPath="/home/user"
-        filetypes={[]}
-        selectionMode="all"
-        multiple={true}
-        label={null}
-        restrictNavigation={true}
-        value={[]}
-        setValue={vi.fn()}
-        host={document.createElement("div")}
-        list_directory={mockListDirectory(FILES)}
-      />,
-    );
-    await screen.findByText("docs");
-    const items = breadcrumbs().getAllByRole("listitem");
-    expect(items.map((li) => li.textContent)).toEqual(["user"]);
-  });
-});

package/dist/assets/has-B4C7ywdy.js

@@ -1 +0,0 @@
-import{Wa as e}from"./index-C9FPQNuH.js";var t=Object.prototype.hasOwnProperty;function n(e,n){return e!=null&&t.call(e,n)}function r(t,r){return t!=null&&e(t,r,n)}export{r as t};

package/src/components/editor/actions/__tests__/useSetOutputsExpanded.test.ts

@@ -1,42 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { describe, expect, it } from "vitest";
-import { MockNotebook } from "@/__mocks__/notebook";
-import type { OutputMessage } from "@/core/kernel/messages";
-import { outputExpansionConfigs } from "../useSetOutputsExpanded";
-
-const output: OutputMessage = {
-  channel: "output",
-  mimetype: "text/plain",
-  data: "hello",
-  timestamp: 0,
-};
-
-describe("outputExpansionConfigs", () => {
-  const [withOutput, withoutOutput, expanded, expandedWithoutOutput] =
-    MockNotebook.cellIds();
-  const notebook = MockNotebook.notebookState({
-    cellData: {
-      [withOutput]: {},
-      [withoutOutput]: {},
-      [expanded]: { config: { expand_output: true } },
-      [expandedWithoutOutput]: { config: { expand_output: true } },
-    },
-    cellRuntime: {
-      [withOutput]: { output },
-      [expanded]: { output },
-    },
-  });
-
-  it("expands clamped cells with output and skips cells without output", () => {
-    expect(outputExpansionConfigs(notebook, true)).toEqual({
-      [withOutput]: { expand_output: true },
-    });
-  });
-
-  it("clamps expanded cells with output and skips cells without output", () => {
-    expect(outputExpansionConfigs(notebook, false)).toEqual({
-      [expanded]: { expand_output: false },
-    });
-  });
-});

package/src/components/editor/actions/useSetOutputsExpanded.ts

@@ -1,67 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { useCallback } from "react";
-import {
-  getNotebook,
-  type NotebookState,
-  useCellActions,
-} from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
-import { isOutputEmpty } from "@/core/cells/outputs";
-import { useRequestClient } from "@/core/network/requests";
-import type { CellConfig } from "@/core/network/types";
-import { Objects } from "@/utils/objects";
-
-/**
- * The `expand_output` config changes needed to expand or clamp every output.
- *
- * Both actions skip cells without output, so their source isn't annotated
- * with a config that has no effect.
- */
-export function outputExpansionConfigs(
-  notebook: NotebookState,
-  expanded: boolean,
-): Record<CellId, Partial<CellConfig>> {
-  const configs: Record<CellId, Partial<CellConfig>> = {};
-  for (const cellId of notebook.cellIds.inOrderIds) {
-    const cell = notebook.cellData[cellId];
-    if (
-      cell === undefined ||
-      (cell.config.expand_output ?? false) === expanded
-    ) {
-      continue;
-    }
-    if (isOutputEmpty(notebook.cellRuntime[cellId]?.output)) {
-      continue;
-    }
-    configs[cellId] = { expand_output: expanded };
-  }
-  return configs;
-}
-
-/**
- * Hook returning a callback that shows every cell's output in full, or clamps
- * every output to a fixed height, by setting each cell's `expand_output` config.
- */
-export const useSetOutputsExpanded = () => {
-  const { updateCellConfig } = useCellActions();
-  const { saveCellConfig } = useRequestClient();
-
-  return useCallback(
-    async (expanded: boolean) => {
-      const newConfigs = outputExpansionConfigs(getNotebook(), expanded);
-
-      const entries = Objects.entries(newConfigs);
-      if (entries.length === 0) {
-        return;
-      }
-
-      await saveCellConfig({ configs: newConfigs });
-
-      for (const [cellId, config] of entries) {
-        updateCellConfig({ cellId, config });
-      }
-    },
-    [updateCellConfig, saveCellConfig],
-  );
-};