@marimo-team/frontend 0.23.4-dev9 → 0.23.5-dev1

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

@@ -9,7 +9,7 @@ import {
   TextIcon,
   XIcon,
 } from "lucide-react";
-import { useMemo, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useLocale } from "react-aria";
 import {
   DropdownMenu,
@@ -22,24 +22,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { useAsyncData } from "@/hooks/useAsyncData";
-import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
-import { Logger } from "@/utils/Logger";
 import { capitalize } from "@/utils/strings";
-import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
-import { Checkbox } from "../ui/checkbox";
-import {
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../ui/command";
 import { DraggablePopover } from "../ui/draggable-popover";
 import { Input } from "../ui/input";
 import { NumberField } from "../ui/number-field";
@@ -52,8 +40,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/select";
-import { type ColumnFilterForType, Filter } from "./filters";
-import { SentinelCell } from "./sentinel-cell";
+import { FilterByValuesList } from "./filter-by-values-picker";
+import {
+  type ColumnFilterForType,
+  type ColumnFilterValue,
+  Filter,
+} from "./filters";
 import {
   ClearFilterMenuItem,
   FilterButtons,
@@ -66,9 +58,6 @@ import {
   renderSortFilterIcon,
   renderSorts,
 } from "./header-items";
-import { detectSentinel, stringifyUnknownValue } from "./utils";
-
-const TOP_K_ROWS = 30;
 
 interface DataTableColumnHeaderProps<
   TData,
@@ -77,6 +66,7 @@ interface DataTableColumnHeaderProps<
   column: Column<TData, TValue>;
   header: React.ReactNode;
   subheader?: React.ReactNode;
+  justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
   table?: Table<TData>;
 }
@@ -85,6 +75,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   column,
   header,
   subheader,
+  justify,
   className,
   calculateTopKRows,
   table,
@@ -100,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>
@@ -114,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
@@ -534,6 +546,26 @@ const TextFilter = <TData, TValue>({
   );
 };
 
+/**
+ * Seed the filter-by-values picker from a column's existing filter value.
+ *
+ * Reopening the picker should reflect what's already applied. Only `select`
+ * filters carry checkbox-style values; other filter shapes (number, text,
+ * etc.) seed an empty list.
+ */
+export function seedFromFilter(value: ColumnFilterValue | undefined): {
+  values: unknown[];
+  operator: Extract<OperatorType, "in" | "not_in">;
+} {
+  if (value && "type" in value && value.type === "select") {
+    return {
+      values: [...value.options],
+      operator: value.operator === "not_in" ? "not_in" : "in",
+    };
+  }
+  return { values: [], operator: "in" };
+}
+
 const PopoverFilterByValues = <TData, TValue>({
   setIsFilterValueOpen,
   calculateTopKRows,
@@ -543,69 +575,13 @@ const PopoverFilterByValues = <TData, TValue>({
   calculateTopKRows?: CalculateTopKRows;
   column: Column<TData, TValue>;
 }) => {
-  const [chosenValues, setChosenValues] = useState<Set<unknown>>(new Set());
-  const [query, setQuery] = useState<string>("");
-
-  const { data, isPending, error } = useAsyncData(async () => {
-    if (!calculateTopKRows) {
-      return null;
-    }
-    const res = await calculateTopKRows({ column: column.id, k: TOP_K_ROWS });
-    return res.data;
-  }, []);
-
-  const filteredData = useMemo(() => {
-    if (!data) {
-      return [];
-    }
-
-    try {
-      return data.filter(([value, _count]) => {
-        // Check if value exists and can be converted to string
-        // Keep null values for filtering
-        return value === undefined
-          ? false
-          : String(value).toLowerCase().includes(query.toLowerCase());
-      });
-    } catch (error_) {
-      Logger.error("Error filtering data", error_);
-      return [];
-    }
-  }, [data, query]);
-
-  let dataTable: React.ReactNode;
-
-  if (isPending) {
-    dataTable = <Spinner size="medium" className="mx-auto mt-12 mb-10" />;
-  }
-
-  if (error) {
-    dataTable = <ErrorBanner error={error} className="my-10 mx-4" />;
-  }
-
-  const handleToggle = (value: unknown) => {
-    setChosenValues((prev) => {
-      const checked = prev.has(value);
-      const newSet = new Set(prev);
-      if (checked) {
-        newSet.delete(value);
-      } else {
-        newSet.add(value);
-      }
-      return newSet;
-    });
-  };
+  const seed = seedFromFilter(
+    column.getFilterValue() as ColumnFilterValue | undefined,
+  );
 
-  const handleToggleAll = (checked: boolean) => {
-    if (!data) {
-      return;
-    }
-    if (checked) {
-      setChosenValues(new Set(filteredData.map(([value]) => value)));
-    } else {
-      setChosenValues(new Set());
-    }
-  };
+  const [chosenValues, setChosenValues] = useState<Set<unknown>>(
+    () => new Set(seed.values),
+  );
 
   const handleApply = () => {
     if (chosenValues.size === 0) {
@@ -613,87 +589,13 @@ const PopoverFilterByValues = <TData, TValue>({
       return;
     }
     column.setFilterValue(
-      Filter.select({ options: [...chosenValues], operator: "in" }),
+      Filter.select({
+        options: [...chosenValues],
+        operator: seed.operator,
+      }),
     );
   };
 
-  if (data) {
-    const allChecked = chosenValues.size === filteredData.length;
-
-    dataTable = (
-      <>
-        <Command className="text-sm outline-hidden" shouldFilter={false}>
-          <CommandInput
-            placeholder={`Search among the top ${data.length} values`}
-            autoFocus={true}
-            onValueChange={(value) => setQuery(value.trim())}
-          />
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandList className="border-b">
-            {filteredData.length > 0 && (
-              <CommandItem
-                value="__select-all__"
-                className="border-b rounded-none px-3"
-                onSelect={() => handleToggleAll(!allChecked)}
-              >
-                <Checkbox
-                  checked={chosenValues.size === filteredData.length}
-                  aria-label="Select all"
-                  className="mr-3 h-3.5 w-3.5"
-                />
-                <span className="font-bold flex-1">{column.id}</span>
-                <span className="font-bold">Count</span>
-              </CommandItem>
-            )}
-            {filteredData.map(([value, count], rowIndex) => {
-              const isSelected = chosenValues.has(value);
-              const valueString = stringifyUnknownValue({ value });
-              const sentinel = detectSentinel(
-                value,
-                column.columnDef.meta?.dataType,
-              );
-
-              return (
-                <CommandItem
-                  key={rowIndex}
-                  value={valueString}
-                  className="not-last:border-b rounded-none px-3"
-                  onSelect={() => handleToggle(value)}
-                >
-                  <Checkbox
-                    checked={isSelected}
-                    aria-label="Select row"
-                    className="mr-3 h-3.5 w-3.5"
-                  />
-                  <span className="flex-1 overflow-hidden max-h-20 line-clamp-3">
-                    {sentinel ? (
-                      <SentinelCell sentinel={sentinel} />
-                    ) : (
-                      valueString
-                    )}
-                  </span>
-                  <span className="ml-3">{count}</span>
-                </CommandItem>
-              );
-            })}
-          </CommandList>
-          {filteredData.length === TOP_K_ROWS && (
-            <span className="text-xs text-muted-foreground mt-1.5 text-center">
-              Only showing the top {TOP_K_ROWS} values
-            </span>
-          )}
-        </Command>
-        <FilterButtons
-          onApply={handleApply}
-          onClear={() => {
-            setChosenValues(new Set());
-          }}
-          clearButtonDisabled={chosenValues.size === 0}
-        />
-      </>
-    );
-  }
-
   return (
     <DraggablePopover
       open={true}
@@ -709,7 +611,19 @@ const PopoverFilterByValues = <TData, TValue>({
           <XIcon className="h-4 w-4" />
         </Button>
       </PopoverClose>
-      <div className="flex flex-col gap-1.5 py-2">{dataTable}</div>
+      <div className="flex flex-col gap-1.5 py-2">
+        <FilterByValuesList
+          column={column}
+          calculateTopKRows={calculateTopKRows}
+          chosenValues={chosenValues}
+          onChange={(values) => setChosenValues(new Set(values))}
+        />
+        <FilterButtons
+          onApply={handleApply}
+          onClear={() => setChosenValues(new Set())}
+          clearButtonDisabled={chosenValues.size === 0}
+        />
+      </div>
     </DraggablePopover>
   );
 };

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/filter-by-values-picker.tsx

@@ -74,7 +74,7 @@ export const FilterByValuesPicker = <TData, TValue>({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-80 p-0">
-        <PickerBody
+        <FilterByValuesList
           column={column}
           calculateTopKRows={calculateTopKRows}
           chosenValues={chosenValuesSet}
@@ -85,19 +85,22 @@ export const FilterByValuesPicker = <TData, TValue>({
   );
 };
 
-interface PickerBodyProps<TData, TValue> {
+interface FilterByValuesListProps<TData, TValue> {
   column: Column<TData, TValue>;
   calculateTopKRows?: CalculateTopKRows;
   chosenValues: Set<unknown>;
   onChange: (values: unknown[]) => void;
 }
 
-const PickerBody = <TData, TValue>({
+/**
+ * Search + checkbox list that powers the "filter by values" picker.
+ */
+export const FilterByValuesList = <TData, TValue>({
   column,
   calculateTopKRows,
   chosenValues,
   onChange,
-}: PickerBodyProps<TData, TValue>) => {
+}: FilterByValuesListProps<TData, TValue>) => {
   const [query, setQuery] = useState<string>("");
 
   const { data, isPending, error } = useAsyncData(async () => {

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);
   });
 });