@rovula/ui 0.1.28 → 0.1.30

package/src/components/DataTable/DataTable.editing.tsx

@@ -0,0 +1,861 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
+
+import TextInput from "@/components/TextInput/TextInput";
+import NumberInput from "@/components/NumberInput";
+import { Checkbox } from "@/components/Checkbox/Checkbox";
+import Dropdown, { type Options } from "@/components/Dropdown/Dropdown";
+import { customInputVariant } from "@/components/Dropdown/Dropdown.styles";
+import { cn } from "@/utils/cn";
+
+import type {
+  EditableColumnDef,
+  EditDisplayMode,
+  EditTrigger,
+  EditingState,
+} from "./DataTable.editing.types";
+
+// ---------------------------------------------------------------------------
+// EditContext — shared between engine and DataTable render layer
+// ---------------------------------------------------------------------------
+
+export const EditContext = React.createContext<EditingState | null>(null);
+
+// ---------------------------------------------------------------------------
+// useDataTableEditing — manages edit state (row / cell)
+// ---------------------------------------------------------------------------
+
+export function useDataTableEditing<TData extends RowData>(opts: {
+  enabled: boolean;
+  editDisplayMode: EditDisplayMode;
+  editTrigger: EditTrigger;
+  editableColumnIds: string[];
+}): EditingState {
+  const { enabled, editDisplayMode, editTrigger, editableColumnIds } = opts;
+
+  const [editingRowId, setEditingRowId] = useState<string | null>(null);
+  const [editingCell, setEditingCell] = useState<{
+    rowId: string;
+    columnId: string;
+  } | null>(null);
+  const tabMovingRef = React.useRef(false);
+
+  const requestRowEdit = useCallback((rowId: string) => {
+    setEditingRowId(rowId);
+    setEditingCell(null);
+  }, []);
+
+  const requestCellEdit = useCallback((rowId: string, columnId: string) => {
+    setEditingCell({ rowId, columnId });
+    setEditingRowId(null);
+  }, []);
+
+  const clearEdit = useCallback(() => {
+    setEditingRowId(null);
+    setEditingCell(null);
+  }, []);
+
+  const onFieldBlur = useCallback(
+    (_rowId: string, _columnId: string) => {
+      if (tabMovingRef.current) return;
+      if (editDisplayMode === "cell") {
+        setEditingCell(null);
+      }
+    },
+    [editDisplayMode],
+  );
+
+  const moveCellEdit = useCallback(
+    (
+      rowId: string,
+      fromColumnId: string,
+      delta: -1 | 1,
+    ): "moved" | "exited" => {
+      const idx = editableColumnIds.indexOf(fromColumnId);
+      if (idx < 0) {
+        setEditingCell(null);
+        return "exited";
+      }
+      const next = idx + delta;
+      if (next < 0 || next >= editableColumnIds.length) {
+        setEditingCell(null);
+        return "exited";
+      }
+      tabMovingRef.current = true;
+      setEditingCell({ rowId, columnId: editableColumnIds[next]! });
+      requestAnimationFrame(() => {
+        tabMovingRef.current = false;
+      });
+      return "moved";
+    },
+    [editableColumnIds],
+  );
+
+  // Esc exits row edit
+  useEffect(() => {
+    if (!enabled || editDisplayMode !== "row" || !editingRowId) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setEditingRowId(null);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, editDisplayMode, editingRowId]);
+
+  return useMemo<EditingState>(
+    () => ({
+      editingRowId,
+      editingCell,
+      editDisplayMode,
+      editTrigger,
+      requestRowEdit,
+      requestCellEdit,
+      clearEdit,
+      onFieldBlur,
+      moveCellEdit,
+    }),
+    [
+      editingRowId,
+      editingCell,
+      editDisplayMode,
+      editTrigger,
+      requestRowEdit,
+      requestCellEdit,
+      clearEdit,
+      onFieldBlur,
+      moveCellEdit,
+    ],
+  );
+}
+
+// ---------------------------------------------------------------------------
+// resolveEditableColumns — wraps EditableColumnDef[] → ColumnDef[]
+// ---------------------------------------------------------------------------
+
+const EDIT_SELECT_PH_PREFIX = "__edit_ph__";
+
+function editPlaceholderOption(label: string): Options {
+  return { value: `${EDIT_SELECT_PH_PREFIX}:${label}`, label };
+}
+
+function isPlaceholderOption(opt: Options | null | undefined) {
+  return opt?.value.startsWith(`${EDIT_SELECT_PH_PREFIX}:`) ?? false;
+}
+
+type ResolveOpts<TData extends RowData> = {
+  editing: EditingState;
+  onCellCommit?: (
+    rowId: string,
+    columnId: string,
+    patch: Partial<TData>,
+  ) => void;
+  alwaysEditing?: (row: Row<TData>) => boolean;
+  enableCellTabTraversal: boolean;
+  editableColumnIds: string[];
+};
+
+function isEditingCell<TData extends RowData>(
+  editing: EditingState,
+  row: Row<TData>,
+  columnId: string,
+): boolean {
+  const rowId =
+    typeof (row.original as Record<string, unknown>).id === "string"
+      ? ((row.original as Record<string, unknown>).id as string)
+      : row.id;
+  if (editing.editDisplayMode === "row") return editing.editingRowId === rowId;
+  return (
+    editing.editingCell?.rowId === rowId &&
+    editing.editingCell.columnId === columnId
+  );
+}
+
+function getRowId<TData extends RowData>(row: Row<TData>): string {
+  const orig = row.original as Record<string, unknown>;
+  return typeof orig.id === "string" ? orig.id : row.id;
+}
+
+function coerceValue(variant: string | undefined, rawValue: string): unknown {
+  if (variant === "number") {
+    const n = Number(rawValue);
+    return Number.isNaN(n) ? 0 : n;
+  }
+  if (variant === "checkbox") {
+    return rawValue === "true";
+  }
+  return rawValue;
+}
+
+function buildPatch<TData extends RowData>(
+  col: EditableColumnDef<TData>,
+  row: Row<TData>,
+  rawValue: string,
+  columnId: string,
+): Partial<TData> {
+  if (col.onCommit) {
+    return col.onCommit(row, rawValue);
+  }
+  return { [columnId]: coerceValue(col.editVariant, rawValue) } as Partial<TData>;
+}
+
+export function resolveEditableColumns<TData extends RowData>(
+  columns: EditableColumnDef<TData>[],
+  opts: ResolveOpts<TData>,
+): ColumnDef<TData, unknown>[] {
+  const {
+    editing,
+    onCellCommit,
+    alwaysEditing,
+    enableCellTabTraversal,
+    editableColumnIds,
+  } = opts;
+
+  return columns.map((col) => {
+    const colEditing = col.enableEditing;
+    if (colEditing == null && col.editVariant == null) {
+      return col as ColumnDef<TData, unknown>;
+    }
+
+    const columnId =
+      (col as { accessorKey?: string }).accessorKey ??
+      (col as { id?: string }).id ??
+      "";
+
+    const originalCell = (col as ColumnDef<TData, unknown>).cell;
+
+    const wrappedCol: ColumnDef<TData, unknown> = {
+      ...(col as ColumnDef<TData, unknown>),
+      cell: (cellProps) => {
+        const { row } = cellProps;
+        const rowId = getRowId(row);
+
+        const canEdit =
+          typeof colEditing === "function"
+            ? colEditing(row)
+            : colEditing !== false;
+
+        if (!canEdit) {
+          const always = alwaysEditing?.(row) ?? false;
+          const isRowActive =
+            always ||
+            editing.editingRowId === rowId ||
+            editing.editingCell?.rowId === rowId;
+
+          const showDisabledField =
+            always || (col.editShowDisabledField && isRowActive);
+
+          if (showDisabledField && (col.editVariant || colEditing != null)) {
+            return <DisabledEditCell row={row} col={col} columnId={columnId} />;
+          }
+
+          if (col.displayCell) {
+            return col.displayCell(row);
+          }
+          if (originalCell) {
+            return typeof originalCell === "function"
+              ? originalCell(cellProps)
+              : originalCell;
+          }
+          const value = (row.original as Record<string, unknown>)[columnId];
+          return <>{String(value ?? "")}</>;
+        }
+
+        const always = alwaysEditing?.(row) ?? false;
+        const active = always || isEditingCell(editing, row, columnId);
+
+        if (!active) {
+          const previewContent = col.displayCell
+            ? col.displayCell(row)
+            : String((row.original as Record<string, unknown>)[columnId] ?? "");
+
+          const activate = () => {
+            if (editing.editDisplayMode === "row")
+              editing.requestRowEdit(rowId);
+            else editing.requestCellEdit(rowId, columnId);
+          };
+          const handler =
+            editing.editTrigger === "click"
+              ? { onClick: activate }
+              : { onDoubleClick: activate };
+
+          return (
+            <div
+              className={cn(
+                "-mx-1 flex min-h-[32px] w-full min-w-0 cursor-pointer items-center rounded-sm px-1",
+                "hover:bg-table-c-hover/35",
+              )}
+              {...handler}
+            >
+              {previewContent}
+            </div>
+          );
+        }
+
+        // ── Edit mode ──
+        const variant = col.editVariant ?? "text";
+        const autoFocus = !always && editing.editDisplayMode === "cell";
+        const errorMsg = col.editError?.(row);
+
+        const commitAndBlur = (value: string) => {
+          const patch = buildPatch(col, row, value, columnId);
+          onCellCommit?.(rowId, columnId, patch);
+          if (!always) editing.onFieldBlur(rowId, columnId);
+        };
+
+        const handleTab = enableCellTabTraversal
+          ? (
+              e: React.KeyboardEvent<HTMLInputElement>,
+              commitFn: () => void,
+            ) => {
+              if (e.key !== "Tab") return;
+
+              if (editing.editDisplayMode === "row") {
+                const idx = editableColumnIds.indexOf(columnId);
+                if (idx < 0) return;
+                const nextIdx = idx + (e.shiftKey ? -1 : 1);
+                if (nextIdx < 0 || nextIdx >= editableColumnIds.length) return;
+                const nextColId = editableColumnIds[nextIdx]!;
+
+                commitFn();
+                e.preventDefault();
+                requestAnimationFrame(() => {
+                  const el = document.querySelector<HTMLElement>(
+                    `[data-edit-cell="${rowId}:${nextColId}"] input, [data-edit-cell="${rowId}:${nextColId}"] button`,
+                  );
+                  el?.focus();
+                });
+                return;
+              }
+
+              commitFn();
+              if (
+                editing.moveCellEdit(rowId, columnId, e.shiftKey ? -1 : 1) ===
+                "moved"
+              ) {
+                e.preventDefault();
+              }
+            }
+          : undefined;
+
+        if (variant === "select") {
+          return (
+            <div data-edit-cell={`${rowId}:${columnId}`}>
+              <EditCellSelect
+                row={row}
+                columnId={columnId}
+                col={col}
+                autoFocus={autoFocus}
+                keepOpenAfterSelect={
+                  editing.editDisplayMode === "row" || always
+                }
+                onCommit={(label) => {
+                  const currentValue = String(
+                    (row.original as Record<string, unknown>)[columnId] ?? "",
+                  );
+                  if (label.trim() === currentValue.trim()) return;
+                  const patch = buildPatch(col, row, label, columnId);
+                  onCellCommit?.(rowId, columnId, patch);
+                }}
+                onBlurField={
+                  editing.editDisplayMode === "row"
+                    ? undefined
+                    : () => {
+                        if (!always) editing.onFieldBlur(rowId, columnId);
+                      }
+                }
+                onKeyDown={
+                  handleTab
+                    ? (e) =>
+                        handleTab(
+                          e as React.KeyboardEvent<HTMLInputElement>,
+                          () => {},
+                        )
+                    : undefined
+                }
+                errorMessage={errorMsg}
+              />
+            </div>
+          );
+        }
+
+        if (variant === "number") {
+          return (
+            <div data-edit-cell={`${rowId}:${columnId}`}>
+              <EditCellNumber
+                columnId={columnId}
+                row={row}
+                col={col}
+                autoFocus={autoFocus}
+                errorMessage={errorMsg}
+                onBlur={(val) => commitAndBlur(val)}
+                onKeyDown={
+                  handleTab
+                    ? (e) =>
+                        handleTab(e, () => {
+                          const v = (
+                            e.target as HTMLInputElement
+                          ).value.trim();
+                          const patch = buildPatch(col, row, v, columnId);
+                          onCellCommit?.(rowId, columnId, patch);
+                        })
+                    : undefined
+                }
+              />
+            </div>
+          );
+        }
+
+        if (variant === "checkbox") {
+          return (
+            <div data-edit-cell={`${rowId}:${columnId}`}>
+              <EditCellCheckbox
+                columnId={columnId}
+                row={row}
+                col={col}
+                errorMessage={errorMsg}
+                onCommit={(checked) => {
+                  const patch = buildPatch(
+                    col,
+                    row,
+                    String(checked),
+                    columnId,
+                  );
+                  onCellCommit?.(rowId, columnId, patch);
+                }}
+                onKeyDown={
+                  handleTab
+                    ? (e) =>
+                        handleTab(
+                          e as React.KeyboardEvent<HTMLInputElement>,
+                          () => {},
+                        )
+                    : undefined
+                }
+              />
+            </div>
+          );
+        }
+
+        if (variant === "custom" && col.editCustomCell) {
+          const blur = () => {
+            if (!always) editing.onFieldBlur(rowId, columnId);
+          };
+
+          return (
+            <div data-edit-cell={`${rowId}:${columnId}`}>
+              {col.editCustomCell(row, {
+                commit: (rawValue: string) => {
+                  const patch = buildPatch(col, row, rawValue, columnId);
+                  onCellCommit?.(rowId, columnId, patch);
+                },
+                blur,
+                columnId,
+                autoFocus,
+                errorMessage: errorMsg,
+                onKeyDown: handleTab
+                  ? (e) =>
+                      handleTab(
+                        e as React.KeyboardEvent<HTMLInputElement>,
+                        () => {},
+                      )
+                  : undefined,
+              })}
+            </div>
+          );
+        }
+
+        // variant === "text"
+        return (
+          <div data-edit-cell={`${rowId}:${columnId}`}>
+            <EditCellText
+              columnId={columnId}
+              row={row}
+              placeholder={col.editTextProps?.placeholder ?? ""}
+              autoFocus={autoFocus}
+              errorMessage={errorMsg}
+              onBlur={(e) => commitAndBlur(e.currentTarget.value.trim())}
+              onKeyDown={
+                handleTab
+                  ? (e) =>
+                      handleTab(e, () => {
+                        const v = (e.target as HTMLInputElement).value.trim();
+                        const patch = buildPatch(col, row, v, columnId);
+                        onCellCommit?.(rowId, columnId, patch);
+                      })
+                  : undefined
+              }
+            />
+          </div>
+        );
+      },
+    };
+
+    return wrappedCol;
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Built-in cell editors
+// ---------------------------------------------------------------------------
+
+function EditCellText<TData extends RowData>({
+  columnId,
+  row,
+  placeholder,
+  autoFocus,
+  errorMessage,
+  onBlur,
+  onKeyDown,
+}: {
+  columnId: string;
+  row: Row<TData>;
+  placeholder: string;
+  autoFocus: boolean;
+  errorMessage?: string;
+  onBlur: React.FocusEventHandler<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}) {
+  const value = String(
+    (row.original as Record<string, unknown>)[columnId] ?? "",
+  );
+  return (
+    <TextInput
+      size="sm"
+      variant="outline"
+      rounded="normal"
+      fullwidth
+      isFloatingLabel={false}
+      label=""
+      required={false}
+      hasClearIcon={false}
+      keepFooterSpace={false}
+      defaultValue={value}
+      placeholder={placeholder}
+      aria-label={placeholder || columnId}
+      autoFocus={autoFocus}
+      error={!!errorMessage}
+      errorMessage={errorMessage}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      className="rounded-md px-2 py-2 typography-small2"
+    />
+  );
+}
+
+function EditCellSelect<TData extends RowData>({
+  row,
+  columnId,
+  col,
+  autoFocus,
+  onCommit,
+  onBlurField,
+  onKeyDown,
+  keepOpenAfterSelect,
+  errorMessage,
+}: {
+  row: Row<TData>;
+  columnId: string;
+  col: EditableColumnDef<TData>;
+  autoFocus: boolean;
+  onCommit: (label: string) => void;
+  onBlurField?: () => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  keepOpenAfterSelect?: boolean;
+  errorMessage?: string;
+}) {
+  const displayValue = String(
+    (row.original as Record<string, unknown>)[columnId] ?? "",
+  );
+
+  const rawOptions =
+    typeof col.editSelectProps?.options === "function"
+      ? col.editSelectProps.options(row)
+      : col.editSelectProps?.options ?? [];
+
+  const options = useMemo<Options[]>(() => {
+    const ph = col.editSelectProps?.placeholder ?? columnId;
+    return [editPlaceholderOption(ph), ...rawOptions];
+  }, [rawOptions, col.editSelectProps?.placeholder, columnId]);
+
+  const selected = useMemo(() => {
+    const cur = displayValue.trim();
+    if (!cur) return options[0]!;
+    return options.find((o) => o.label === cur) ?? options[0]!;
+  }, [displayValue, options]);
+
+  return (
+    <div>
+      <Dropdown
+        id={`edit-dd-${columnId}-${row.id}`}
+        options={options}
+        value={selected}
+        onSelect={(opt) => {
+          if (isPlaceholderOption(opt)) return;
+          onCommit(opt.label);
+        }}
+        size="sm"
+        variant="outline"
+        rounded="normal"
+        fullwidth
+        required={false}
+        isFloatingLabel={false}
+        label=""
+        keepFooterSpace={false}
+        segmentedInput
+        autoFocus={autoFocus}
+        onBlur={onBlurField}
+        onKeyDown={onKeyDown}
+        keepOpenAfterSelect={keepOpenAfterSelect}
+        portal
+        error={!!errorMessage}
+        errorMessage={errorMessage}
+        className={cn(
+          "rounded-md",
+          customInputVariant({ size: "sm" }),
+          displayValue.trim().length > 0 && "font-medium",
+        )}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditCellNumber — inline number editor
+// ---------------------------------------------------------------------------
+
+function EditCellNumber<TData extends RowData>({
+  columnId,
+  row,
+  col,
+  autoFocus,
+  errorMessage,
+  onBlur,
+  onKeyDown,
+}: {
+  columnId: string;
+  row: Row<TData>;
+  col: EditableColumnDef<TData>;
+  autoFocus: boolean;
+  errorMessage?: string;
+  onBlur: (value: string) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}) {
+  const rawValue = (row.original as Record<string, unknown>)[columnId];
+  const numericValue =
+    rawValue === "" || rawValue == null ? undefined : Number(rawValue);
+  const np = col.editNumberProps;
+
+  return (
+    <NumberInput
+      size="sm"
+      variant="outline"
+      rounded="normal"
+      fullwidth
+      isFloatingLabel={false}
+      label=""
+      required={false}
+      hasClearIcon={false}
+      keepFooterSpace={false}
+      defaultValue={numericValue}
+      placeholder={np?.placeholder ?? columnId}
+      aria-label={np?.placeholder || columnId}
+      autoFocus={autoFocus}
+      min={np?.min}
+      max={np?.max}
+      step={np?.step}
+      precision={np?.precision}
+      allowDecimal={np?.allowDecimal}
+      allowNegative={np?.allowNegative}
+      hideControls
+      error={!!errorMessage}
+      errorMessage={errorMessage}
+      onBlur={(e) => onBlur(e.currentTarget.value.trim())}
+      onKeyDown={onKeyDown}
+      className="rounded-md px-2 py-2 typography-small2"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// EditCellCheckbox — inline checkbox editor
+// ---------------------------------------------------------------------------
+
+function EditCellCheckbox<TData extends RowData>({
+  columnId,
+  row,
+  col,
+  errorMessage,
+  onCommit,
+  onKeyDown,
+}: {
+  columnId: string;
+  row: Row<TData>;
+  col: EditableColumnDef<TData>;
+  errorMessage?: string;
+  onCommit: (checked: boolean) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}) {
+  const rawValue = (row.original as Record<string, unknown>)[columnId];
+  const checked = rawValue === true || rawValue === "true";
+  const label = col.editCheckboxProps?.label;
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="flex items-center gap-2 min-h-[32px]">
+        <Checkbox
+          checked={checked}
+          onCheckedChange={(val) => {
+            onCommit(val === true);
+          }}
+          onKeyDown={
+            onKeyDown
+              ? (e) =>
+                  onKeyDown(
+                    e as unknown as React.KeyboardEvent<HTMLInputElement>,
+                  )
+              : undefined
+          }
+          aria-label={label || columnId}
+        />
+        {label && (
+          <span className="typography-small2 text-text-contrast-high select-none">
+            {label}
+          </span>
+        )}
+      </div>
+      {errorMessage && (
+        <span className="typography-small3 text-error-500">{errorMessage}</span>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Disabled cell editor — shown in alwaysEditing rows when canEdit is false
+// ---------------------------------------------------------------------------
+
+function DisabledEditCell<TData extends RowData>({
+  row,
+  col,
+  columnId,
+}: {
+  row: Row<TData>;
+  col: EditableColumnDef<TData>;
+  columnId: string;
+}) {
+  const variant = col.editVariant ?? "text";
+
+  if (variant === "select") {
+    const rawOptions =
+      typeof col.editSelectProps?.options === "function"
+        ? col.editSelectProps.options(row)
+        : col.editSelectProps?.options ?? [];
+
+    const ph = col.editSelectProps?.placeholder ?? columnId;
+    const options = [editPlaceholderOption(ph), ...rawOptions];
+    const displayValue = String(
+      (row.original as Record<string, unknown>)[columnId] ?? "",
+    );
+    const selected =
+      options.find((o) => o.label === displayValue.trim()) ?? options[0]!;
+
+    return (
+      <Dropdown
+        id={`edit-dd-disabled-${columnId}-${row.id}`}
+        options={options}
+        value={selected}
+        onSelect={() => {}}
+        size="sm"
+        variant="outline"
+        rounded="normal"
+        fullwidth
+        required={false}
+        isFloatingLabel={false}
+        label=""
+        keepFooterSpace={false}
+        segmentedInput
+        disabled
+        className={cn("rounded-md", customInputVariant({ size: "sm" }))}
+      />
+    );
+  }
+
+  if (variant === "number") {
+    const rawValue = (row.original as Record<string, unknown>)[columnId];
+    const numericValue =
+      rawValue === "" || rawValue == null ? undefined : Number(rawValue);
+    return (
+      <NumberInput
+        size="sm"
+        variant="outline"
+        rounded="normal"
+        fullwidth
+        isFloatingLabel={false}
+        label=""
+        required={false}
+        hasClearIcon={false}
+        keepFooterSpace={false}
+        defaultValue={numericValue}
+        disabled
+        hideControls
+        className="rounded-md px-2 py-2 typography-small2"
+      />
+    );
+  }
+
+  if (variant === "checkbox") {
+    const rawValue = (row.original as Record<string, unknown>)[columnId];
+    const checked = rawValue === true || rawValue === "true";
+    return (
+      <div className="flex items-center gap-2 min-h-[32px]">
+        <Checkbox checked={checked} disabled />
+        {col.editCheckboxProps?.label && (
+          <span className="typography-small2 text-text-g-contrast-medium select-none">
+            {col.editCheckboxProps.label}
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  const value = String(
+    (row.original as Record<string, unknown>)[columnId] ?? "",
+  );
+  const placeholder = col.editTextProps?.placeholder ?? "";
+
+  return (
+    <TextInput
+      size="sm"
+      variant="outline"
+      rounded="normal"
+      fullwidth
+      isFloatingLabel={false}
+      label=""
+      required={false}
+      hasClearIcon={false}
+      keepFooterSpace={false}
+      defaultValue={value}
+      placeholder={placeholder}
+      aria-label={placeholder || columnId}
+      disabled
+      className="rounded-md px-2 py-2 typography-small2"
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Utility: detect editable column ids from column defs
+// ---------------------------------------------------------------------------
+
+export function detectEditableColumnIds<TData extends RowData>(
+  columns: EditableColumnDef<TData>[],
+): string[] {
+  return columns
+    .filter((col) => col.enableEditing != null || col.editVariant != null)
+    .map(
+      (col) =>
+        (col as { accessorKey?: string }).accessorKey ??
+        (col as { id?: string }).id ??
+        "",
+    )
+    .filter(Boolean);
+}