@marimo-team/islands 0.25.3-dev264 → 0.25.3-dev265

package/src/plugins/impl/data-editor/__tests__/glide-data-editor.test.tsx

@@ -8,8 +8,13 @@ import { GlideDataEditor } from "../glide-data-editor";
 
 interface MockDataEditorProps {
   portalElementRef?: React.RefObject<HTMLElement>;
-  onCellEdited?: (cell: [number, number], value: { data: unknown }) => void;
+  onCellEdited?: (
+    cell: [number, number],
+    value: { data: unknown; kind?: unknown },
+  ) => void;
   onRowAppended?: () => void;
+  getCellContent?: (cell: [number, number]) => Record<string, unknown>;
+  customRenderers?: unknown[];
 }
 
 const captureDataEditorProps = vi.hoisted(() =>
@@ -26,6 +31,12 @@ const capturedDataEditor = {
   get onRowAppended() {
     return captureDataEditorProps.mock.lastCall?.[0].onRowAppended;
   },
+  get getCellContent() {
+    return captureDataEditorProps.mock.lastCall?.[0].getCellContent;
+  },
+  get customRenderers() {
+    return captureDataEditorProps.mock.lastCall?.[0].customRenderers;
+  },
 };
 
 vi.mock("@glideapps/glide-data-grid", async () => {
@@ -45,6 +56,7 @@ vi.mock("@glideapps/glide-data-grid", async () => {
       Text: "text",
       Number: "number",
       Boolean: "boolean",
+      Custom: "custom",
     },
     GridColumnIcon: {
       ProtectedColumnOverlay: "protected",
@@ -52,6 +64,10 @@ vi.mock("@glideapps/glide-data-grid", async () => {
   };
 });
 
+vi.mock("@glideapps/glide-data-grid-cells", () => ({
+  DropdownCell: { kind: "dropdown-renderer" },
+}));
+
 vi.mock("@/theme/useTheme", () => ({
   useTheme: () => ({ theme: "light" }),
 }));
@@ -60,6 +76,7 @@ const editorProps = {
   data: [{ name: "alice" }],
   columnFields: new Map([["name", "string"]]) as Map<string, "string">,
   editableColumns: "all" as const,
+  columnTypes: new Map(),
   onAddEdits: vi.fn(),
 };
 
@@ -111,6 +128,101 @@ describe("GlideDataEditor portal", () => {
     ]);
   });
 
+  it("creates a restricted dropdown cell and registers only its renderer", () => {
+    render(
+      <TooltipProvider>
+        <GlideDataEditor
+          {...editorProps}
+          columnTypes={new Map([["name", ["alice", "bob"]]])}
+        />
+      </TooltipProvider>,
+    );
+
+    expect(capturedDataEditor.getCellContent?.([0, 0])).toMatchObject({
+      kind: "custom",
+      copyData: "alice",
+      data: {
+        kind: "dropdown-cell",
+        value: "alice",
+        allowedValues: ["alice", "bob"],
+      },
+    });
+    expect(capturedDataEditor.customRenderers).toEqual([
+      { kind: "dropdown-renderer" },
+    ]);
+  });
+
+  it("emits the selected dropdown value and rejects an invalid empty edit", () => {
+    const onAddEdits = vi.fn();
+    render(
+      <TooltipProvider>
+        <GlideDataEditor
+          {...editorProps}
+          columnTypes={new Map([["name", ["alice", "bob"]]])}
+          onAddEdits={onAddEdits}
+        />
+      </TooltipProvider>,
+    );
+
+    act(() =>
+      capturedDataEditor.onCellEdited?.([0, 0], {
+        kind: "custom",
+        data: { kind: "dropdown-cell", value: "bob" },
+      }),
+    );
+    act(() =>
+      capturedDataEditor.onCellEdited?.([0, 0], {
+        kind: "custom",
+        data: { kind: "dropdown-cell", value: "" },
+      }),
+    );
+
+    expect(onAddEdits).toHaveBeenCalledTimes(1);
+    expect(onAddEdits).toHaveBeenCalledWith([
+      { rowIdx: 0, columnId: "name", value: "bob" },
+    ]);
+  });
+
+  it("uses the first dropdown option when appending a row", () => {
+    const onAddEdits = vi.fn();
+    render(
+      <TooltipProvider>
+        <GlideDataEditor
+          {...editorProps}
+          columnTypes={new Map([["name", ["first", "second"]]])}
+          onAddEdits={onAddEdits}
+        />
+      </TooltipProvider>,
+    );
+
+    act(() => capturedDataEditor.onRowAppended?.());
+
+    expect(onAddEdits).toHaveBeenCalledWith([
+      { rowIdx: 1, columnId: "name", value: "first" },
+    ]);
+  });
+
+  it("normalizes edits for a configured boolean column", () => {
+    const onAddEdits = vi.fn();
+    render(
+      <TooltipProvider>
+        <GlideDataEditor
+          {...editorProps}
+          data={[{ active: false }]}
+          columnFields={new Map([["active", "boolean" as const]])}
+          columnTypes={new Map([["active", "boolean" as const]])}
+          onAddEdits={onAddEdits}
+        />
+      </TooltipProvider>,
+    );
+
+    act(() => capturedDataEditor.onCellEdited?.([0, 0], { data: "YES" }));
+
+    expect(onAddEdits).toHaveBeenCalledWith([
+      { rowIdx: 0, columnId: "active", value: true },
+    ]);
+  });
+
   it("emits one positional edit per cell when appending a row", () => {
     const onAddEdits = vi.fn();
     render(

package/src/plugins/impl/data-editor/__tests__/glide-utils.test.ts

@@ -3,6 +3,7 @@
 import type { GridSelection } from "@glideapps/glide-data-grid";
 import { CompactSelection, GridCellKind } from "@glideapps/glide-data-grid";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { normalizeBoolean } from "../column-types";
 import { isValidCellValue, pasteCells } from "../glide-utils";
 import type { ModifiedGridColumn } from "../types";
 
@@ -34,6 +35,50 @@ describe("isValidCellValue", () => {
     expect(isValidCellValue("integer", "1.0000000000000001")).toBe(false);
     expect(isValidCellValue("integer", "1e-324")).toBe(false);
   });
+
+  it("accepts only configured dropdown strings", () => {
+    const options = ["open", "closed"];
+    expect(isValidCellValue("string", "open", options)).toBe(true);
+    expect(isValidCellValue("string", "", options)).toBe(false);
+    expect(isValidCellValue("string", null, options)).toBe(false);
+    expect(isValidCellValue("string", "", ["", "open"])).toBe(true);
+  });
+});
+
+describe("normalizeBoolean", () => {
+  it.each([
+    [true, true],
+    [false, false],
+    [2, true],
+    [0, false],
+    ["true", true],
+    [" t ", true],
+    ["YES", true],
+    ["y", true],
+    ["1", true],
+    ["false", false],
+    ["f", false],
+    ["No", false],
+    ["n", false],
+    ["0", false],
+    ["", false],
+  ])("normalizes %j", (value, expected) => {
+    expect(normalizeBoolean(value, "active")).toBe(expected);
+  });
+
+  it.each([
+    [BigInt("9007199254740992"), true],
+    [BigInt("-9007199254740992"), true],
+    [BigInt(0), false],
+  ])("normalizes bigint %s", (value, expected) => {
+    expect(normalizeBoolean(value, "active")).toBe(expected);
+  });
+
+  it("reports the configured column for invalid values", () => {
+    expect(() => normalizeBoolean("maybe", "active")).toThrow(
+      "Invalid boolean value for column 'active': maybe",
+    );
+  });
 });
 
 describe("pasteCells", () => {
@@ -195,6 +240,54 @@ describe("pasteCells", () => {
     });
   });
 
+  it("normalizes aliases pasted into configured boolean columns", async () => {
+    mockClipboard.readText.mockResolvedValue("yes");
+    const mockOnAddEdits = vi.fn();
+    const columns = createMockColumns();
+    columns[2].configuredType = "boolean";
+
+    pasteCells({
+      selection: createMockSelection(2, 0),
+      data: createMockData(),
+      columns,
+      editableColumns: "all",
+      onAddEdits: mockOnAddEdits,
+    });
+
+    await vi.waitFor(() => {
+      expect(mockOnAddEdits).toHaveBeenCalledWith([
+        { rowIdx: 0, columnId: "active", value: true },
+      ]);
+    });
+  });
+
+  it("skips only invalid tokens pasted into configured boolean columns", async () => {
+    mockClipboard.readText.mockResolvedValue(
+      "Write docs\t30\tyes\nFix bug\t31\tmaybe",
+    );
+    const mockOnAddEdits = vi.fn();
+    const columns = createMockColumns();
+    columns[2].configuredType = "boolean";
+
+    pasteCells({
+      selection: createMockSelection(0, 0),
+      data: createMockData(),
+      columns,
+      editableColumns: "all",
+      onAddEdits: mockOnAddEdits,
+    });
+
+    await vi.waitFor(() => {
+      expect(mockOnAddEdits).toHaveBeenCalledWith([
+        { rowIdx: 0, columnId: "name", value: "Write docs" },
+        { rowIdx: 0, columnId: "age", value: 30 },
+        { rowIdx: 0, columnId: "active", value: true },
+        { rowIdx: 1, columnId: "name", value: "Fix bug" },
+        { rowIdx: 1, columnId: "age", value: 31 },
+      ]);
+    });
+  });
+
   it("should skip invalid number values", async () => {
     mockClipboard.readText.mockResolvedValue("Grace\tinvalid\tfalse");
 
@@ -407,6 +500,29 @@ describe("pasteCells", () => {
     });
   });
 
+  it("should paste only configured dropdown options", async () => {
+    mockClipboard.readText.mockResolvedValue("invalid\t30\nclosed\t31");
+    const columns = createMockColumns();
+    columns[0].configuredType = ["open", "closed"];
+    const mockOnAddEdits = vi.fn();
+
+    pasteCells({
+      selection: createMockSelection(0, 0),
+      data: createMockData(),
+      columns,
+      editableColumns: "all",
+      onAddEdits: mockOnAddEdits,
+    });
+
+    await vi.waitFor(() => {
+      expect(mockOnAddEdits).toHaveBeenCalledWith([
+        { rowIdx: 0, columnId: "age", value: 30 },
+        { rowIdx: 1, columnId: "name", value: "closed" },
+        { rowIdx: 1, columnId: "age", value: 31 },
+      ]);
+    });
+  });
+
   it("should handle editable columns", async () => {
     mockClipboard.readText.mockResolvedValue(
       "Olivia\t28\ttrue\nWilliams\t35\tfalse",

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

@@ -0,0 +1,52 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ColumnTypes, EditorRow } from "./types";
+
+const TRUE_BOOLEAN_STRINGS = new Set(["true", "t", "yes", "y", "1"]);
+const FALSE_BOOLEAN_STRINGS = new Set(["false", "f", "no", "n", "0", ""]);
+
+export function normalizeBoolean(value: unknown, columnName: string): boolean {
+  if (typeof value === "boolean") {
+    return value;
+  }
+  if (typeof value === "bigint") {
+    return Boolean(value);
+  }
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return Boolean(value);
+  }
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (TRUE_BOOLEAN_STRINGS.has(normalized)) {
+      return true;
+    }
+    if (FALSE_BOOLEAN_STRINGS.has(normalized)) {
+      return false;
+    }
+  }
+  throw new Error(
+    `Invalid boolean value for column '${columnName}': ${String(value)}`,
+  );
+}
+
+export function normalizeConfiguredColumns(
+  data: EditorRow[],
+  columnTypes: ColumnTypes,
+): EditorRow[] {
+  return data.map((row) => {
+    const normalizedRow = { ...row };
+    for (const [columnName, columnType] of columnTypes) {
+      if (!(columnName in normalizedRow)) {
+        continue;
+      }
+      const value = normalizedRow[columnName];
+      if (columnType === "boolean") {
+        normalizedRow[columnName] = normalizeBoolean(value, columnName);
+      } else if (typeof value === "number" || typeof value === "bigint") {
+        // CSV auto-parsing turns numeric-looking options into numbers.
+        normalizedRow[columnName] = String(value);
+      }
+    }
+    return normalizedRow;
+  });
+}

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

@@ -9,7 +9,12 @@ import {
   renameColumn,
 } from "./data-utils";
 import { isColumnEdit, isPositionalEdit, isRowEdit } from "./glide-utils";
-import { BulkEdit, type EditorState, type Edits } from "./types";
+import {
+  BulkEdit,
+  type ColumnTypes,
+  type EditorState,
+  type Edits,
+} from "./types";
 
 export function applyEditorEdits(
   state: EditorState,
@@ -17,6 +22,7 @@ export function applyEditorEdits(
 ): EditorState {
   let nextData = [...state.data];
   let nextColumnFields: FieldTypes = new Map(state.columnFields);
+  const nextColumnTypes: ColumnTypes = new Map(state.columnTypes);
 
   for (const edit of edits) {
     if (isPositionalEdit(edit)) {
@@ -63,6 +69,7 @@ export function applyEditorEdits(
           columnIdx: edit.columnIdx,
           type: "remove",
         });
+        nextColumnTypes.delete(columnName);
         break;
       case BulkEdit.Insert:
         if (
@@ -91,6 +98,11 @@ export function applyEditorEdits(
           break;
         }
         nextData = renameColumn(nextData, columnName, edit.newName);
+        const configuredType = nextColumnTypes.get(columnName);
+        nextColumnTypes.delete(columnName);
+        if (configuredType !== undefined) {
+          nextColumnTypes.set(edit.newName, configuredType);
+        }
         nextColumnFields = modifyColumnFields({
           columnFields: nextColumnFields,
           columnIdx: edit.columnIdx,
@@ -104,5 +116,9 @@ export function applyEditorEdits(
     }
   }
 
-  return { data: nextData, columnFields: nextColumnFields };
+  return {
+    data: nextData,
+    columnFields: nextColumnFields,
+    columnTypes: nextColumnTypes,
+  };
 }

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -13,6 +13,10 @@ import DataEditor, {
   type Item,
   type Rectangle,
 } from "@glideapps/glide-data-grid";
+import {
+  DropdownCell as DropdownCellRenderer,
+  type DropdownCellType,
+} from "@glideapps/glide-data-grid-cells";
 import { CopyIcon, TrashIcon } from "lucide-react";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
@@ -39,18 +43,29 @@ import { toast } from "@/components/ui/use-toast";
 import type { DataType } from "@/core/kernel/messages";
 import { logNever } from "@/utils/assertNever";
 import { Events } from "@/utils/events";
+import { normalizeBoolean } from "./column-types";
 import { AddColumnSub, RenameColumnSub } from "./components";
 import { GlideDataEditorPortal } from "./glide-portal";
 import {
   BulkEdit,
+  type ColumnTypes,
   type EditorRow,
   type Edits,
   type ModifiedGridColumn,
 } from "./types";
 
+function getEditedValue(newValue: EditableGridCell): unknown {
+  if (newValue.kind !== GridCellKind.Custom) {
+    return newValue.data;
+  }
+  const data = newValue.data as { kind?: unknown; value?: unknown };
+  return data.kind === "dropdown-cell" ? data.value : newValue.data;
+}
+
 interface GlideDataEditorProps {
   data: EditorRow[];
   columnFields: FieldTypes;
+  columnTypes: ColumnTypes;
   editableColumns: string[] | "all";
   onAddEdits: (edits: Edits["edits"]) => void;
 }
@@ -58,6 +73,7 @@ interface GlideDataEditorProps {
 export const GlideDataEditor = ({
   data,
   columnFields,
+  columnTypes,
   editableColumns,
   onAddEdits,
 }: GlideDataEditorProps) => {
@@ -94,6 +110,7 @@ export const GlideDataEditor = ({
         style: "normal",
         kind: getColumnKind(fieldType),
         dataType: fieldType,
+        configuredType: columnTypes.get(columnName),
         hasMenu: true,
         themeOverride: editable
           ? undefined
@@ -104,7 +121,7 @@ export const GlideDataEditor = ({
     }
 
     return columns;
-  }, [columnFields, columnWidths, editableColumnSet, theme]);
+  }, [columnFields, columnTypes, columnWidths, editableColumnSet, theme]);
 
   const getCellContent = useCallback(
     (cell: Item): GridCell => {
@@ -116,8 +133,27 @@ export const GlideDataEditor = ({
       const editable =
         editableColumnSet === null || editableColumnSet.has(columns[col].title);
 
+      const configuredType = columns[col].configuredType;
+      if (Array.isArray(configuredType)) {
+        const value = typeof dataItem === "string" ? dataItem : "";
+        return {
+          kind: GridCellKind.Custom,
+          allowOverlay: editable,
+          readonly: !editable,
+          copyData: value,
+          data: {
+            kind: "dropdown-cell",
+            value,
+            allowedValues: configuredType,
+          },
+        } satisfies DropdownCellType;
+      }
+
       if (columnKind === GridCellKind.Boolean) {
-        const value = Boolean(dataItem);
+        const value =
+          columns[col].configuredType === "boolean"
+            ? normalizeBoolean(dataItem, columns[col].title)
+            : Boolean(dataItem);
         return {
           kind: GridCellKind.Boolean,
           allowOverlay: false,
@@ -153,8 +189,19 @@ export const GlideDataEditor = ({
       const column = columns[col];
       const key = column.title;
 
-      // Deletes are not handled by validateCell, so we need to handle them here
-      let newData = newValue.data;
+      // Deletes are not handled by validateCell, so we need to handle them here.
+      // Custom dropdown cells carry their selected value inside their data.
+      let newData = getEditedValue(newValue);
+      if (Array.isArray(column.configuredType)) {
+        if (
+          typeof newData !== "string" ||
+          !column.configuredType.includes(newData)
+        ) {
+          return;
+        }
+      } else if (column.configuredType === "boolean") {
+        newData = normalizeBoolean(newData, key);
+      }
       if (
         (column.dataType === "number" || column.dataType === "integer") &&
         (newValue.data === undefined || newValue.data === "")
@@ -180,10 +227,12 @@ export const GlideDataEditor = ({
       const [col, _row] = cell;
       const key = columns[col].title;
 
-      const columnType = columnFields.get(key);
-      return isValidCellValue(columnType, newValue.data);
+      const dataType = columnFields.get(key);
+      const configuredType = columnTypes.get(key);
+      const value = getEditedValue(newValue);
+      return isValidCellValue(dataType, value, configuredType);
     },
-    [columnFields, columns],
+    [columnFields, columns, columnTypes],
   );
 
   // Hack to emit copy event as these events aren't triggered automatically in shadow DOM
@@ -229,6 +278,9 @@ export const GlideDataEditor = ({
     const newRow: EditorRow = Object.fromEntries(
       columns.map((column) => {
         const dataType = column.dataType;
+        if (column.configuredType === "boolean") {
+          return [column.title, false];
+        }
         switch (dataType) {
           case "boolean":
             return [column.title, false];
@@ -243,7 +295,12 @@ export const GlideDataEditor = ({
           case "string":
           case "geometry":
           case "unknown":
-            return [column.title, ""];
+            return [
+              column.title,
+              Array.isArray(column.configuredType)
+                ? column.configuredType[0]
+                : "",
+            ];
           default:
             logNever(dataType);
             return [column.title, ""];
@@ -444,6 +501,7 @@ export const GlideDataEditor = ({
           // @ts-expect-error glide-data-grid stale RefObject typing
           portalElementRef={portalElementRef}
           getCellContent={getCellContent}
+          customRenderers={[DropdownCellRenderer]}
           columns={columns}
           gridSelection={selection}
           onGridSelectionChange={setSelection}

package/src/plugins/impl/data-editor/glide-utils.ts

@@ -8,8 +8,10 @@ import {
 import type { DataType } from "@/core/kernel/messages";
 import { logNever } from "@/utils/assertNever";
 import { Logger } from "@/utils/Logger";
+import { normalizeBoolean } from "./column-types";
 import type {
   ColumnEdit,
+  ColumnType,
   EditorRow,
   Edits,
   ModifiedGridColumn,
@@ -64,7 +66,12 @@ export function getColumnHeaderIcon(fieldType: DataType): GridColumnIcon {
 export function isValidCellValue(
   dataType: DataType | undefined,
   value: unknown,
+  columnType?: ColumnType,
 ): boolean {
+  if (Array.isArray(columnType)) {
+    return typeof value === "string" && columnType.includes(value);
+  }
+
   switch (dataType) {
     case "number":
       return Number.isFinite(Number(value));
@@ -175,7 +182,8 @@ export function pasteCells(options: {
           }
 
           const column = columns[targetColIdx];
-          const columnType = column.dataType;
+          const dataType = column.dataType;
+          const columnType = column.configuredType;
           const editable =
             editableColumnSet === null || editableColumnSet.has(column.title);
 
@@ -186,10 +194,16 @@ export function pasteCells(options: {
           // Convert the value based on the cell type
           let convertedValue: unknown = cellValue;
 
-          switch (columnType) {
+          if (Array.isArray(columnType)) {
+            if (!isValidCellValue(dataType, cellValue, columnType)) {
+              continue;
+            }
+          }
+
+          switch (dataType) {
             case "integer": {
               const numValue = Number(cellValue);
-              if (!isValidCellValue(columnType, cellValue)) {
+              if (!isValidCellValue(dataType, cellValue, columnType)) {
                 continue;
               }
               convertedValue = Number.isSafeInteger(numValue)
@@ -199,17 +213,24 @@ export function pasteCells(options: {
             }
             case "number": {
               const numValue = Number(cellValue);
-              if (!isValidCellValue(columnType, numValue)) {
+              if (!isValidCellValue(dataType, numValue, columnType)) {
                 continue;
               }
               convertedValue = numValue;
               break;
             }
-            case "boolean": {
-              const boolValue = cellValue.toLowerCase();
-              convertedValue = boolValue === "true" || boolValue === "1";
+            case "boolean":
+              if (column.configuredType !== "boolean") {
+                convertedValue =
+                  cellValue.toLowerCase() === "true" || cellValue === "1";
+                break;
+              }
+              try {
+                convertedValue = normalizeBoolean(cellValue, column.title);
+              } catch {
+                continue;
+              }
               break;
-            }
             case "string":
             case "date":
             case "datetime":
@@ -218,7 +239,7 @@ export function pasteCells(options: {
             case "unknown":
               break;
             default:
-              logNever(columnType);
+              logNever(dataType);
               continue;
           }
 

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

@@ -6,9 +6,15 @@ import type { DataType } from "@/core/kernel/messages";
 
 export type EditorRow = Record<string, unknown>;
 
+// Shared transport for specialized column editors: dropdown columns use a
+// string array, while checkbox columns use the boolean discriminator.
+export type ColumnType = "boolean" | string[];
+export type ColumnTypes = Map<string, ColumnType>;
+
 export interface EditorState {
   data: EditorRow[];
   columnFields: FieldTypes;
+  columnTypes: ColumnTypes;
 }
 
 export interface PositionalEdit {
@@ -57,4 +63,5 @@ export interface Edits {
 export type ModifiedGridColumn = GridColumn & {
   kind: GridCellKind;
   dataType: DataType;
+  configuredType?: ColumnType;
 };