@marimo-team/islands 0.23.4-dev18 → 0.23.4-dev21

package/dist/{vega-component-CjMUUeEZ.js → vega-component-BnCQmtxw.js}

@@ -15,7 +15,7 @@ import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats
 import { n as formats } from "./vega-loader.browser-3_z8GoFC.js";
 import { a as getContainerWidth, n as vegaLoadData, s as tooltipHandler } from "./loader-BvW0-YWZ.js";
 import { t as useAsyncData } from "./useAsyncData-CKYzhCis.js";
-import { t as j } from "./react-vega-C2Rtgjb4.js";
+import { t as j } from "./react-vega-k9ODWPlI.js";
 import "./defaultLocale-BpsHxBd7.js";
 import "./defaultLocale-DoeErsX2.js";
 import { t as useDeepCompareMemoize } from "./useDeepCompareMemoize-je76AJS_.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.4-dev18",
+  "version": "0.23.4-dev21",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -155,7 +155,7 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.6",
     "use-resize-observer": "^9.1.0",
-    "vega-lite": "6.3.1",
+    "vega-lite": "6.4.2",
     "vega-loader": "^5.1.0",
     "vega-parser": "^7.1.0",
     "vega-tooltip": "^1.1.0",

package/src/components/data-table/__tests__/columns.test.tsx

@@ -312,7 +312,7 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("center");
   });
 
-  it("should always left-align column headers regardless of text justification", () => {
+  it("should align column headers to match textJustifyColumns", () => {
     const columns = generateColumns({
       rowHeaders: [],
       selection: null,
@@ -330,7 +330,8 @@ describe("generateColumns", () => {
       columnDef: { meta: col.meta },
     });
 
-    // Even with right justification, header is left-aligned with sort + menu buttons
+    // Right-justified column: outer summary wrapper aligns to end, and the
+    // header row uses flex-row-reverse so the title sits at the right edge.
     const { container: rightContainer } = render(
       <TooltipProvider>
         {/* oxlint-disable-next-line typescript/no-explicit-any */}
@@ -345,12 +346,11 @@ describe("generateColumns", () => {
         "[data-testid='data-table-column-menu-button']",
       ),
     ).toBeTruthy();
-    // No flex-row-reverse or items-end on header
-    const rightWrapper = rightContainer.firstElementChild;
-    expect(rightWrapper?.className).not.toContain("items-end");
-    expect(rightWrapper?.className).not.toContain("flex-row-reverse");
+    expect(rightContainer.firstElementChild?.className).toContain("items-end");
+    expect(rightContainer.querySelector(".flex-row-reverse")).toBeTruthy();
 
-    // Same for center-justified column
+    // Center-justified column: outer summary wrapper centers; header row
+    // keeps natural order.
     const { container: centerContainer } = render(
       <TooltipProvider>
         {/* oxlint-disable-next-line typescript/no-explicit-any */}
@@ -365,9 +365,39 @@ describe("generateColumns", () => {
         "[data-testid='data-table-column-menu-button']",
       ),
     ).toBeTruthy();
-    const centerWrapper = centerContainer.firstElementChild;
-    expect(centerWrapper?.className).not.toContain("items-center");
-    expect(centerWrapper?.className).not.toContain("flex-row-reverse");
+    expect(centerContainer.firstElementChild?.className).toContain(
+      "items-center",
+    );
+    expect(centerContainer.querySelector(".flex-row-reverse")).toBeNull();
+  });
+
+  it("should not auto-align numeric column headers without explicit override", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+    });
+
+    const mockColumn = (col: (typeof columns)[number]) => ({
+      id: col.id,
+      getCanSort: () => true,
+      getCanFilter: () => false,
+      getIsSorted: () => false,
+      getSortIndex: () => -1,
+      getFilterValue: () => undefined,
+      columnDef: { meta: col.meta },
+    });
+
+    // "age" is numeric: cells auto right-align, but the header stays
+    // left-aligned unless the user explicitly opts in via text_justify_columns.
+    const { container } = render(
+      <TooltipProvider>
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
+        {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
+      </TooltipProvider>,
+    );
+    expect(container.firstElementChild?.className).not.toContain("items-end");
+    expect(container.querySelector(".flex-row-reverse")).toBeNull();
   });
 
   it("should cycle sort button through asc, desc, and clear on clicks", () => {

package/src/components/data-table/column-header.tsx

@@ -66,6 +66,7 @@ interface DataTableColumnHeaderProps<
   column: Column<TData, TValue>;
   header: React.ReactNode;
   subheader?: React.ReactNode;
+  justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
   table?: Table<TData>;
 }
@@ -74,6 +75,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   column,
   header,
   subheader,
+  justify,
   className,
   calculateTopKRows,
   table,
@@ -89,7 +91,13 @@ export const DataTableColumnHeader = <TData, TValue>({
   // No sorting or filtering
   if (!column.getCanSort() && !column.getCanFilter()) {
     return (
-      <div className={cn(className)}>
+      <div
+        className={cn(
+          justify === "center" && "text-center",
+          justify === "right" && "text-right",
+          className,
+        )}
+      >
         {header}
         {subheader}
       </div>
@@ -103,9 +111,24 @@ export const DataTableColumnHeader = <TData, TValue>({
       <div
         className={cn("group flex flex-col my-1 w-full select-none", className)}
       >
-        <div className="flex items-center gap-1">
-          <span>{header}</span>
-          {column.getCanSort() && <SortButton column={column} />}
+        <div
+          className={cn(
+            "flex items-center gap-1",
+            justify === "right" && "flex-row-reverse",
+            justify === "center" && "mx-auto",
+          )}
+        >
+          {justify === "center" ? (
+            <>
+              {column.getCanSort() && <SortButton column={column} />}
+              <span>{header}</span>
+            </>
+          ) : (
+            <>
+              <span>{header}</span>
+              {column.getCanSort() && <SortButton column={column} />}
+            </>
+          )}
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild={true}>
               <button

package/src/components/data-table/columns.tsx

@@ -197,9 +197,17 @@ export function generateColumns<T>({
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;
         const headerTitle = headerTooltip?.[key];
+        const headerJustify = textJustifyColumns?.[key];
+
         const dtypeHeader =
           showDataTypes && dtype ? (
-            <div className="flex flex-row gap-1">
+            <div
+              className={cn(
+                "flex flex-row gap-1",
+                headerJustify === "center" && "justify-center",
+                headerJustify === "right" && "justify-end",
+              )}
+            >
               <span className="text-xs text-muted-foreground">{dtype}</span>
               {stats && typeof stats.nulls === "number" && stats.nulls > 0 && (
                 <span className="text-xs text-muted-foreground">
@@ -233,6 +241,7 @@ export function generateColumns<T>({
             header={headerWithTooltip}
             subheader={dtypeHeader}
             column={column}
+            justify={headerJustify}
             calculateTopKRows={calculateTopKRows}
             table={table}
           />
@@ -247,6 +256,8 @@ export function generateColumns<T>({
           <div
             className={cn(
               "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
+              headerJustify === "center" && "items-center",
+              headerJustify === "right" && "items-end",
             )}
           >
             {dataTableColumnHeader}

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

@@ -1,117 +1,198 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { describe, expect, it } from "vitest";
+import { afterEach, 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;
+/**
+ * Dispatch a real `mousedown` from `target` (going through real DOM event
+ * dispatch so `composedPath()` traverses any open shadow roots) and call
+ * `isInteractiveTarget` from inside the listener, where the event's target
+ * and composed path are still live.
+ */
+function isInteractive(target: Element, cell: Element): boolean {
+  let result: boolean | undefined;
+  const handler = (event: Event) => {
+    const path = event.composedPath();
+    result = isInteractiveTarget({
+      target: event.target,
+      currentTarget: cell,
+      nativeEvent: {
+        composedPath: () => path,
+      },
+    } as unknown as React.MouseEvent);
+  };
+  cell.addEventListener("mousedown", handler);
+  target.dispatchEvent(
+    new MouseEvent("mousedown", { bubbles: true, composed: true }),
+  );
+  cell.removeEventListener("mousedown", handler);
+  if (result === undefined) {
+    throw new Error("mousedown did not bubble to the cell");
+  }
+  return result;
+}
+
+let mounted: HTMLElement[] = [];
+
+function makeCell(): HTMLTableCellElement {
+  const table = document.createElement("table");
+  const tbody = document.createElement("tbody");
+  const row = document.createElement("tr");
+  const cell = document.createElement("td");
+  row.append(cell);
+  tbody.append(row);
+  table.append(tbody);
+  document.body.append(table);
+  mounted.push(table);
+  return cell;
 }
 
+afterEach(() => {
+  for (const el of mounted) {
+    el.remove();
+  }
+  mounted = [];
+});
+
 describe("isInteractiveTarget", () => {
   it("returns false when target is the cell itself", () => {
-    const cell = document.createElement("td");
-    expect(isInteractiveTarget(createMouseEvent(cell, cell))).toBe(false);
+    const cell = makeCell();
+    expect(isInteractive(cell, cell)).toBe(false);
   });
 
   it("returns false when clicking plain text inside a cell", () => {
-    const cell = document.createElement("td");
+    const cell = makeCell();
     const span = document.createElement("span");
     cell.append(span);
-    expect(isInteractiveTarget(createMouseEvent(span, cell))).toBe(false);
+    expect(isInteractive(span, cell)).toBe(false);
   });
 
   it.each(["input", "button", "select", "textarea"])(
     "returns true when clicking a <%s>",
     (tag) => {
-      const cell = document.createElement("td");
+      const cell = makeCell();
       const el = document.createElement(tag);
       cell.append(el);
-      expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
+      expect(isInteractive(el, cell)).toBe(true);
     },
   );
 
   it("returns true when clicking an <a> link", () => {
-    const cell = document.createElement("td");
+    const cell = makeCell();
     const a = document.createElement("a");
     a.href = "#";
     cell.append(a);
-    expect(isInteractiveTarget(createMouseEvent(a, cell))).toBe(true);
+    expect(isInteractive(a, cell)).toBe(true);
   });
 
   it("returns true when clicking a <label>", () => {
-    const cell = document.createElement("td");
+    const cell = makeCell();
     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);
+    expect(isInteractive(label, 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.each(["checkbox", "button"])(
+    'returns true for element with role="%s"',
+    (role) => {
+      const cell = makeCell();
+      const div = document.createElement("div");
+      div.setAttribute("role", role);
+      cell.append(div);
+      expect(isInteractive(div, cell)).toBe(true);
+    },
+  );
 
   it('returns true for contenteditable="true"', () => {
-    const cell = document.createElement("td");
+    const cell = makeCell();
     const div = document.createElement("div");
     div.setAttribute("contenteditable", "true");
     cell.append(div);
-    expect(isInteractiveTarget(createMouseEvent(div, cell))).toBe(true);
+    expect(isInteractive(div, cell)).toBe(true);
   });
 
   it("returns true when clicking a child nested inside an interactive element", () => {
-    const cell = document.createElement("td");
+    const cell = makeCell();
     const button = document.createElement("button");
     const icon = document.createElement("span");
     button.append(icon);
     cell.append(button);
-    expect(isInteractiveTarget(createMouseEvent(icon, cell))).toBe(true);
+    expect(isInteractive(icon, cell)).toBe(true);
   });
 
-  it("returns true when clicking inside a marimo-ui-element", () => {
-    const cell = document.createElement("td");
+  it("returns true when clicking inside a marimo-ui-element wrapping a real widget", () => {
+    const cell = makeCell();
     const marimoEl = document.createElement("marimo-ui-element");
-    const inner = document.createElement("div");
-    marimoEl.append(inner);
+    const widget = document.createElement("marimo-slider");
+    marimoEl.append(widget);
     cell.append(marimoEl);
-    expect(isInteractiveTarget(createMouseEvent(inner, cell))).toBe(true);
+    expect(isInteractive(widget, cell)).toBe(true);
+    expect(isInteractive(marimoEl, cell)).toBe(true);
   });
 
-  it("returns true when clicking the marimo-ui-element itself", () => {
-    const cell = document.createElement("td");
+  it.each(["marimo-lazy", "marimo-routes"])(
+    "returns false when clicking inside a passive content-wrapper UIElement (%s)",
+    (tag) => {
+      const cell = makeCell();
+      const marimoEl = document.createElement("marimo-ui-element");
+      const wrapper = document.createElement(tag);
+      const inner = document.createElement("div");
+      wrapper.append(inner);
+      marimoEl.append(wrapper);
+      cell.append(marimoEl);
+      expect(isInteractive(inner, cell)).toBe(false);
+      expect(isInteractive(wrapper, cell)).toBe(false);
+    },
+  );
+
+  it("returns false when clicking plain content rendered through mo.lazy's shadow DOM (#9189)", () => {
+    // Reproduces the structure marimo creates for mo.lazy(<plain html>):
+    // event.target gets retargeted to <marimo-lazy>, so closest() can't see
+    // into the shadow root. composedPath() must be used to confirm there's
+    // no genuinely interactive descendant.
+    const cell = makeCell();
     const marimoEl = document.createElement("marimo-ui-element");
+    const lazy = document.createElement("marimo-lazy");
+    marimoEl.append(lazy);
     cell.append(marimoEl);
-    expect(isInteractiveTarget(createMouseEvent(marimoEl, cell))).toBe(true);
+
+    const shadow = lazy.attachShadow({ mode: "open" });
+    const img = document.createElement("img");
+    shadow.append(img);
+
+    expect(isInteractive(img, cell)).toBe(false);
+  });
+
+  it("returns true when clicking an interactive widget rendered inside a content wrapper's shadow DOM", () => {
+    // mo.lazy(mo.ui.slider(...)): the slider's <marimo-ui-element> lives
+    // inside marimo-lazy's shadow root, so closest() from the retargeted
+    // host couldn't see it. composedPath() does.
+    const cell = makeCell();
+    const outerUi = document.createElement("marimo-ui-element");
+    const lazy = document.createElement("marimo-lazy");
+    outerUi.append(lazy);
+    cell.append(outerUi);
+
+    const lazyShadow = lazy.attachShadow({ mode: "open" });
+    const innerUi = document.createElement("marimo-ui-element");
+    const slider = document.createElement("marimo-slider");
+    innerUi.append(slider);
+    lazyShadow.append(innerUi);
+
+    const sliderShadow = slider.attachShadow({ mode: "open" });
+    const input = document.createElement("input");
+    input.type = "range";
+    sliderShadow.append(input);
+
+    expect(isInteractive(input, cell)).toBe(true);
   });
 
   it("returns false when clicking a non-interactive div", () => {
-    const cell = document.createElement("td");
+    const cell = makeCell();
     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,
-    );
+    expect(isInteractive(text, cell)).toBe(false);
   });
 });

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

@@ -130,14 +130,46 @@ export const useCellRangeSelection = <TData>({
 const INTERACTIVE_SELECTOR =
   'input, button, select, textarea, a, label, [role="checkbox"], [role="button"], [contenteditable="true"], marimo-ui-element';
 
+// `<marimo-ui-element>` wraps every stateful UIElement, but content-wrapper
+// UIElements like `mo.lazy` and `mo.routes` are themselves inert. Clicks on
+// their inner content should still allow cell selection.
+// See https://github.com/marimo-team/marimo/issues/9189.
+const CONTENT_WRAPPER_MARIMO_TAGS: ReadonlySet<string> = new Set([
+  "marimo-lazy",
+  "marimo-routes",
+]);
+
 /**
  * Skip cell selection when the click target is inside an interactive element
  * (e.g. a checkbox or button rendered as rich cell content).
+ *
+ * Walks `composedPath()` so we can see through Shadow DOM boundaries used by
+ * marimo plugins. Without this, `event.target` is retargeted to the outermost
+ * shadow host (e.g. `<marimo-lazy>`), hiding any genuinely interactive
+ * descendants rendered inside the shadow tree.
  */
 export function isInteractiveTarget(e: React.MouseEvent): boolean {
-  const target = e.target;
-  if (target === e.currentTarget || !(target instanceof Element)) {
-    return false;
+  const path: readonly EventTarget[] =
+    typeof e.nativeEvent?.composedPath === "function"
+      ? e.nativeEvent.composedPath()
+      : [e.target];
+
+  for (const node of path) {
+    if (node === e.currentTarget) {
+      break;
+    }
+    if (!(node instanceof Element) || !node.matches(INTERACTIVE_SELECTOR)) {
+      continue;
+    }
+    // A `<marimo-ui-element>` directly wrapping a passive content-wrapper is
+    // inert; keep walking to find a real interactive ancestor (if any).
+    if (node.localName === "marimo-ui-element") {
+      const inner = node.firstElementChild;
+      if (inner && CONTENT_WRAPPER_MARIMO_TAGS.has(inner.localName)) {
+        continue;
+      }
+    }
+    return true;
   }
-  return target.closest(INTERACTIVE_SELECTOR) !== null;
+  return false;
 }