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

package/dist/main.js

@@ -31074,12 +31074,12 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }, r[9] = d, r[10] = h, r[11] = S, r[12] = c, r[13] = w) : w = r[13];
     let E = useEvent_default(w), O;
     r[14] !== d || r[15] !== c ? (O = (e2, r2) => {
-      e2.buttons !== 2 && d.handleCellMouseDown({
+      e2.buttons !== 2 && (isInteractiveTarget(e2) || d.handleCellMouseDown({
         cell: r2,
         isShiftKey: e2.shiftKey,
         isCtrlKey: e2.ctrlKey,
         table: c
-      });
+      }));
     }, r[14] = d, r[15] = c, r[16] = O) : O = r[16];
     let M = useEvent_default(O), I;
     r[17] === d ? I = r[18] : (I = () => {
@@ -31103,6 +31103,11 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       clearSelection: d.clearSelection
     }, r[22] = d.clearSelection, r[23] = M, r[24] = q, r[25] = z, r[26] = E, r[27] = h, r[28] = v, r[29] = e9) : e9 = r[29], e9;
   };
+  var INTERACTIVE_SELECTOR = 'input, button, select, textarea, a, label, [role="checkbox"], [role="button"], [contenteditable="true"], marimo-ui-element';
+  function isInteractiveTarget(e) {
+    let r = e.target;
+    return r === e.currentTarget || !(r instanceof Element) ? false : r.closest(INTERACTIVE_SELECTOR) !== null;
+  }
   var import_compiler_runtime$101 = require_compiler_runtime(), focusedCellAtom = atom((e) => e(cellSelectionStateAtom).focusedCell);
   function useScrollIntoViewOnFocus(e) {
     let r = (0, import_compiler_runtime$101.c)(2), c;
@@ -64761,7 +64766,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev69"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev70"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev69",
+  "version": "0.21.2-dev70",
   "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;
+}