@marimo-team/frontend 0.22.1-dev4 → 0.22.1-dev43

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

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, describe, expect, it, vi } from "vitest";

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

@@ -52,7 +52,7 @@ beforeEach(() => {
 
   // jsdom's PointerEvent doesn't properly inherit MouseEvent properties
   // like clientX. Polyfill it so fireEvent.pointerDown/Move/Up work.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   (globalThis as any).PointerEvent = class PointerEvent extends MouseEvent {
     readonly pointerId: number;
     constructor(type: string, init: PointerEventInit = {}) {

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

@@ -9,6 +9,35 @@ import { store } from "@/core/state/jotai";
 import type { IPluginProps } from "../../types";
 import { SliderPlugin } from "../SliderPlugin";
 
+vi.mock("@/components/ui/slider", () => ({
+  Slider: ({
+    disabled,
+    onValueChange,
+    onValueCommit,
+    value,
+  }: {
+    disabled?: boolean;
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    value: number[];
+  }) => (
+    <div>
+      <button
+        aria-label="Slider change"
+        disabled={disabled}
+        onClick={() => onValueChange?.([value[0] + 1])}
+        type="button"
+      />
+      <button
+        aria-label="Slider commit"
+        disabled={disabled}
+        onClick={() => onValueCommit?.(value)}
+        type="button"
+      />
+    </div>
+  ),
+}));
+
 SetupMocks.resizeObserver();
 
 describe("SliderPlugin", () => {
@@ -51,46 +80,45 @@ describe("SliderPlugin", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(false, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
-    expect(thumb).toBeTruthy();
+    const changeButton = getByRole("button", { name: "Slider change" });
 
-    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+      fireEvent.click(changeButton);
     });
 
     expect(setValue).toHaveBeenCalledWith(6);
   });
 
-  it("slider does not trigger setValue immediately when debounce is true", () => {
+  it("slider waits until commit before calling setValue when debounce is true", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(true, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
+    const changeButton = getByRole("button", { name: "Slider change" });
+    const commitButton = getByRole("button", { name: "Slider commit" });
 
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      // Simulate just a programmatic change that Radix would trigger via pointer move
-      // which fires onValueChange but not onValueCommit yet
-      // Because we can't easily separated Radix's internal pointer events in jsdom, we
-      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+      fireEvent.click(changeButton);
     });
 
-    // We verified above that NumberField works when debounce=true
     expect(setValue).not.toHaveBeenCalled();
+
+    act(() => {
+      fireEvent.click(commitButton);
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
   });
 
   it("editable input triggers setValue immediately even when slider debounce is true", () => {

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -1,10 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyWidget } from "@anywidget/types";
 import { useEffect, useRef } from "react";
 import { z } from "zod";
-import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
@@ -145,18 +144,10 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     return <ErrorBanner error={error} />;
   }
 
-  // Find the closest parent element with an attribute of `random-id`
-  const randomId = props.host
-    .closest(`[${RANDOM_ID_ATTR}]`)
-    ?.getAttribute(RANDOM_ID_ATTR);
-  const key = randomId ?? jsUrl;
-
   return (
     <LoadedSlot
-      // Use the a key to force a re-render when the randomId (or jsUrl) changes
-      // Plugins may be stateful and we cannot make assumptions that we won't be
-      // so it is safer to just re-render.
-      key={key}
+      // Force remount when the widget module or model changes (cell re-run).
+      key={`${jsHash}:${modelId}`}
       widget={jsModule.default}
       modelId={modelId}
       host={host}

package/src/plugins/impl/anywidget/__tests__/model.test.ts

@@ -58,13 +58,13 @@ describe("Model", () => {
   describe("public API", () => {
     it("should only expose AFM-compliant interface", () => {
       // Get all enumerable own properties
-      const ownProperties = Object.keys(model).sort();
+      const ownProperties = Object.keys(model).toSorted();
       // Get prototype methods (excluding constructor)
       const prototypeMethods = Object.getOwnPropertyNames(
         Object.getPrototypeOf(model),
       )
         .filter((name) => name !== "constructor")
-        .sort();
+        .toSorted();
 
       // Snapshot the public API to catch accidental leaks of internal methods
       expect({ ownProperties, prototypeMethods }).toMatchInlineSnapshot(`

package/src/plugins/impl/anywidget/model.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyModel } from "@anywidget/types";
 import { debounce } from "lodash-es";

package/src/plugins/impl/anywidget/types.ts

@@ -2,7 +2,7 @@
 import type { Base64String } from "@/utils/json/base64";
 import type { TypedString } from "@/utils/typed";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export type EventHandler = (...args: any[]) => void;
 
 /**
@@ -13,7 +13,7 @@ export type WidgetModelId = TypedString<"WidgetModelId">;
 /**
  * AnyWidget model state with buffers.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export type ModelState = Record<string | number, any>;
 
 /**

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyWidget, Experimental } from "@anywidget/types";
 import { asRemoteURL } from "@/core/runtime/config";

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -13,7 +13,7 @@ const LazyChatbot = React.lazy(() =>
   import("./chat-ui").then((m) => ({ default: m.Chatbot })),
 );
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 export type PluginFunctions = {
   get_chat_history: (req: {}) => Promise<{ messages: UIMessage[] }>;
   delete_chat_history: (req: {}) => Promise<null>;

package/src/plugins/impl/chat/chat-ui.tsx

@@ -2,7 +2,10 @@
 
 import { type UIMessage, useChat } from "@ai-sdk/react";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
-import { PopoverAnchor } from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import {
   createUIMessageStreamResponse,
@@ -466,7 +469,7 @@ export const Chatbot: React.FC<Props> = (props) => {
           resetInput();
         }}
         ref={formRef}
-        // biome-ignore lint/a11y/useSemanticElements: inert is used to disable the entire form
+        // oxlint-ignore-next-line -- inert is used to disable the entire form
         inert={props.disabled || undefined}
         className={cn(
           "flex w-full border-t border-(--slate-6) px-2 py-1 items-center",

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

@@ -218,7 +218,7 @@ export const GlideDataEditor = <T,>({
 
     // Add new rows in order
     const sortedNewRows = [...newRows.entries()]
-      .sort(([a], [b]) => a - b)
+      .toSorted(([a], [b]) => a - b)
       .map(([, row]) => row);
 
     if (sortedNewRows.length > 0) {
@@ -227,7 +227,7 @@ export const GlideDataEditor = <T,>({
 
     // Force re-render to update the total rows
     rerender();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [data.length]);
 
   const getCellContent = useCallback(

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* oxlint-disable typescript/no-base-to-string */
 import * as cql from "compassql/build/src";
 import { createStore, Provider, useAtomValue } from "jotai";
 import { ListFilterIcon } from "lucide-react";
@@ -268,7 +268,7 @@ const HorizontalCarouselItem = ({
   );
 };
 // Make the plot responsive
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function makeResponsive(spec: any) {
   // NOTE: for row/column, this applies to the inner plot
   // so we tend to overflow due to the legends,

package/src/plugins/impl/data-explorer/components/query-form.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* oxlint-disable typescript/no-base-to-string */
 
 import { ExpandedType } from "compassql/build/src/query/expandedtype";
 import { PrimitiveType, type Schema } from "compassql/build/src/schema";

package/src/plugins/impl/data-explorer/functions/function.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* oxlint-disable typescript/no-base-to-string */
 import type { FieldQuery } from "compassql/build/src/query/encoding";
 import { type FieldFunction, isAggregateOp, type TimeUnitOp } from "./types";
 

package/src/plugins/impl/data-explorer/queries/types.ts

@@ -28,7 +28,7 @@ export interface Result {
   limit: number;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents
+// oxlint-disable-next-line typescript/no-explicit-any, typescript/no-redundant-type-constituents
 export type TopLevelFacetedUnitSpec = TopLevel<FacetedUnitSpec<any, any>> & {
   data: NamedData;
 };

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -54,7 +54,7 @@ interface Data {
   lazy: boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
   get_dataframe: (req: {}) => Promise<{
     url: string;

package/src/plugins/impl/data-frames/forms/__tests__/form.test.tsx

@@ -44,16 +44,14 @@ describe("renderZodSchema", () => {
     [...TransformTypeSchema.options],
     (z) => getUnionLiteral(z).value,
   );
-  it.each(
-    Object.entries(options),
-  )("should render a form %s", (name, schema: z.ZodType<
-    unknown,
-    FieldValues
-  >) => {
-    const expected = render(<Subject schema={schema} />);
+  it.each(Object.entries(options))(
+    "should render a form %s",
+    (name, schema: z.ZodType<unknown, FieldValues>) => {
+      const expected = render(<Subject schema={schema} />);
 
-    expect(expected.asFragment()).toMatchSnapshot();
-  });
+      expect(expected.asFragment()).toMatchSnapshot();
+    },
+  );
 });
 
 const options = [

package/src/plugins/impl/data-frames/forms/renderers.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import React, { useEffect } from "react";
 import {

package/src/plugins/impl/data-frames/utils/operators.ts

@@ -194,7 +194,7 @@ export function isConditionValueValid(operator: string, value: unknown) {
   return possibleSchemas.some((schema) => schema.safeParse(value).success);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 const safeGet = (obj: any, key: string): [z.ZodType] | [] => {
   if (obj[key]) {
     return obj[key];

package/src/plugins/impl/matplotlib/MatplotlibPlugin.tsx

@@ -57,7 +57,7 @@ const MatplotlibComponent = (props: MatplotlibState) => {
       controller.abort();
       instance.current = null;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // No dependency array: intentionally syncs all props into the imperative

package/src/plugins/impl/mpl-interactive/MplInteractivePlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import { useCallback, useEffect, useRef } from "react";
 import { z } from "zod";

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { z } from "zod";
@@ -74,7 +74,7 @@ interface PanelData {
 
 type T = Record<string, unknown>;
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
   send_to_widget: <T>(req: {
     message?: unknown;

package/src/plugins/impl/plotly/Plot.tsx

@@ -4,7 +4,7 @@ import type * as PlotlyTypes from "plotly.js";
 // Import the pre-built dist bundle, not the source entry point.
 // The source entry point requires Node.js polyfills (e.g. `buffer/`)
 // that are unavailable in the browser/bundler environment.
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// oxlint-disable-next-line typescript/ban-ts-comment
 // @ts-expect-error — no type declarations for dist path, we use PlotlyTypes above
 import Plotly from "plotly.js/dist/plotly";
 import { useEffect, useRef } from "react";
@@ -107,7 +107,7 @@ export const Plot = (props: PlotProps) => {
 
       const plotlyEl = el as unknown as PlotlyElement;
 
-      // eslint-disable-next-line @typescript-eslint/ban-types -- Plotly's event API uses generic function references
+      // oxlint-disable-next-line typescript/ban-types -- Plotly's event API uses generic function references
       const attached: {
         plotlyName: string;
         handler: (...args: never[]) => void;
@@ -131,7 +131,7 @@ export const Plot = (props: PlotProps) => {
         }
       };
       // Re-sync whenever any event handler prop changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+      // oxlint-disable-next-line react-hooks/exhaustive-deps
     },
     EVENT_NAMES.map((name) => props[propName(name)]),
   );