@marimo-team/islands 0.21.2-dev69 → 0.21.2-dev71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev69",
+  "version": "0.21.2-dev71",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/range-focus/__tests__/use-cell-range-selection.test.ts

@@ -0,0 +1,119 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { isInteractiveTarget } from "../use-cell-range-selection";
+
+function createMouseEvent(
+  target: HTMLElement,
+  currentTarget: HTMLElement,
+): React.MouseEvent {
+  return { target, currentTarget } as unknown as React.MouseEvent;
+}
+
+describe("isInteractiveTarget", () => {
+  it("returns false when target is the cell itself", () => {
+    const cell = document.createElement("td");
+    expect(isInteractiveTarget(createMouseEvent(cell, cell))).toBe(false);
+  });
+
+  it("returns false when clicking plain text inside a cell", () => {
+    const cell = document.createElement("td");
+    const span = document.createElement("span");
+    cell.append(span);
+    expect(isInteractiveTarget(createMouseEvent(span, cell))).toBe(false);
+  });
+
+  it.each([
+    "input",
+    "button",
+    "select",
+    "textarea",
+  ])("returns true when clicking a <%s>", (tag) => {
+    const cell = document.createElement("td");
+    const el = document.createElement(tag);
+    cell.append(el);
+    expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
+  });
+
+  it("returns true when clicking an <a> link", () => {
+    const cell = document.createElement("td");
+    const a = document.createElement("a");
+    a.href = "#";
+    cell.append(a);
+    expect(isInteractiveTarget(createMouseEvent(a, cell))).toBe(true);
+  });
+
+  it("returns true when clicking a <label>", () => {
+    const cell = document.createElement("td");
+    const label = document.createElement("label");
+    cell.append(label);
+    expect(isInteractiveTarget(createMouseEvent(label, cell))).toBe(true);
+  });
+
+  it('returns true for element with role="checkbox"', () => {
+    const cell = document.createElement("td");
+    const div = document.createElement("div");
+    div.setAttribute("role", "checkbox");
+    cell.append(div);
+    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+  });
+
+  it('returns true for element with role="button"', () => {
+    const cell = document.createElement("td");
+    const div = document.createElement("div");
+    div.setAttribute("role", "button");
+    cell.append(div);
+    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+  });
+
+  it('returns true for contenteditable="true"', () => {
+    const cell = document.createElement("td");
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    cell.append(div);
+    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+  });
+
+  it("returns true when clicking a child nested inside an interactive element", () => {
+    const cell = document.createElement("td");
+    const button = document.createElement("button");
+    const icon = document.createElement("span");
+    button.append(icon);
+    cell.append(button);
+    expect(isInteractiveTarget(createMouseEvent(icon, cell))).toBe(true);
+  });
+
+  it("returns true when clicking inside a marimo-ui-element", () => {
+    const cell = document.createElement("td");
+    const marimoEl = document.createElement("marimo-ui-element");
+    const inner = document.createElement("div");
+    marimoEl.append(inner);
+    cell.append(marimoEl);
+    expect(isInteractiveTarget(createMouseEvent(inner, cell))).toBe(true);
+  });
+
+  it("returns true when clicking the marimo-ui-element itself", () => {
+    const cell = document.createElement("td");
+    const marimoEl = document.createElement("marimo-ui-element");
+    cell.append(marimoEl);
+    expect(isInteractiveTarget(createMouseEvent(marimoEl, cell))).toBe(true);
+  });
+
+  it("returns false when clicking a non-interactive div", () => {
+    const cell = document.createElement("td");
+    const wrapper = document.createElement("div");
+    const text = document.createElement("span");
+    wrapper.append(text);
+    cell.append(wrapper);
+    expect(isInteractiveTarget(createMouseEvent(text, cell))).toBe(false);
+  });
+
+  it("returns false when target is a non-Element (e.g. Text node)", () => {
+    const cell = document.createElement("td");
+    const textNode = document.createTextNode("hello");
+    cell.append(textNode);
+    expect(isInteractiveTarget(createMouseEvent(textNode as never, cell))).toBe(
+      false,
+    );
+  });
+});

package/src/components/data-table/range-focus/use-cell-range-selection.ts

@@ -91,6 +91,10 @@ export const useCellRangeSelection = <TData>({
         return;
       }
 
+      if (isInteractiveTarget(e)) {
+        return;
+      }
+
       actions.handleCellMouseDown({
         cell,
         isShiftKey: e.shiftKey,
@@ -122,3 +126,18 @@ export const useCellRangeSelection = <TData>({
     clearSelection: actions.clearSelection,
   };
 };
+
+const INTERACTIVE_SELECTOR =
+  'input, button, select, textarea, a, label, [role="checkbox"], [role="button"], [contenteditable="true"], marimo-ui-element';
+
+/**
+ * Skip cell selection when the click target is inside an interactive element
+ * (e.g. a checkbox or button rendered as rich cell content).
+ */
+export function isInteractiveTarget(e: React.MouseEvent): boolean {
+  const target = e.target;
+  if (target === e.currentTarget || !(target instanceof Element)) {
+    return false;
+  }
+  return target.closest(INTERACTIVE_SELECTOR) !== null;
+}

package/src/css/md.css

@@ -12,6 +12,16 @@
   margin-block-end: 0;
 }
 
+.markdown ul li,
+.markdown ol li {
+  margin-block: 0;
+}
+
+/* Restore browser default bullet cycling that Tailwind Typography overrides */
+.markdown ul ul {
+  list-style-type: revert;
+}
+
 .markdown h1 {
   text-align: start;
 }