@marimo-team/frontend 0.22.1-dev26 → 0.22.1-dev27

package/src/components/ui/calendar.tsx

@@ -183,8 +183,9 @@ const Calendar = <T extends AriaDateValue>({
   );
 };
 
-interface RangeCalendarProps<T extends AriaDateValue>
-  extends AriaRangeCalendarProps<T> {
+interface RangeCalendarProps<
+  T extends AriaDateValue,
+> extends AriaRangeCalendarProps<T> {
   errorMessage?: string;
 }
 

package/src/components/ui/combobox.tsx

@@ -230,7 +230,8 @@ interface ComboboxItemOptions<TValue> {
 }
 
 export interface ComboboxItemProps<TValue>
-  extends ComboboxItemOptions<TValue>,
+  extends
+    ComboboxItemOptions<TValue>,
     Omit<
       React.ComponentProps<typeof CommandItem>,
       keyof ComboboxItemOptions<TValue> | "onSelect" | "role"

package/src/components/ui/date-input.tsx

@@ -41,8 +41,7 @@ const DateSegment = ({ className, ...props }: AriaDateSegmentProps) => {
 };
 
 interface DateInputProps
-  extends AriaDateInputProps,
-    VariantProps<typeof fieldGroupVariants> {}
+  extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}
 
 const DateInput = ({
   className,
@@ -61,8 +60,9 @@ const DateInput = ({
   );
 };
 
-interface DateFieldProps<T extends AriaDateValue>
-  extends AriaDateFieldProps<T> {
+interface DateFieldProps<
+  T extends AriaDateValue,
+> extends AriaDateFieldProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: AriaValidationResult) => string);
@@ -94,8 +94,9 @@ const DateField = <T extends AriaDateValue>({
   );
 };
 
-interface TimeFieldProps<T extends AriaTimeValue>
-  extends AriaTimeFieldProps<T> {
+interface TimeFieldProps<
+  T extends AriaTimeValue,
+> extends AriaTimeFieldProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: AriaValidationResult) => string);

package/src/components/ui/date-picker.tsx

@@ -51,8 +51,9 @@ const DatePickerContent = ({
   </Popover>
 );
 
-interface DatePickerProps<T extends AriaDateValue>
-  extends AriaDatePickerProps<T> {
+interface DatePickerProps<
+  T extends AriaDateValue,
+> extends AriaDatePickerProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: AriaValidationResult) => string);
@@ -115,8 +116,9 @@ const DatePicker = <T extends AriaDateValue>({
   );
 };
 
-interface DateRangePickerProps<T extends AriaDateValue>
-  extends AriaDateRangePickerProps<T> {
+interface DateRangePickerProps<
+  T extends AriaDateValue,
+> extends AriaDateRangePickerProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: AriaValidationResult) => string);

package/src/components/ui/field.tsx

@@ -66,8 +66,7 @@ const fieldGroupVariants = cva("", {
 });
 
 interface GroupProps
-  extends AriaGroupProps,
-    VariantProps<typeof fieldGroupVariants> {}
+  extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}
 
 const FieldGroup = ({ className, variant, ...props }: GroupProps) => {
   return (

package/src/components/ui/progress.tsx

@@ -5,8 +5,9 @@ import * as React from "react";
 
 import { cn } from "@/utils/cn";
 
-interface ProgressProps
-  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+interface ProgressProps extends React.ComponentPropsWithoutRef<
+  typeof ProgressPrimitive.Root
+> {
   /**
    * When true, shows an indeterminate animated progress bar.
    */

package/src/components/ui/query-param-preserving-link.tsx

@@ -3,8 +3,10 @@
 import React, { useRef } from "react";
 import { usePress } from "react-aria";
 
-interface QueryParamPreservingLinkProps
-  extends Omit<React.HTMLAttributes<HTMLAnchorElement>, "href"> {
+interface QueryParamPreservingLinkProps extends Omit<
+  React.HTMLAttributes<HTMLAnchorElement>,
+  "href"
+> {
   href: string;
   children: React.ReactNode;
 }

package/src/components/ui/sheet.tsx

@@ -51,7 +51,8 @@ const sheetVariants = cva(
 );
 
 interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<

package/src/components/ui/textarea.tsx

@@ -6,8 +6,7 @@ import { useDebounceControlledState } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   bottomAdornment?: React.ReactNode;
 }
 

package/src/core/ai/context/providers/cell-output.ts

@@ -34,8 +34,7 @@ export interface CellOutputData {
 // For the context provider
 // Currently, we enforce that cellOutput is present.
 interface CellOutputContextData
-  extends CellOutputData,
-    Record<string, unknown> {
+  extends CellOutputData, Record<string, unknown> {
   cellOutput: BaseOutput;
 }
 

package/src/core/ai/tools/edit-notebook-tool.ts

@@ -72,9 +72,10 @@ type EditNotebookInput = z.infer<typeof editNotebookSchema>;
 type EditOperation = EditNotebookInput["edit"];
 export type EditType = EditOperation["type"];
 
-export class EditNotebookTool
-  implements AiTool<EditNotebookInput, ToolOutputBase>
-{
+export class EditNotebookTool implements AiTool<
+  EditNotebookInput,
+  ToolOutputBase
+> {
   readonly name = "edit_notebook_tool";
   readonly description = description;
   readonly schema = editNotebookSchema;

package/src/core/ai/tools/run-cells-tool.ts

@@ -50,9 +50,10 @@ const filePartSchema = z.object({
   mediaType: z.string(),
 }) satisfies z.ZodType<FileUIPart>;
 
-export class RunStaleCellsTool
-  implements AiTool<EmptyToolInput, RunStaleCellsOutput>
-{
+export class RunStaleCellsTool implements AiTool<
+  EmptyToolInput,
+  RunStaleCellsOutput
+> {
   readonly name = "run_stale_cells_tool";
   readonly description = description;
   readonly schema = z.object({});

package/src/core/cells/__tests__/add-missing-import.test.ts

@@ -48,28 +48,29 @@ describe("maybeAddMissingImport", () => {
     "import marimo as mo\nimport marimo as mo",
     "import   marimo    as   mo",
   ];
-  it.each(
-    VALID_IMPORTS,
-  )("should not add an import if the import statement already exists in the notebook", (code) => {
-    const appStore = createStore();
-    appStore.set(variablesAtom, {} as Variables);
-    appStore.set(
-      notebookAtom,
-      MockNotebook.notebookState({
-        cellData: {
-          [Cell1]: { code: code },
-        },
-      }),
-    );
-    const onAddImport = vi.fn();
-    maybeAddMissingImport({
-      moduleName: "marimo",
-      variableName: "mo",
-      onAddImport,
-      appStore,
-    });
-    expect(onAddImport).not.toHaveBeenCalled();
-  });
+  it.each(VALID_IMPORTS)(
+    "should not add an import if the import statement already exists in the notebook",
+    (code) => {
+      const appStore = createStore();
+      appStore.set(variablesAtom, {} as Variables);
+      appStore.set(
+        notebookAtom,
+        MockNotebook.notebookState({
+          cellData: {
+            [Cell1]: { code: code },
+          },
+        }),
+      );
+      const onAddImport = vi.fn();
+      maybeAddMissingImport({
+        moduleName: "marimo",
+        variableName: "mo",
+        onAddImport,
+        appStore,
+      });
+      expect(onAddImport).not.toHaveBeenCalled();
+    },
+  );
 
   it("should add an import if the variable is not in the variables state and the import statement does not exist in the notebook", () => {
     const appStore = createStore();

package/src/core/cells/__tests__/cell.test.ts

@@ -43,19 +43,20 @@ describe("outputIsLoading", () => {
 });
 
 describe("outputIsStale", () => {
-  it.each(
-    STATUSES,
-  )("should return true if the cell is edited and status is %s", (status) => {
-    const cell = {
-      status: status,
-      staleInputs: true,
-      output: null,
-      runStartTimestamp: null,
-      interrupted: false,
-    };
-    const edited = true;
-    expect(outputIsStale(cell, edited)).toBe(true);
-  });
+  it.each(STATUSES)(
+    "should return true if the cell is edited and status is %s",
+    (status) => {
+      const cell = {
+        status: status,
+        staleInputs: true,
+        output: null,
+        runStartTimestamp: null,
+        interrupted: false,
+      };
+      const edited = true;
+      expect(outputIsStale(cell, edited)).toBe(true);
+    },
+  );
 
   it("should return true if the cell is loading", () => {
     const cell = {

package/src/core/codemirror/cells/__tests__/extensions.test.ts

@@ -18,24 +18,22 @@ function createTransaction(spec: TransactionSpec) {
 }
 
 describe("shouldAutorunMarkdownUpdate", () => {
-  it.each([
-    "input.type",
-    "delete.backward",
-    "undo",
-    "redo",
-  ])("accepts local %s transactions", (userEvent) => {
-    const transaction = createTransaction({
-      changes: { from: 0, insert: "#" },
-      annotations: [Transaction.userEvent.of(userEvent)],
-    });
+  it.each(["input.type", "delete.backward", "undo", "redo"])(
+    "accepts local %s transactions",
+    (userEvent) => {
+      const transaction = createTransaction({
+        changes: { from: 0, insert: "#" },
+        annotations: [Transaction.userEvent.of(userEvent)],
+      });
 
-    expect(
-      shouldAutorunMarkdownUpdate({
-        docChanged: transaction.docChanged,
-        transactions: [transaction],
-      }),
-    ).toBe(true);
-  });
+      expect(
+        shouldAutorunMarkdownUpdate({
+          docChanged: transaction.docChanged,
+          transactions: [transaction],
+        }),
+      ).toBe(true);
+    },
+  );
 
   it("ignores formatting changes", () => {
     const transaction = createTransaction({

package/src/core/codemirror/language/languages/markdown.ts

@@ -38,9 +38,7 @@ export const MARKDOWN_INITIAL_HIDE_CODE = true;
 /**
  * Language adapter for Markdown.
  */
-export class MarkdownLanguageAdapter
-  implements LanguageAdapter<MarkdownLanguageAdapterMetadata>
-{
+export class MarkdownLanguageAdapter implements LanguageAdapter<MarkdownLanguageAdapterMetadata> {
   private parser = new MarkdownParser();
 
   readonly type = "markdown";

package/src/core/codemirror/language/languages/python.ts

@@ -184,7 +184,7 @@ const tyLspClient = once((_: LSPConfig) => {
 const pyreflyClient = once(
   (lspConfig: LSPConfig & { diagnostics: DiagnosticsConfig }) => {
     // oxlint-disable-next-line prefer-const -- reassigned after closure capture
-  let resyncCallback: (() => Promise<void>) | undefined;
+    let resyncCallback: (() => Promise<void>) | undefined;
 
     const transport = createTransport("pyrefly", async () => {
       await resyncCallback?.();

package/src/core/codemirror/language/languages/sql/completion-sources.tsx

@@ -91,13 +91,11 @@ export function customKeywordCompletionSource(): CompletionSource {
 
 // e.g. lazily load keyword docs
 const getKeywordDocs = once(async (): Promise<Record<string, unknown>> => {
-  const keywords = await import(
-    "@marimo-team/codemirror-sql/data/common-keywords.json"
-  );
+  const keywords =
+    await import("@marimo-team/codemirror-sql/data/common-keywords.json");
   // Include DuckDB for now, but we can remove this once we have a better way to handle dialect-specific keywords
-  const duckdbKeywords = await import(
-    "@marimo-team/codemirror-sql/data/duckdb-keywords.json"
-  );
+  const duckdbKeywords =
+    await import("@marimo-team/codemirror-sql/data/duckdb-keywords.json");
   return {
     ...keywords.default.keywords,
     ...duckdbKeywords.default.keywords,

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -77,9 +77,7 @@ function getLatestEngine(): ConnectionName {
 /**
  * Language adapter for SQL.
  */
-export class SQLLanguageAdapter
-  implements LanguageAdapter<SQLLanguageAdapterMetadata>
-{
+export class SQLLanguageAdapter implements LanguageAdapter<SQLLanguageAdapterMetadata> {
   private parser = new SQLParser();
   readonly type = "sql";
   sqlModeEnabled: boolean;

package/src/core/codemirror/reactive-references/__tests__/analyzer.test.ts

@@ -45,9 +45,8 @@ def foo(x):
   });
 
   test("should handle lambda parameters", () => {
-    expect(
-      runHighlight(["a", "b"], "result = lambda a: a + b"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["a", "b"], "result = lambda a: a + b"))
+      .toMatchInlineSnapshot(`
       "
       result = lambda a: a + b
                              ^
@@ -56,9 +55,8 @@ def foo(x):
   });
 
   test("should handle comprehension variables", () => {
-    expect(
-      runHighlight(["a", "data"], "result = [a for a in data]"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["a", "data"], "result = [a for a in data]"))
+      .toMatchInlineSnapshot(`
       "
       result = [a for a in data]
                            ^^^^
@@ -146,9 +144,8 @@ def factorial(n):
   });
 
   test("function param vs global", () => {
-    expect(
-      runHighlight(["a", "b"], "def foo(a): return a + b"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["a", "b"], "def foo(a): return a + b"))
+      .toMatchInlineSnapshot(`
       "
       def foo(a): return a + b
                              ^
@@ -157,9 +154,8 @@ def factorial(n):
   });
 
   test("lambda param vs global", () => {
-    expect(
-      runHighlight(["x", "b"], "func = lambda x: x + b"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["x", "b"], "func = lambda x: x + b"))
+      .toMatchInlineSnapshot(`
       "
       func = lambda x: x + b
                            ^
@@ -168,9 +164,8 @@ def factorial(n):
   });
 
   test("lambda with multiple params", () => {
-    expect(
-      runHighlight(["x", "y", "z"], "f = lambda x, y: x + y + z"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["x", "y", "z"], "f = lambda x, y: x + y + z"))
+      .toMatchInlineSnapshot(`
       "
       f = lambda x, y: x + y + z
                                ^
@@ -187,9 +182,8 @@ def factorial(n):
   });
 
   test("nested comprehension", () => {
-    expect(
-      runHighlight(["a", "b"], "[(a + b) for a, b in [(1,2), (3,4)]]"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["a", "b"], "[(a + b) for a, b in [(1,2), (3,4)]]"))
+      .toMatchInlineSnapshot(`
       "
       [(a + b) for a, b in [(1,2), (3,4)]]
       "
@@ -225,9 +219,8 @@ def factorial(n):
   });
 
   test("class body using globals", () => {
-    expect(
-      runHighlight(["a", "b"], "class MyClass:\n  value = a + b"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["a", "b"], "class MyClass:\n  value = a + b"))
+      .toMatchInlineSnapshot(`
       "
       class MyClass:
         value = a + b
@@ -237,9 +230,8 @@ def factorial(n):
   });
 
   test("decorator using global", () => {
-    expect(
-      runHighlight(["logger"], "@logger\ndef decorated(): pass"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["logger"], "@logger\ndef decorated(): pass"))
+      .toMatchInlineSnapshot(`
       "
       @logger
        ^^^^^^
@@ -317,9 +309,8 @@ ${" ".repeat(8)}
   });
 
   test("multiple assignment", () => {
-    expect(
-      runHighlight(["x", "y", "z", "a"], "x = y = z + a"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["x", "y", "z", "a"], "x = y = z + a"))
+      .toMatchInlineSnapshot(`
       "
       x = y = z + a
               ^   ^
@@ -353,9 +344,8 @@ ${" ".repeat(8)}
   });
 
   test("global in return", () => {
-    expect(
-      runHighlight(["config"], "def get_config(): return config"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["config"], "def get_config(): return config"))
+      .toMatchInlineSnapshot(`
       "
       def get_config(): return config
                                ^^^^^^
@@ -410,9 +400,8 @@ class Configurable:
   });
 
   test("comprehension shadows global 2", () => {
-    expect(
-      runHighlight(["i"], "squares = [i**2 for i in range(10)]"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["i"], "squares = [i**2 for i in range(10)]"))
+      .toMatchInlineSnapshot(`
       "
       squares = [i**2 for i in range(10)]
       "
@@ -420,9 +409,8 @@ class Configurable:
   });
 
   test("comprehension with global in condition", () => {
-    expect(
-      runHighlight(["x", "z"], "filtered = [x for x in [] if x > z]"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["x", "z"], "filtered = [x for x in [] if x > z]"))
+      .toMatchInlineSnapshot(`
       "
       filtered = [x for x in [] if x > z]
                                        ^
@@ -459,9 +447,8 @@ def make_adder(x):
   });
 
   test("rebinding in list comprehension", () => {
-    expect(
-      runHighlight(["x"], "rebinding = [x for x in range(5)]"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["x"], "rebinding = [x for x in range(5)]"))
+      .toMatchInlineSnapshot(`
       "
       rebinding = [x for x in range(5)]
       "
@@ -644,9 +631,8 @@ def run(polars):
   });
 
   test("mixed comprehension and outer globals", () => {
-    expect(
-      runHighlight(["y", "z"], "values = [y + z for y in range(5)]"),
-    ).toMatchInlineSnapshot(`
+    expect(runHighlight(["y", "z"], "values = [y + z for y in range(5)]"))
+      .toMatchInlineSnapshot(`
       "
       values = [y + z for y in range(5)]
                     ^

package/src/core/datasets/data-source-connections.ts

@@ -32,8 +32,10 @@ const initialConnections: ConnectionsMap = new Map([
 ]);
 
 // Extend the backend type but override the name property with the strongly typed ConnectionName
-export interface DataSourceConnection
-  extends Omit<DataSourceConnectionType, "name"> {
+export interface DataSourceConnection extends Omit<
+  DataSourceConnectionType,
+  "name"
+> {
   name: ConnectionName;
 }
 

package/src/core/dom/__tests__/htmlUtils.test.ts

@@ -6,20 +6,14 @@ import { UIElementRegistry } from "../uiregistry";
 const registry = UIElementRegistry.INSTANCE;
 
 describe("htmlUtils", () => {
-  it.each([
-    false,
-    { a: 1 },
-    true,
-    0,
-    1,
-    [{ a: 1 }, { b: 2 }],
-    "hello",
-    "",
-  ])("can parse element.dataset.initialValue", (initialValue) => {
-    const div = document.createElement("div");
-    div.dataset.initialValue = JSON.stringify(initialValue);
-    expect(parseInitialValue(div, registry)).toEqual(initialValue);
-  });
+  it.each([false, { a: 1 }, true, 0, 1, [{ a: 1 }, { b: 2 }], "hello", ""])(
+    "can parse element.dataset.initialValue",
+    (initialValue) => {
+      const div = document.createElement("div");
+      div.dataset.initialValue = JSON.stringify(initialValue);
+      expect(parseInitialValue(div, registry)).toEqual(initialValue);
+    },
+  );
 
   it("can parse an element with no initialValue", () => {
     const div = document.createElement("div");

package/src/core/dom/__tests__/outline.test.ts

@@ -439,9 +439,8 @@ const OUTLINE_2: Outline = {
 };
 
 it("mergeOutlines", () => {
-  expect(
-    mergeOutlines([OUTLINE_1, null, OUTLINE_2, null]),
-  ).toMatchInlineSnapshot(`
+  expect(mergeOutlines([OUTLINE_1, null, OUTLINE_2, null]))
+    .toMatchInlineSnapshot(`
     {
       "items": [
         {

package/src/core/islands/__tests__/parse.test.ts

@@ -78,11 +78,12 @@ describe("parseIslandCode", () => {
 
   codes = [...codes, ...codes.map(encodeURIComponent)];
 
-  it.each(
-    codes,
-  )("should return the code without leading or trailing whitespace", (code) => {
-    const result = parseIslandCode(code);
-    const expected = 'def __():\n    print("Hello, World!")\n    return';
-    expect(result).toBe(expected);
-  });
+  it.each(codes)(
+    "should return the code without leading or trailing whitespace",
+    (code) => {
+      const result = parseIslandCode(code);
+      const expected = 'def __():\n    print("Hello, World!")\n    return';
+      expect(result).toBe(expected);
+    },
+  );
 });

package/src/core/saving/__tests__/filename.test.ts

@@ -5,12 +5,13 @@ import { EDGE_CASE_FILENAMES } from "../../../__tests__/mocks";
 import { Paths } from "../../../utils/paths";
 
 describe("filename handling logic", () => {
-  it.each(
-    EDGE_CASE_FILENAMES,
-  )("should extract basename correctly for document title: %s", (filename) => {
-    const basename = Paths.basename(filename);
-    expect(basename).toBe(filename); // Since no path separator
-  });
+  it.each(EDGE_CASE_FILENAMES)(
+    "should extract basename correctly for document title: %s",
+    (filename) => {
+      const basename = Paths.basename(filename);
+      expect(basename).toBe(filename); // Since no path separator
+    },
+  );
 
   it("should handle full paths with unicode filenames", () => {
     EDGE_CASE_FILENAMES.forEach((filename) => {