@marimo-team/islands 0.22.1-dev4 → 0.22.1-dev40

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

@@ -69,43 +69,39 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   }
 
   return (
-    <div className="flex items-center h-10 px-2 border-b gap-3">
-      {/* always-visible search */}
+    <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
-        <div className="flex items-center">
-          <div className="flex items-center gap-1 rounded-full border px-2 w-56">
-            <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
-            <input
-              ref={inputRef}
-              type="text"
-              className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
-              value={internalValue}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  setInternalValue("");
-                  inputRef.current?.blur();
-                }
-              }}
-              onChange={(e) => setInternalValue(e.target.value)}
-              placeholder="Search..."
-            />
-            {reloading && <Spinner size="small" />}
-            {internalValue && (
-              <Button
-                variant="text"
-                size="xs"
-                className="h-5 w-5 p-0 shrink-0"
-                onClick={() => setInternalValue("")}
-              >
-                <XIcon className="w-3 h-3 text-muted-foreground" />
-              </Button>
-            )}
-          </div>
+        <div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
+          <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
+            value={internalValue}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setInternalValue("");
+                inputRef.current?.blur();
+              }
+            }}
+            onChange={(e) => setInternalValue(e.target.value)}
+            placeholder="Search..."
+          />
+          {reloading && <Spinner size="small" />}
+          {internalValue && (
+            <Button
+              variant="text"
+              size="xs"
+              className="h-5 w-5 p-0 shrink-0"
+              onClick={() => setInternalValue("")}
+            >
+              <XIcon className="w-3 h-3 text-muted-foreground" />
+            </Button>
+          )}
         </div>
       )}
 
-      {/* actions grouped together */}
-      <div className="flex items-center gap-1 shrink-0">
+      <div className="flex items-center shrink-0">
         {showChartBuilder && (
           <Button
             variant="text"
@@ -117,7 +113,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-3.5 h-3.5" />
-            Chart Builder
+            Visualize
           </Button>
         )}
         {showTableExplorer && togglePanel && (
@@ -131,7 +127,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
           >
             <PanelRightIcon className="w-3.5 h-3.5" />
-            Table Explorer
+            Explorer
           </Button>
         )}
         {downloadAs && <ExportMenu downloadAs={downloadAs} />}

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

@@ -230,7 +230,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is a number column — should auto right-align
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -241,7 +241,7 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("text-right");
 
     // "name" is a string column — should remain left-aligned
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -261,7 +261,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is numeric but explicitly set to left
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -301,7 +301,7 @@ describe("generateColumns", () => {
     });
 
     // Assuming getCellStyleClass is a function that returns a class name
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -333,7 +333,7 @@ describe("generateColumns", () => {
     // Right-justified: parent wrapper should have items-end, sort/filter icons should flip to the left
     const { container: rightContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[0].header as any)({ column: mockColumn(columns[0]) })}
       </TooltipProvider>,
     );
@@ -347,7 +347,7 @@ describe("generateColumns", () => {
     // Center-justified: parent wrapper should have items-center, no flex-row-reverse
     const { container: centerContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
       </TooltipProvider>,
     );
@@ -572,7 +572,7 @@ describe("LocaleNumber", () => {
         <LocaleNumber value={1_234_567.89} />
       </I18nProvider>,
     );
-    // eslint-disable-next-line no-irregular-whitespace
+    // oxlint-disable-next-line no-irregular-whitespace
     expect(container.textContent).toMatchInlineSnapshot(`"1 234 567,89"`);
   });
 

package/src/components/data-table/cell-hover-template/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 export interface CellHoverTemplateTableState {
   cellHoverTemplate: string | null;

package/src/components/data-table/cell-hover-text/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { RowData } from "@tanstack/react-table";
 

package/src/components/data-table/cell-selection/__tests__/feature.test.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { Cell, Column, Row, Table } from "@tanstack/react-table";
 import { describe, expect, it, vi } from "vitest";

package/src/components/data-table/cell-selection/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData, Updater } from "@tanstack/react-table";
 
 export interface CellSelectionItem {
@@ -40,8 +40,9 @@ export interface CellSelectionInstance<TData extends RowData> {
 declare module "@tanstack/react-table" {
   interface TableState extends CellSelectionTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends CellSelectionOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CellSelectionOptions {}
 
   interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}
 

package/src/components/data-table/cell-styling/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export type CellStyleState = Record<

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -78,7 +78,7 @@ export function generateAltairChart(
 
     if (encodings?.tooltip) {
       const tooltip = encodings.tooltip;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // oxlint-disable-next-line typescript/no-explicit-any
       const makeTooltip = (t: Record<string, any>) => {
         const kwargs = makeKwargs(t);
         return new FunctionCall("alt.Tooltip", kwargs);
@@ -149,7 +149,7 @@ ${variableName}
   `.trim();
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function makeKwargs<T extends Record<string, any>>(obj: T) {
   const result: Record<string, PythonCode> = {};
 

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

@@ -13,7 +13,7 @@ import {
   XIcon,
 } from "lucide-react";
 import type { JSX } from "react";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import useResizeObserver from "use-resize-observer";
 import { PythonIcon } from "@/components/editor/cell/code/icons";
@@ -61,6 +61,7 @@ export interface TablePanelProps {
   totalRows: number | TooManyRows;
   columns: number;
   displayHeader: boolean;
+  onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
 }
@@ -74,12 +75,33 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   getDataUrl,
   fieldTypes,
   displayHeader,
+  onCloseChartBuilder,
 }) => {
   const [tabsMap, saveTabsMap] = useAtom(tabsStorageAtom);
   const tabs = cellId ? (tabsMap.get(cellId) ?? []) : [];
 
-  const [tabNum, setTabNum] = useState(0);
   const [selectedTab, setSelectedTab] = useState(DEFAULT_TAB_NAME);
+  const [tabCounter, setTabCounter] = useState(tabs.length);
+  const prevDisplayHeader = useRef(displayHeader);
+
+  // Auto-create a default chart tab when chart builder opens with no tabs
+  if (
+    displayHeader &&
+    !prevDisplayHeader.current &&
+    tabs.length === 0 &&
+    cellId
+  ) {
+    prevDisplayHeader.current = displayHeader;
+    const tabName = getChartTabName(0, NEW_CHART_TYPE);
+    const newTabs = new Map(tabsMap);
+    newTabs.set(cellId, [
+      { tabName, chartType: NEW_CHART_TYPE, config: getChartDefaults() },
+    ]);
+    saveTabsMap(newTabs);
+    setTabCounter(1);
+    setSelectedTab(tabName);
+  }
+  prevDisplayHeader.current = displayHeader;
 
   if (!displayHeader || (tabs.length === 0 && !displayHeader)) {
     return dataTable;
@@ -89,7 +111,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
-    const tabName = getChartTabName(tabNum, NEW_CHART_TYPE);
+    const tabName = getChartTabName(tabCounter, NEW_CHART_TYPE);
 
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
@@ -102,7 +124,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     ]);
 
     saveTabsMap(newTabs);
-    setTabNum(tabNum + 1);
+    setTabCounter(tabCounter + 1);
     setSelectedTab(tabName);
   };
 
@@ -110,14 +132,21 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
+    const deletedIndex = tabs.findIndex((tab) => tab.tabName === tabName);
+    const remaining = tabs.filter((tab) => tab.tabName !== tabName);
     const newTabs = new Map(tabsMap);
-    newTabs.set(
-      cellId,
-      tabs.filter((tab) => tab.tabName !== tabName),
-    );
+    newTabs.set(cellId, remaining);
     saveTabsMap(newTabs);
-    setSelectedTab(DEFAULT_TAB_NAME);
-    setTabNum(tabNum - 1);
+
+    if (remaining.length === 0) {
+      onCloseChartBuilder?.();
+    } else if (tabName === selectedTab) {
+      if (deletedIndex < remaining.length) {
+        setSelectedTab(remaining[deletedIndex].tabName);
+      } else {
+        setSelectedTab(remaining[remaining.length - 1].tabName);
+      }
+    }
   };
 
   const saveTabChart = ({
@@ -178,7 +207,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
 
   return (
     <Tabs value={selectedTab} className="-mt-1">
-      <TabsList>
+      <TabsList part="table-tabs">
         <TabsTrigger
           className="text-xs"
           value={DEFAULT_TAB_NAME}
@@ -228,7 +257,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
           saveTabChartType(tab.tabName, chartType);
         };
         return (
-          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-1">
+          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-0">
             <ChartPanel
               tableData={data}
               chartConfig={tab.config}
@@ -446,7 +475,7 @@ export const ChartPanel: React.FC<{
   );
 
   return (
-    <div className="flex flex-row gap-2 h-full rounded-md border pr-2">
+    <div className="flex flex-row gap-2 h-full rounded-md border-t pr-2">
       <div
         className={`relative flex flex-col gap-2 overflow-auto px-2 py-3 scrollbar-thin transition-width duration-200 ${formCollapsed ? "w-8" : "w-[300px]"}`}
       >

package/src/components/data-table/charts/components/chart-items.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
 import React from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import type { z } from "zod";

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -72,7 +72,7 @@ export const ColumnExplorerPanel = ({
   });
 
   return (
-    <div className="mt-5 mb-3">
+    <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
         {prettifyRowColumnCount(totalRows, totalColumns, locale)}
         <CopyClipboardIcon

package/src/components/data-table/column-formatting/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
@@ -38,7 +38,7 @@ export interface ColumnFormattingInstance {
   setColumnFormatting: (value?: FormatOption) => void;
   getColumnFormatting?: () => FormatOption | undefined;
   getCanFormat?: () => boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   applyColumnFormatting: (value: any) => any;
 }
 
@@ -48,8 +48,9 @@ declare module "@tanstack/react-table" {
   //merge column formatting's state with the existing table state
   interface TableState extends ColumnFormattingTableState {}
   //merge column formatting's options with the existing table options
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnFormattingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnFormattingOptions {}
   //merge column formatting's instance APIs with the existing table instance APIs
   interface Column<TData extends RowData> extends ColumnFormattingInstance {}
 }

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

@@ -63,8 +63,10 @@ import { stringifyUnknownValue } from "./utils";
 
 const TOP_K_ROWS = 30;
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<
+  TData,
+  TValue,
+> extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   header: React.ReactNode;
   justify?: "left" | "center" | "right";

package/src/components/data-table/column-summary/legacy-chart-spec.ts

@@ -282,7 +282,7 @@ export function getDataSpecAndSourceName<T>(data: string | T[]): {
       const base64 = extractBase64FromDataURL(data);
       const decoded = window.atob(base64);
 
-      // eslint-disable-next-line unicorn/prefer-ternary
+      // oxlint-disable-next-line unicorn/prefer-ternary
       if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
         dataSpec = {
           values: base64ToUint8Array(base64),

package/src/components/data-table/column-wrapping/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 
 export type ColumnWrappingState = Record<string, "nowrap" | "wrap" | undefined>;
@@ -22,8 +22,9 @@ export interface ColumnWrappingInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends ColumnWrappingTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnWrappingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnWrappingOptions {}
 
   interface Column<TData extends RowData> extends ColumnWrappingInstance {}
 }

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

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import { PopoverClose } from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+const PopoverClose = PopoverPrimitive.Close;
+
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate, isValid } from "date-fns";
 import { useLocale, useNumberFormatter } from "react-aria";

package/src/components/data-table/copy-column/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export interface CopyColumnOptions {
@@ -12,8 +12,9 @@ export interface CopyColumnInstance {
 
 // Use declaration merging to add our new feature APIs
 declare module "@tanstack/react-table" {
-  interface TableOptionsResolved<TData extends RowData>
-    extends CopyColumnOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CopyColumnOptions {}
 
   interface Column<TData extends RowData> extends CopyColumnInstance {}
 }

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

@@ -283,7 +283,10 @@ const DataTableInternal = <TData,>({
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
       <FilterPills filters={filters} table={table} />
       <CellSelectionProvider>
-        <div className={cn(className || "rounded-md border overflow-hidden")}>
+        <div
+          part="table-wrapper"
+          className={cn(className || "rounded-md border overflow-hidden")}
+        >
           <TableTopBar
             enableSearch={enableSearch}
             searchQuery={searchQuery}
@@ -311,17 +314,19 @@ const DataTableInternal = <TData,>({
               virtualize={virtualize}
             />
           </Table>
+          <TableBottomBar
+            part="table-footer"
+            className="pt-1.5 pb-0.5 border-t border-border"
+            totalColumns={totalColumns}
+            pagination={pagination}
+            selection={selection}
+            onRowSelectionChange={onRowSelectionChange}
+            table={table}
+            getRowIds={getRowIds}
+            showPageSizeSelector={showPageSizeSelector}
+            tableLoading={reloading}
+          />
         </div>
-        <TableBottomBar
-          totalColumns={totalColumns}
-          pagination={pagination}
-          selection={selection}
-          onRowSelectionChange={onRowSelectionChange}
-          table={table}
-          getRowIds={getRowIds}
-          showPageSizeSelector={showPageSizeSelector}
-          tableLoading={reloading}
-        />
       </CellSelectionProvider>
     </div>
   );

package/src/components/data-table/focus-row/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 
@@ -25,8 +25,9 @@ export interface FocusRowInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends FocusRowTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends FocusRowOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends FocusRowOptions {}
 
   interface Row<TData extends RowData> extends FocusRowInstance {}
 }

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

@@ -24,7 +24,10 @@ export const LoadingTable = ({
 
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-2")}>
-      <div className={cn(className || "rounded-md border")}>
+      <div
+        part="table-wrapper"
+        className={cn(className || "rounded-md border")}
+      >
         <Table>
           <TableHeader>
             {Array.from({ length: 1 }).map((_, i) => (
@@ -40,7 +43,7 @@ export const LoadingTable = ({
           <TableBody>
             {Array.from({ length: pageSize }).map((_, i) => (
               <TableRow key={i}>
-                {Array.from({ length: NUM_COLUMNS }).map((_, j) => (
+                {Array.from({ length: NUM_COLUMNS }).map((__, j) => (
                   <TableCell key={j}>
                     <div className="h-4 bg-(--slate-5) animate-pulse rounded-md w-[90%]" />
                   </TableCell>

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

@@ -71,7 +71,7 @@ export const DataTablePagination = <TData,>({
 
   // Ensure unique page sizes
   const pageSizeSet = new Set([5, 10, 25, 50, 100, pageSize]);
-  const pageSizes = [...pageSizeSet].sort((a, b) => a - b);
+  const pageSizes = [...pageSizeSet].toSorted((a, b) => a - b);
 
   const renderPageSizeSelector = () => {
     return (

package/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -10,7 +10,7 @@ vi.mock("@/utils/copy", () => ({
 }));
 
 vi.mock("../utils", async (importOriginal) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   const original = (await importOriginal()) as any;
   return {
     ...original,
@@ -28,7 +28,7 @@ import {
 } from "../atoms";
 import { getCellsBetween, getCellValues } from "../utils";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type T = any;
 
 // Create mock table and cells
@@ -56,18 +56,18 @@ function createMockCell(
 }
 
 function createMockTable(): Table<T> {
-  const mockToggleSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    this.isSelected = !this.isSelected;
-    return { isSelected: this.isSelected };
-  });
+  const mockToggleSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      this.isSelected = !this.isSelected;
+      return { isSelected: this.isSelected };
+    });
 
-  const mockGetIsSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    return this.isSelected;
-  });
+  const mockGetIsSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      return this.isSelected;
+    });
 
   const rows = [
     {

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

@@ -23,17 +23,15 @@ describe("isInteractiveTarget", () => {
     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.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");

package/src/components/data-table/range-focus/atoms.ts

@@ -32,9 +32,9 @@ function initialState(): CellSelectionState {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type AnyTable = Table<any>;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type AnyCell = Cell<any, unknown>;
 
 const {