@marimo-team/frontend 0.16.1 → 0.16.3

package/src/plugins/core/registerReactComponent.tsx

@@ -24,7 +24,7 @@ import ReactDOM, { type Root } from "react-dom/client";
 import useEvent from "react-use-event-hook";
 import type { ZodSchema } from "zod";
 import { notebookAtom } from "@/core/cells/cells.ts";
-import { findCellId } from "@/core/cells/ids.ts";
+import { HTMLCellId } from "@/core/cells/ids.ts";
 import { isUninstantiated } from "@/core/cells/utils";
 import { createInputEvent, MarimoValueUpdateEvent } from "@/core/dom/events";
 import { getUIElementObjectId } from "@/core/dom/ui-element";
@@ -182,24 +182,28 @@ function PluginSlotInternal<T>(
         const objectId = getUIElementObjectId(hostElement);
         invariant(objectId, "Object ID should exist");
 
-        const cellId = findCellId(hostElement);
-        invariant(cellId, "Cell ID should exist");
-
-        const notebookState = store.get(notebookAtom);
-        const cellRuntime = notebookState.cellRuntime[cellId];
-        const cellData = notebookState.cellData[cellId];
-
-        const cellNotInitialized = isUninstantiated({
-          executionTime:
-            cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
-          status: cellRuntime.status,
-          errored: cellRuntime.errored,
-          interrupted: cellRuntime.interrupted,
-          stopped: cellRuntime.stopped,
-        });
-
-        if (cellNotInitialized) {
-          throw new CellNotInitializedError();
+        const htmlId = HTMLCellId.findElementThroughShadowDOMs(hostElement)?.id;
+        const cellId = htmlId ? HTMLCellId.parse(htmlId) : null;
+        if (cellId) {
+          // If the cell is not initialized, throw an error
+          const notebookState = store.get(notebookAtom);
+          const cellRuntime = notebookState.cellRuntime[cellId];
+          const cellData = notebookState.cellData[cellId];
+
+          const cellNotInitialized = isUninstantiated({
+            executionTime:
+              cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
+            status: cellRuntime.status,
+            errored: cellRuntime.errored,
+            interrupted: cellRuntime.interrupted,
+            stopped: cellRuntime.stopped,
+          });
+
+          if (cellNotInitialized) {
+            throw new CellNotInitializedError();
+          }
+        } else {
+          Logger.warn(`Cell ID ${cellId} cannot be found`);
         }
 
         const response = await FUNCTIONS_REGISTRY.request({

package/src/plugins/impl/DataTablePlugin.tsx

@@ -36,6 +36,10 @@ import {
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import { RowViewerPanel } from "@/components/data-table/row-viewer-panel/row-viewer";
+import {
+  type DownloadAsArgs,
+  DownloadAsSchema,
+} from "@/components/data-table/schemas";
 import {
   type BinValues,
   type ColumnHeaderStats,
@@ -108,7 +112,7 @@ export type CalculateTopKRows = (req: {
   column: string;
   k: number;
 }) => Promise<{
-  data: Array<[unknown, number]>;
+  data: [unknown, number][];
 }>;
 
 export type PreviewColumn = (opts: { column: string }) => Promise<{
@@ -168,6 +172,7 @@ interface Data<T> {
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
+  maxHeight?: number;
   selection: DataTableSelection;
   showDownload: boolean;
   showFilters: boolean;
@@ -182,6 +187,7 @@ interface Data<T> {
   freezeColumnsRight?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  headerTooltip?: Record<string, string>;
   totalColumns: number;
   maxColumns: number | "all";
   hasStableRowId: boolean;
@@ -190,7 +196,7 @@ interface Data<T> {
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type DataTableFunctions = {
-  download_as: (req: { format: "csv" | "json" | "parquet" }) => Promise<string>;
+  download_as: DownloadAsArgs;
   get_column_summaries: <T>(
     opts: ColumnSummariesArgs,
   ) => Promise<ColumnSummaries<T>>;
@@ -215,7 +221,7 @@ type DataTableFunctions = {
   preview_column?: PreviewColumn;
 };
 
-type S = Array<number | string | { rowId: string; columnName?: string }>;
+type S = (number | string | { rowId: string; columnName?: string })[];
 
 export const DataTablePlugin = createPlugin<S>("marimo-table")
   .withData(
@@ -249,10 +255,12 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         .record(z.enum(["left", "center", "right"]))
         .optional(),
       wrappedColumns: z.array(z.string()).optional(),
+      headerTooltip: z.record(z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
+      maxHeight: z.number().optional(),
       cellStyles: z.record(z.record(z.object({}).passthrough())).optional(),
       hoverTemplate: z.string().optional(),
       // Whether to load the data lazily.
@@ -263,9 +271,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
     }),
   )
   .withFunctions<DataTableFunctions>({
-    download_as: rpc
-      .input(z.object({ format: z.enum(["csv", "json", "parquet"]) }))
-      .output(z.string()),
+    download_as: DownloadAsSchema,
     get_column_summaries: rpc
       .input(z.object({ precompute: z.boolean() }))
       .output(
@@ -649,6 +655,7 @@ export const LoadingDataTableComponent = memo(
         toggleDisplayHeader={toggleDisplayHeader}
         getRow={getRow}
         cellId={cellId}
+        maxHeight={props.maxHeight}
       />
     );
 
@@ -706,6 +713,7 @@ const DataTableComponent = ({
   freezeColumnsRight,
   textJustifyColumns,
   wrappedColumns,
+  headerTooltip,
   totalColumns,
   get_row_ids,
   cellStyles,
@@ -715,6 +723,7 @@ const DataTableComponent = ({
   preview_column,
   getRow,
   cellId,
+  maxHeight,
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
@@ -779,6 +788,7 @@ const DataTableComponent = ({
         fieldTypes: memoizedClampedFieldTypes,
         textJustifyColumns: memoizedTextJustifyColumns,
         wrappedColumns: memoizedWrappedColumns,
+        headerTooltip: headerTooltip,
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
         calculateTopKRows: calculate_top_k_rows,
@@ -791,6 +801,7 @@ const DataTableComponent = ({
       memoizedClampedFieldTypes,
       memoizedTextJustifyColumns,
       memoizedWrappedColumns,
+      headerTooltip,
       calculate_top_k_rows,
     ],
   );
@@ -894,6 +905,7 @@ const DataTableComponent = ({
             data={data}
             columns={columns}
             className={className}
+            maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
             totalColumns={totalColumns}

package/src/plugins/impl/FileUploadPlugin.tsx

@@ -31,7 +31,7 @@ interface Data {
   max_size: number;
 }
 
-type T = Array<[string, string]>;
+type T = [string, string][];
 
 export class FileUploadPlugin implements IPlugin<T, Data> {
   tagName = "marimo-file";

package/src/plugins/impl/RefreshPlugin.tsx

@@ -20,7 +20,7 @@ interface Data {
    * It may also be a human-readable string like "1m" or "1h" or "3h 30m".
    * These will be converted to seconds.
    */
-  options: Array<string | number>;
+  options: (string | number)[];
   /**
    * The initial value.
    */

package/src/plugins/impl/SliderPlugin.tsx

@@ -147,6 +147,10 @@ const SliderComponent = ({
           <NumberField
             value={valueMap(internalValue)}
             onChange={(nextValue) => {
+              // If nextValue is null/undefined/NaN (input cleared), set to start
+              if (nextValue == null || Number.isNaN(nextValue)) {
+                nextValue = Number(start);
+              }
               setInternalValue(nextValue);
               if (!debounce) {
                 setValue(nextValue);

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { AnyWidget, Experimental } from "@anywidget/types";
-import { isEqual } from "lodash-es";
+import { get, isEqual, set } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
@@ -16,7 +16,11 @@ import {
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import type { IPluginProps } from "@/plugins/types";
-import { updateBufferPaths } from "@/utils/data-views";
+import {
+  type Base64String,
+  byteStringToBinary,
+  typedAtob,
+} from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { ErrorBanner } from "../common/error-banner";
 import { MODEL_MANAGER, Model } from "./model";
@@ -25,7 +29,7 @@ interface Data {
   jsUrl: string;
   jsHash: string;
   css?: string | null;
-  bufferPaths?: Array<Array<string | number>> | null;
+  bufferPaths?: (string | number)[][] | null;
   initialValue: T;
 }
 
@@ -59,6 +63,11 @@ type Props = IPluginProps<T, Data, PluginFunctions>;
 
 const AnyWidgetSlot = (props: Props) => {
   const { css, jsUrl, jsHash, bufferPaths } = props.data;
+
+  const valueWithBuffers = useMemo(() => {
+    return resolveInitialValue(props.value, bufferPaths ?? []);
+  }, [props.value, bufferPaths]);
+
   // JS is an ESM file with a render function on it
   // export function render({ model, el }) {
   //   ...
@@ -85,10 +94,6 @@ const AnyWidgetSlot = (props: Props) => {
     }
   }, [hasError, jsUrl]);
 
-  const valueWithBuffer = useMemo(() => {
-    return updateBufferPaths(props.value, bufferPaths);
-  }, [props.value, bufferPaths]);
-
   // Mount the CSS
   useEffect(() => {
     const shadowRoot = props.host.shadowRoot;
@@ -157,7 +162,7 @@ const AnyWidgetSlot = (props: Props) => {
       key={key}
       {...props}
       widget={module.default}
-      value={valueWithBuffer}
+      value={valueWithBuffers}
     />
   );
 };
@@ -174,7 +179,7 @@ async function runAnyWidgetModule(
   el: HTMLElement,
 ): Promise<() => void> {
   const experimental: Experimental = {
-    invoke: async (name, msg, options) => {
+    invoke: async (_name, _msg, _options) => {
       const message =
         "anywidget.invoke not supported in marimo. Please file an issue at https://github.com/marimo-team/marimo/issues";
       Logger.warn(message);
@@ -284,3 +289,16 @@ export const visibleForTesting = {
   isAnyWidgetModule,
   getDirtyFields,
 };
+
+export function resolveInitialValue(
+  raw: Record<string, any>,
+  bufferPaths: readonly (readonly (string | number)[])[],
+) {
+  const out = structuredClone(raw);
+  for (const bufferPath of bufferPaths) {
+    const base64String: Base64String = get(raw, bufferPath);
+    const bytes = byteStringToBinary(typedAtob(base64String));
+    set(out, bufferPath, new DataView(bytes.buffer));
+  }
+  return out;
+}

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -5,7 +5,11 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TestUtils } from "@/__tests__/test-helpers";
 import type { UIElementId } from "@/core/cells/ids";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
-import { getDirtyFields, visibleForTesting } from "../AnyWidgetPlugin";
+import {
+  getDirtyFields,
+  resolveInitialValue,
+  visibleForTesting,
+} from "../AnyWidgetPlugin";
 import { Model } from "../model";
 
 const { LoadedSlot } = visibleForTesting;
@@ -129,7 +133,7 @@ describe("LoadedSlot", () => {
           method: "update",
           state: { count: 10 },
         },
-        buffers: undefined,
+        buffers: [],
       },
       bubbles: false,
       composed: true,
@@ -179,3 +183,55 @@ describe("LoadedSlot", () => {
     });
   });
 });
+
+describe("resolveInitialValue", () => {
+  it("should convert base64 strings to DataView at specified paths", () => {
+    const result = resolveInitialValue(
+      {
+        a: 10,
+        b: "aGVsbG8=", // "hello" in base64
+        c: [1, "d29ybGQ="], // "world" in base64
+        d: {
+          foo: "bWFyaW1vCg==", // "marimo" in base64
+          baz: 20,
+        },
+      },
+      [["b"], ["c", 1], ["d", "foo"]],
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "a": 10,
+        "b": DataView [
+          104,
+          101,
+          108,
+          108,
+          111,
+        ],
+        "c": [
+          1,
+          DataView [
+            119,
+            111,
+            114,
+            108,
+            100,
+          ],
+        ],
+        "d": {
+          "baz": 20,
+          "foo": DataView [
+            109,
+            97,
+            114,
+            105,
+            109,
+            111,
+            10,
+          ],
+        },
+      }
+    `);
+  });
+});

package/src/plugins/impl/anywidget/__tests__/model.test.ts

@@ -9,7 +9,6 @@ import {
   vi,
 } from "vitest";
 import { TestUtils } from "@/__tests__/test-helpers";
-import type { Base64String } from "@/utils/json/base64";
 import {
   type AnyWidgetMessage,
   handleWidgetMessage,
@@ -246,7 +245,7 @@ describe("Model", () => {
         content,
       });
 
-      expect(callback).toHaveBeenCalledWith(content, undefined);
+      expect(callback).toHaveBeenCalledWith(content, []);
     });
 
     it("should handle custom messages with buffers", () => {
@@ -286,7 +285,7 @@ describe("ModelManager", () => {
   }: {
     modelId: string;
     message: AnyWidgetMessage;
-    buffers: Base64String[];
+    buffers: readonly DataView[];
   }) => {
     return handleWidgetMessage({
       modelId,
@@ -353,7 +352,7 @@ describe("ModelManager", () => {
       message: { method: "custom", content: { count: 1 } },
       buffers: [],
     });
-    expect(callback).toHaveBeenCalledWith({ count: 1 }, undefined);
+    expect(callback).toHaveBeenCalledWith({ count: 1 }, []);
   });
 
   it("should handle close messages", async () => {

package/src/plugins/impl/anywidget/model.ts

@@ -10,7 +10,6 @@ import { assertNever } from "@/utils/assertNever";
 import { Deferred } from "@/utils/Deferred";
 import { updateBufferPaths } from "@/utils/data-views";
 import { throwNotImplemented } from "@/utils/functions";
-import type { Base64String } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 
 export type EventHandler = (...args: any[]) => void;
@@ -171,7 +170,7 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
    * When receiving a message from the backend.
    * We want to notify all listeners with `msg:custom`
    */
-  receiveCustomMessage(message: any, buffers?: DataView[]): void {
+  receiveCustomMessage(message: any, buffers: readonly DataView[] = []): void {
     const response = AnyWidgetMessageSchema.safeParse(message);
     if (response.success) {
       const data = response.data;
@@ -260,7 +259,7 @@ export async function handleWidgetMessage({
 }: {
   modelId: string;
   msg: AnyWidgetMessage;
-  buffers: Base64String[];
+  buffers: readonly DataView[];
   modelManager: ModelManager;
 }): Promise<void> {
   if (msg.method === "echo_update") {

package/src/plugins/impl/data-editor/types.ts

@@ -30,7 +30,7 @@ export interface ColumnEdit {
 }
 
 export interface Edits {
-  edits: Array<PositionalEdit | RowEdit | ColumnEdit>;
+  edits: (PositionalEdit | RowEdit | ColumnEdit)[];
 }
 
 export type ModifiedGridColumn = GridColumn & {

package/src/plugins/impl/data-explorer/components/query-form.tsx

@@ -238,7 +238,7 @@ const FieldOptions = ({
     return null;
   }
 
-  let options: Array<[string, FieldFunction[]]> = [];
+  let options: [string, FieldFunction[]][] = [];
 
   if (field.type === ExpandedType.QUANTITATIVE) {
     options = [["", QUANTITATIVE_FUNCTIONS]];

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -4,6 +4,10 @@ import { isEqual } from "lodash-es";
 import { Code2Icon, DatabaseIcon, FunctionSquareIcon } from "lucide-react";
 import { type JSX, memo, useEffect, useRef, useState } from "react";
 import { z } from "zod";
+import {
+  type DownloadAsArgs,
+  DownloadAsSchema,
+} from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { ReadonlyCode } from "@/components/editor/code/readonly-python-code";
 import { Spinner } from "@/components/icons/spinner";
@@ -38,6 +42,7 @@ interface Data {
   label?: string | null;
   columns: ColumnDataTypes;
   pageSize: number;
+  showDownload: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -67,6 +72,7 @@ type PluginFunctions = {
     data: TableData<T>;
     total_rows: number;
   }>;
+  download_as: DownloadAsArgs;
 };
 
 // Value is selection, but it is not currently exposed to the user
@@ -77,13 +83,14 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
     z.object({
       label: z.string().nullish(),
       pageSize: z.number().default(5),
+      showDownload: z.boolean().default(true),
       columns: z
         .array(z.tuple([z.string().or(z.number()), z.string(), z.string()]))
         .transform((value) => {
           const map = new Map<ColumnId, string>();
-          value.forEach(([key, dataType]) =>
-            map.set(key as ColumnId, dataType as DataType),
-          );
+          value.forEach(([key, dataType]) => {
+            map.set(key as ColumnId, dataType as DataType);
+          });
           return map;
         }),
     }),
@@ -124,6 +131,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
           total_rows: z.number(),
         }),
       ),
+    download_as: DownloadAsSchema,
   })
   .renderer((props) => (
     <TableProviders>
@@ -141,6 +149,8 @@ interface DataTableProps extends Data, PluginFunctions {
   value: S;
   setValue: (value: S) => void;
   host: HTMLElement;
+  showDownload: boolean;
+  download_as: DownloadAsArgs;
 }
 
 const EMPTY: Transformations = {
@@ -151,11 +161,13 @@ export const DataFrameComponent = memo(
   ({
     columns,
     pageSize,
+    showDownload,
     value,
     setValue,
     get_dataframe,
     get_column_values,
     search,
+    download_as,
     host,
   }: DataTableProps): JSX.Element => {
     const { data, error, isPending } = useAsyncData(
@@ -270,8 +282,8 @@ export const DataFrameComponent = memo(
           pagination={true}
           fieldTypes={field_types}
           rowHeaders={row_headers || Arrays.EMPTY}
-          showDownload={false}
-          download_as={Functions.THROW}
+          showDownload={showDownload}
+          download_as={download_as}
           enableSearch={false}
           showFilters={false}
           search={search}

package/src/plugins/impl/data-frames/types.ts

@@ -15,7 +15,7 @@ export type NumPyType = string;
  *
  * We cannot use a js map, since maps don't preserve keys as ints (e.g. "1" and 1 are the same key)
  */
-export type RawColumnDataTypes = Array<[ColumnId, [DataType, NumPyType]]>;
+export type RawColumnDataTypes = [ColumnId, [DataType, NumPyType]][];
 /**
  * Map of column Id and their data types
  * ES6 maps preserve keys as ints (e.g. "1" and 1 are different keys)

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -50,9 +50,9 @@ declare global {
           consume: (data: ArrayBuffer | string) => void;
           message: {
             content: {
-              events?: Array<{
+              events?: {
                 model?: { id?: string };
-              }>;
+              }[];
               [key: string]: unknown;
             };
             buffers: ArrayBuffer[];

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -27,7 +27,7 @@ type AxisDatum = unknown;
 
 type T =
   | {
-      points?: Array<Record<AxisName, AxisDatum>> | Plotly.PlotDatum[];
+      points?: Record<AxisName, AxisDatum>[] | Plotly.PlotDatum[];
       indices?: number[];
       range?: {
         x?: number[];
@@ -85,7 +85,7 @@ function initialLayout(figure: Figure): Partial<Plotly.Layout> {
   };
 }
 
-const SUNBURST_DATA_KEYS: Array<keyof Plotly.SunburstPlotDatum> = [
+const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
   "color",
   "curveNumber",
   "entry",
@@ -279,7 +279,7 @@ PlotlyComponent.displayName = "PlotlyComponent";
  */
 function extractPoints(
   points: Plotly.PlotDatum[],
-): Array<Record<AxisName, AxisDatum>> {
+): Record<AxisName, AxisDatum>[] {
   if (!points) {
     return [];
   }

package/src/plugins/impl/vega/__tests__/loader.test.ts

@@ -59,10 +59,10 @@ describe("DATE_MIDDLEWARE", () => {
     const csv = "Date,Value\n2024-13-45,100\n2024-02-30,200";
 
     // When parsing the CSV
-    const data = parseCsvData(csv, false) as Array<{
+    const data = parseCsvData(csv, false) as {
       Date: string;
       Value: number;
-    }>;
+    }[];
 
     // Then invalid dates should remain as strings
     expect(typeof data[0].Date).toBe("string");

package/src/plugins/impl/vega/loader.ts

@@ -41,7 +41,7 @@ const BIG_INT_MIDDLEWARE: Middleware = () => {
       return result;
     }
 
-    const parsedInt = Number.parseInt(v);
+    const parsedInt = Number.parseInt(v, 10);
     if (isNumber(parsedInt)) {
       const needsBigInt = Math.abs(parsedInt) > Number.MAX_SAFE_INTEGER;
       if (!needsBigInt) {

package/src/plugins/impl/vega/vega-component.tsx

@@ -157,7 +157,7 @@ const LoadedVegaComponent = ({
   });
 
   const renderHelpContent = () => {
-    const hints: Array<[string, string]> = [];
+    const hints: [string, string][] = [];
     if (ParamNames.hasPoint(names)) {
       hints.push([
         "Point selection",

package/src/plugins/impl/vega/vega-loader.ts

@@ -7,7 +7,7 @@ import type { DataType } from "./vega-loader";
 // Re-export the vega-loader functions to add TypeScript types
 
 export function read<T = object>(
-  data: string | Record<string, unknown> | Array<Record<string, unknown>>,
+  data: string | Record<string, unknown> | Record<string, unknown>[],
   format:
     | DataFormat
     | {
@@ -27,7 +27,7 @@ export interface Loader {
   load(
     uri: string,
     options?: unknown,
-  ): Promise<string | Record<string, unknown> | Array<Record<string, unknown>>>;
+  ): Promise<string | Record<string, unknown> | Record<string, unknown>[]>;
   sanitize(uri: string, options?: unknown): Promise<{ href: string }>;
   http(uri: string, options?: unknown): Promise<string>;
   file(filename: string): Promise<string>;

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -35,7 +35,7 @@ interface Data {
   /**
    * The labels for each item; raw HTML.
    */
-  items: Array<MenuItem | MenuItemGroup>;
+  items: (MenuItem | MenuItemGroup)[];
 
   /**
    * The orientation of the menu.

package/src/plugins/layout/RoutesPlugin.tsx

@@ -69,13 +69,12 @@ const RoutesComponent = ({
   }, [handleFindMatch]);
 
   if (!matched) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
+    // biome-ignore lint/complexity/noUselessFragments: this is intentional
     return <></>;
   }
 
   const matchedIndex = routes.indexOf(matched);
   const child = React.Children.toArray(children)[matchedIndex];
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{child}</>;
 };