@marimo-team/islands 0.25.2-dev99 → 0.25.2

package/src/css/katex-css.test.ts

@@ -32,7 +32,7 @@ describe("copied KaTeX stylesheet", () => {
       if (change === "added") {
         root.append(
           postcss.parse(
-            ".katex .reflectbox { display: inline-block; transform: scaleX(-1); }",
+            ".katex .upstream-drift-probe { display: inline-block; }",
           ),
         );
       } else {

package/src/css/katex.min.css

@@ -35,7 +35,7 @@
 }
 
 .katex .katex-version::after {
-  content: "0.18.5";
+  content: "0.18.7";
 }
 
 .katex .katex-mathml {
@@ -1131,6 +1131,11 @@
   padding: 0 0.03889em;
 }
 
+.katex .reflectbox {
+  display: inline-block;
+  transform: scaleX(-1);
+}
+
 .katex .eqn-num::before {
   content: "(" counter(katexEqnNo) ")";
   counter-increment: katexEqnNo;

package/src/hooks/__tests__/useEventListener.test.tsx

@@ -2,7 +2,7 @@
 
 import { renderHook } from "@testing-library/react";
 import { useRef } from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   type HTMLElementNotDerivedFromRef,
   isRefObject,
@@ -28,6 +28,50 @@ describe("isRefObject", () => {
   });
 });
 
+describe.each([1, 2])("with %i anchors named current", (count) => {
+  let iframe: HTMLIFrameElement;
+  let browserWindow: Window;
+
+  beforeEach(() => {
+    // An iframe preserves named properties hidden by Vitest's global window.
+    iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    if (!iframe.contentWindow) {
+      throw new Error("Expected an iframe window");
+    }
+    browserWindow = iframe.contentWindow;
+    const anchors = Array.from({ length: count }, () => {
+      const anchor = browserWindow.document.createElement("a");
+      anchor.id = "current";
+      return anchor;
+    });
+    browserWindow.document.body.append(...anchors);
+  });
+
+  afterEach(() => {
+    iframe.remove();
+  });
+
+  it("does not mistake window for a React ref", () => {
+    expect("current" in browserWindow).toBe(true);
+    expect(isRefObject(browserWindow)).toBe(false);
+  });
+
+  it("attaches and removes the listener on window", () => {
+    const listener = vi.fn();
+    const { unmount } = renderHook(() =>
+      useEventListener(browserWindow, "resize", listener),
+    );
+
+    browserWindow.dispatchEvent(new Event("resize"));
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unmount();
+    browserWindow.dispatchEvent(new Event("resize"));
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe("useEventListener", () => {
   beforeEach(() => {
     vi.clearAllMocks();

package/src/hooks/useEventListener.ts

@@ -13,7 +13,12 @@ export type HTMLElementNotDerivedFromRef<T = HTMLElement> = T & {
 };
 
 export function isRefObject<T>(target: unknown): target is RefObject<T | null> {
-  return target !== null && typeof target === "object" && "current" in target;
+  return (
+    target !== null &&
+    typeof target === "object" &&
+    !("addEventListener" in target) &&
+    "current" in target
+  );
 }
 
 export function useEventListener<K extends keyof DocumentEventMap>(

package/src/plugins/impl/NumberPlugin.tsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { useDebounceControlledState } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
+import { clamp } from "@/utils/math";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
 
@@ -65,8 +66,16 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
     onChange: props.setValue,
   });
 
+  const clampToRange = (n: number) =>
+    clamp(n, props.start ?? -Infinity, props.stop ?? Infinity);
+
   const handleChange = (newValue: number) => {
-    onChange(withoutNaN(newValue));
+    const n = withoutNaN(newValue);
+    const next = n == null ? null : clampToRange(n);
+    // e.g. typing past `stop` while already at `stop`
+    if (next !== value) {
+      onChange(next);
+    }
   };
 
   return (
@@ -76,11 +85,19 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
         className={cn("min-w-[3em]", props.fullWidth && "w-full")}
         minValue={props.start ?? undefined}
         maxValue={props.stop ?? undefined}
-        // This needs to be `?? NaN` since `?? undefined` makes  uncontrolled component
+        // This needs to be `NaN` since `undefined` makes  uncontrolled component
         // and can lead to leaving the old value in forms (https://github.com/marimo-team/marimo/issues/7352)
         // We out NaNs later
-        value={value ?? Number.NaN}
+        value={value == null ? Number.NaN : clampToRange(value)}
         step={props.step}
+        // By default React Aria rounds every value to `start + n * step`, but
+        // `step` is only the stepper increment: users can enter any value in
+        // range (#9106). "validate" turns off that rounding (and the clamping,
+        // done above instead); its step validation is turned off so off-step
+        // values aren't flagged invalid or block `mo.ui.form` submission.
+        commitBehavior="validate"
+        validationBehavior="aria"
+        isInvalid={false}
         onChange={handleChange}
         id={id}
         aria-label={props.label || "Number input"}

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
+import { useState } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { z } from "zod";
 import { initialModeAtom } from "@/core/mode";
@@ -474,4 +475,161 @@ describe("NumberPlugin", () => {
     );
     expect(numberField?.classList.contains("w-full")).toBe(true);
   });
+
+  describe("does not snap values to step (#9106)", () => {
+    // Feeds `setValue` back into `value`, as the kernel round-trip does.
+    const renderNumber = (
+      initialValue: number,
+      data: Pick<z.infer<NumberPlugin["validator"]>, "start" | "stop" | "step">,
+      { debounce = false } = {},
+    ) => {
+      const plugin = new NumberPlugin();
+      const setValue = vi.fn();
+      const Harness = () => {
+        const [value, setState] = useState<number | null>(initialValue);
+        return plugin.render({
+          host: document.createElement("div"),
+          value,
+          setValue: (next) => {
+            setValue(next);
+            setState(next);
+          },
+          data: {
+            ...data,
+            label: null,
+            debounce,
+            fullWidth: false,
+          },
+          functions: {},
+        });
+      };
+      const { getByRole } = render(<Harness />);
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+      const input = getByRole("textbox", {
+        name: "Number input",
+      }) as HTMLInputElement;
+      return { input, setValue };
+    };
+
+    const typeAndCommit = (input: HTMLInputElement, text: string) => {
+      act(() => {
+        input.focus();
+      });
+      fireEvent.change(input, { target: { value: text } });
+      act(() => {
+        input.blur();
+      });
+    };
+
+    it.each([
+      { value: 2.23, start: 1.255_57, step: 0.001 },
+      { value: 2.233_45, start: 1, step: 0.001 },
+    ])(
+      "displays $value as-is with start=$start and step=$step",
+      ({ value, start, step }) => {
+        const { input } = renderNumber(value, { start, stop: 20, step });
+        expect(input.value).toBe(String(value));
+      },
+    );
+
+    it.each([
+      { typed: "2.3377", start: 1, step: 0.01 },
+      { typed: "2.23111", start: 1.222, step: 0.01 },
+    ])(
+      "keeps typed value $typed with start=$start and step=$step",
+      ({ typed, start, step }) => {
+        const { input, setValue } = renderNumber(2.233_45, {
+          start,
+          stop: 20,
+          step,
+        });
+        typeAndCommit(input, typed);
+        expect(setValue).toHaveBeenLastCalledWith(Number(typed));
+        expect(input.value).toBe(typed);
+        expect(input.getAttribute("aria-invalid")).not.toBe("true");
+        // React Aria sets a custom validity on this text input in native mode,
+        // which would block `mo.ui.form` submission.
+        expect(input.validity.valid).toBe(true);
+      },
+    );
+
+    it("clamps typed values to start and stop", () => {
+      const { input, setValue } = renderNumber(5, {
+        start: 2,
+        stop: 10,
+        step: 1,
+      });
+      typeAndCommit(input, "25");
+      expect(setValue).toHaveBeenLastCalledWith(10);
+      expect(input.value).toBe("10");
+      typeAndCommit(input, "1");
+      expect(setValue).toHaveBeenLastCalledWith(2);
+      expect(input.value).toBe("2");
+    });
+
+    it("shows the bound when typing past a bound it is already at", () => {
+      const { input, setValue } = renderNumber(10, {
+        start: 2,
+        stop: 10,
+        step: 1,
+      });
+      typeAndCommit(input, "50");
+      expect(setValue).not.toHaveBeenCalled();
+      expect(input.value).toBe("10");
+    });
+
+    it("increments and decrements by step", () => {
+      const { input, setValue } = renderNumber(5, {
+        start: 0,
+        stop: 10,
+        step: 0.5,
+      });
+      fireEvent.keyDown(input, { key: "ArrowUp" });
+      expect(setValue).toHaveBeenLastCalledWith(5.5);
+      expect(input.value).toBe("5.5");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(setValue).toHaveBeenLastCalledWith(5);
+      expect(input.value).toBe("5");
+    });
+
+    it.each([
+      { key: "ArrowUp", expected: 3 },
+      { key: "ArrowDown", expected: 2 },
+    ])(
+      "$key from an off-step value moves to the nearest step ($expected)",
+      ({ key, expected }) => {
+        const { input, setValue } = renderNumber(2.23, {
+          start: 0,
+          stop: 10,
+          step: 1,
+        });
+        fireEvent.keyDown(input, { key });
+        expect(setValue).toHaveBeenLastCalledWith(expected);
+        expect(input.value).toBe(String(expected));
+      },
+    );
+
+    it.each([
+      { typed: "2.3377", expected: 2.3377 },
+      { typed: "50", expected: 20 },
+    ])(
+      "commits typed $typed as $expected after the debounce delay",
+      ({ typed, expected }) => {
+        const { input, setValue } = renderNumber(
+          2.233_45,
+          { start: 1, stop: 20, step: 0.01 },
+          { debounce: true },
+        );
+        typeAndCommit(input, typed);
+        expect(setValue).not.toHaveBeenCalled();
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+        expect(setValue).toHaveBeenLastCalledWith(expected);
+        expect(input.value).toBe(String(expected));
+      },
+    );
+  });
 });

package/dist/assets/__vite-browser-external-BqAtzd2P.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-Bf8dt6S-.js";var t=e(((e,t)=>{t.exports={}}));export default t();