@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/grid/EnumPicker.tsx

@@ -0,0 +1,108 @@
+import { useRef, useState, type Ref } from 'react';
+import clsx from 'clsx';
+import { Ban, ChevronDown } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon, Menu } from '@adecore/ui';
+import { joinMembers, membersOf, type EnumType } from './enum-type.ts';
+
+export interface EnumPickerProps {
+    type: EnumType;
+    /* The column's value; `null` is NULL. A set is its members joined by commas. */
+    value: string | null;
+    nullable: boolean;
+    /* The accessible name of the trigger. */
+    label: string;
+    /* Opens the menu as it mounts, for a cell that was just put into edit mode. */
+    autoOpen?: boolean;
+    disabled?: boolean;
+    /* The value picked, or `undefined` when the menu closed with nothing changed. */
+    onDone(result: { readonly value: string | null } | undefined): void;
+    /* `cell` fills the box it sits in; `field` is a boxed field of a form. */
+    look?: 'cell' | 'field';
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+
+const LOOK = {
+    cell: 'absolute inset-0 z-10 flex items-center gap-2 border border-accent bg-surface-raised px-3 font-mono text-code outline-0',
+    field: 'field field-sm flex w-full items-center gap-2 font-mono text-code data-disabled:opacity-50'
+} as const;
+
+/*
+ * The editor of a MySQL ENUM or SET column: a menu of the values the type declares, plus NULL where
+ * the column allows it. An enum picks one value and is done; a set toggles its members and is done
+ * when the menu closes. It is a menu rather than a `Select` since a set takes several values and a
+ * cell has to open it by itself as the edit starts.
+ */
+export function EnumPicker({ type, value, nullable, label, autoOpen = false, disabled = false, onDone, look = 'cell', className, ref }: EnumPickerProps) {
+    const { t } = useTranslation('database');
+    const settled = useRef(false);
+    const [members, setMembers] = useState<ReadonlySet<string>>(() => new Set(type.kind === 'set' && value !== null ? membersOf(value) : []));
+    const set = type.kind === 'set';
+
+    const settle = (result: { readonly value: string | null } | undefined): void => {
+        if (!settled.current) {
+            settled.current = true;
+            onDone(result);
+        }
+    };
+
+    const handleOpenChange = (open: boolean): void => {
+        if (open) {
+            settled.current = false;
+            setMembers(new Set(set && value !== null ? membersOf(value) : []));
+            return;
+        }
+        const joined = joinMembers(type, members);
+        settle(set && joined !== value ? { value: joined } : undefined);
+    };
+
+    const toggle = (member: string, checked: boolean): void => {
+        setMembers((now) => {
+            const next = new Set(now);
+            if (checked) {
+                next.add(member);
+            } else {
+                next.delete(member);
+            }
+            return next;
+        });
+    };
+
+    return (
+        <Menu.Root defaultOpen={autoOpen} onOpenChange={handleOpenChange}>
+            <Menu.Trigger ref={ref} disabled={disabled} aria-label={label} className={clsx(LOOK[look], className)}>
+                <span className={clsx('min-w-0 flex-1 truncate text-left', value === null && 'text-text-faint')}>{value ?? 'NULL'}</span>
+                <Icon icon={ChevronDown} size={14} className="shrink-0 text-text-faint" />
+            </Menu.Trigger>
+            <Menu.Popup className="max-h-80 overflow-auto">
+                {nullable && (
+                    <>
+                        <Menu.Item onClick={() => settle({ value: null })}>
+                            <Icon icon={Ban} size={14} />
+                            {t('grid.setNull')}
+                        </Menu.Item>
+                        <Menu.Separator />
+                    </>
+                )}
+                {set
+                    ? type.values.map((member) => (
+                          <Menu.CheckboxItem
+                              key={member}
+                              checked={members.has(member)}
+                              closeOnClick={false}
+                              onCheckedChange={(checked) => toggle(member, checked)}
+                          >
+                              {member === '' ? <span className="text-text-faint">{t('grid.emptyValue')}</span> : member}
+                          </Menu.CheckboxItem>
+                      ))
+                    : type.values.map((option) => (
+                          <Menu.Item key={option} onClick={() => settle({ value: option })}>
+                              <Menu.Check kind="radio" checked={option === value} />
+                              {option === '' ? <span className="text-text-faint">{t('grid.emptyValue')}</span> : option}
+                          </Menu.Item>
+                      ))}
+            </Menu.Popup>
+        </Menu.Root>
+    );
+}

package/src/grid/GridHeaderCell.tsx

@@ -0,0 +1,243 @@
+import { useRef, type MouseEvent, type PointerEvent } from 'react';
+import clsx from 'clsx';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, Copy, Eye, EyeOff, Key, Pin, PinOff } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ColumnResizeHandle, ContextMenu, copyText, Icon, IconButton, isApplePlatform, isModHeld, Menu, Tooltip, useColumnResize } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import type { SortDirection } from '../sql.ts';
+import type { ColumnClick } from './column-selection.ts';
+import { isNumericKind } from './display.ts';
+import { isDoubleClick, MAX_RESIZED_WIDTH, MIN_COLUMN_WIDTH } from './layout.ts';
+import type { GridColumn } from './types.ts';
+
+/* What a header can ask the grid for. Every call names the column by its index in the columns the grid was given. */
+export interface HeaderActions {
+    /* A click on the head picks its column; Shift extends the pick to a range and Mod toggles the column. */
+    onSelect(index: number, click: ColumnClick): void;
+    onSortDirection(index: number, direction: SortDirection): void;
+    onClearSort(): void;
+    onResize(index: number, width: number): void;
+    onFit(index: number): void;
+    onHide(index: number): void;
+    onShowAll(): void;
+    onTogglePin(index: number): void;
+}
+
+export interface GridHeaderCellProps {
+    column: GridColumn;
+    /* Position among the columns the grid was given, counted from zero. */
+    index: number;
+    /* Position among the columns drawn, counted from zero. */
+    position: number;
+    width: number;
+    /* Whether the grid offers sorting at all, which its menu then holds. */
+    sortable: boolean;
+    /* Whether the column is one of those picked; the head then wears the accent. */
+    selected: boolean;
+    /* The DOM id the grid points `aria-activedescendant` at while columns are picked. */
+    id: string;
+    sort: { direction: SortDirection; position: number } | null;
+    /* Whether more than one column is sorted, which numbers the arrows. */
+    multipleSorts: boolean;
+    hasSorts: boolean;
+    pinned: boolean;
+    /* Where a pinned header sticks, counted from the left edge of the scroll box. */
+    stickyLeft: number;
+    /* The pinned column the others scroll under, which carries the stronger edge. */
+    lastPinned: boolean;
+    last: boolean;
+    hasHidden: boolean;
+    canHide: boolean;
+    actions: HeaderActions;
+}
+
+type MenuProps = Pick<GridHeaderCellProps, 'column' | 'index' | 'sortable' | 'hasSorts' | 'pinned' | 'hasHidden' | 'canHide' | 'actions'>;
+
+/* The items of the menu a header opens, from its button and from a right click. */
+function HeaderMenuItems({ column, index, sortable, hasSorts, pinned, hasHidden, canHide, actions }: MenuProps) {
+    const { t } = useTranslation('database');
+    return (
+        <>
+            {sortable && (
+                <>
+                    <Menu.Item onClick={() => actions.onSortDirection(index, 'asc')}>
+                        <Icon icon={ArrowUp} size={14} />
+                        {t('grid.column.sortAscending')}
+                    </Menu.Item>
+                    <Menu.Item onClick={() => actions.onSortDirection(index, 'desc')}>
+                        <Icon icon={ArrowDown} size={14} />
+                        {t('grid.column.sortDescending')}
+                    </Menu.Item>
+                    <Menu.Item disabled={!hasSorts} onClick={actions.onClearSort}>
+                        <Icon icon={ArrowUpDown} size={14} />
+                        {t('grid.column.clearSorting')}
+                    </Menu.Item>
+                    <Menu.Separator />
+                </>
+            )}
+            <Menu.Item disabled={!canHide} onClick={() => actions.onHide(index)}>
+                <Icon icon={EyeOff} size={14} />
+                {t('grid.column.hide')}
+            </Menu.Item>
+            {hasHidden && (
+                <Menu.Item onClick={actions.onShowAll}>
+                    <Icon icon={Eye} size={14} />
+                    {t('grid.column.showAll')}
+                </Menu.Item>
+            )}
+            <Menu.Item onClick={() => actions.onTogglePin(index)}>
+                <Icon icon={pinned ? PinOff : Pin} size={14} />
+                {t(pinned ? 'grid.column.unpin' : 'grid.column.pin')}
+            </Menu.Item>
+            <Menu.Separator />
+            <Menu.Item onClick={() => copyText(column.name)}>
+                <Icon icon={Copy} size={14} />
+                {t('grid.column.copyName')}
+            </Menu.Item>
+        </>
+    );
+}
+
+/* The facts about a table column that a tooltip can carry: its type, whether it takes NULL, its default. */
+function ColumnFacts({ column }: { column: GridColumn }) {
+    const { t } = useTranslation('database');
+    const facts = [
+        column.type === '' ? null : column.type,
+        column.nullable === undefined ? null : t(column.nullable ? 'grid.column.nullable' : 'grid.column.notNull'),
+        column.defaultValue === undefined || column.defaultValue === null ? null : t('grid.column.default', { value: column.defaultValue }),
+        column.autoIncrement === true ? t('grid.column.autoIncrement') : null
+    ].filter((fact) => fact !== null);
+    return (
+        <>
+            <span className="block">{column.name}</span>
+            {facts.length > 0 && <span className="block">{facts.join(', ')}</span>}
+        </>
+    );
+}
+
+/* One column's head: its name, the sort it carries, a key on a primary key column, a menu and the strip that resizes it. Numbers sit against the end, like their cells. */
+export function GridHeaderCell({
+    column,
+    index,
+    position,
+    width,
+    sortable,
+    selected,
+    id,
+    sort,
+    multipleSorts,
+    hasSorts,
+    pinned,
+    stickyLeft,
+    lastPinned,
+    last,
+    hasHidden,
+    canHide,
+    actions
+}: GridHeaderCellProps) {
+    const { t } = useTranslation('database');
+    const cell = useRef<HTMLDivElement>(null);
+    const lastPress = useRef<number | null>(null);
+    /* Set by a press on the resize strip, since the click that ends the drag would otherwise pick the column. */
+    const resized = useRef(false);
+    const { startResize } = useColumnResize(cell, {
+        size: width,
+        min: MIN_COLUMN_WIDTH,
+        from: 'left',
+        max: () => MAX_RESIZED_WIDTH,
+        onSize: (size) => actions.onResize(index, size)
+    });
+
+    const pressHandle = (event: PointerEvent<HTMLElement>): void => {
+        resized.current = true;
+        if (isDoubleClick(lastPress.current, event.timeStamp)) {
+            lastPress.current = null;
+            actions.onFit(index);
+            return;
+        }
+        lastPress.current = event.timeStamp;
+        startResize(event);
+    };
+
+    const handleClick = (event: MouseEvent<HTMLDivElement>): void => {
+        const target = event.target as Element;
+        // A click inside a menu popup reaches here through the React tree, not the DOM.
+        if (!event.currentTarget.contains(target) || target.closest('button') !== null) {
+            return;
+        }
+        if (resized.current) {
+            resized.current = false;
+            return;
+        }
+        actions.onSelect(index, { shiftKey: event.shiftKey, mod: isModHeld(event, isApplePlatform()) });
+    };
+
+    const menuProps = { column, index, sortable, hasSorts, pinned, hasHidden, canHide, actions };
+    const numeric = isNumericKind(column.kind);
+
+    return (
+        <ContextMenu.Root>
+            <div
+                ref={cell}
+                id={id}
+                role="columnheader"
+                aria-colindex={position + 2}
+                aria-selected={selected}
+                aria-sort={sortable ? (sort === null ? 'none' : sort.direction === 'asc' ? 'ascending' : 'descending') : undefined}
+                data-selected={selected ? '' : undefined}
+                className={clsx(
+                    'group/header flex h-full shrink-0 cursor-default text-xs font-medium select-none',
+                    pinned ? 'sticky z-10' : 'relative',
+                    selected ? 'bg-accent text-accent-text' : [pinned && 'bg-surface', sort === null ? 'text-text-muted' : 'text-text'],
+                    last ? 'border-r-0' : 'border-r',
+                    pinned && lastPinned ? 'border-border-strong' : 'border-border-soft'
+                )}
+                style={{ width, left: pinned ? stickyLeft : undefined }}
+                onPointerDownCapture={() => {
+                    resized.current = false;
+                }}
+                onClick={handleClick}
+            >
+                <ContextMenu.Trigger
+                    className={clsx(
+                        'flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-hidden px-3',
+                        numeric && 'justify-end group-data-[selected]/header:pr-8'
+                    )}
+                >
+                    {column.primaryKey === true && <Icon icon={Key} size={12} className="shrink-0 text-(--file-icon-yellow)" />}
+                    <Tooltip label={<ColumnFacts column={column} />} side="bottom">
+                        <span className="min-w-0 truncate">{column.name}</span>
+                    </Tooltip>
+                    {sort !== null && (
+                        <span className={clsx('flex shrink-0 items-center gap-0.5', selected ? 'text-accent-text' : 'text-text-muted')}>
+                            <Icon icon={sort.direction === 'asc' ? ArrowUp : ArrowDown} size={12} />
+                            {multipleSorts && <span className="tabular-nums">{formatNumber(sort.position)}</span>}
+                        </span>
+                    )}
+                </ContextMenu.Trigger>
+                <Menu.Root>
+                    <IconButton
+                        render={<Menu.Trigger />}
+                        icon={ChevronDown}
+                        size="xs"
+                        label={t('grid.column.menu')}
+                        tooltip={false}
+                        className={clsx(
+                            'absolute top-1/2 right-2 -translate-y-1/2',
+                            selected
+                                ? 'bg-transparent text-accent-text'
+                                : 'bg-surface opacity-0 group-hover/header:opacity-100 focus-visible:opacity-100 data-[popup-open]:opacity-100'
+                        )}
+                    />
+                    <Menu.Popup>
+                        <HeaderMenuItems {...menuProps} />
+                    </Menu.Popup>
+                </Menu.Root>
+                <ColumnResizeHandle from="left" onPointerDown={pressHandle} className="hover:bg-border-strong" />
+            </div>
+            <ContextMenu.Popup>
+                <HeaderMenuItems {...menuProps} />
+            </ContextMenu.Popup>
+        </ContextMenu.Root>
+    );
+}

package/src/grid/RecordView.tsx

@@ -0,0 +1,293 @@
+import { useMemo, useRef, useState, type KeyboardEvent, type Ref } from 'react';
+import clsx from 'clsx';
+import { ArrowUpRight, Ban, ChevronDown, ChevronUp, Copy, RotateCcw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, copyText, EDIT_SHORTCUTS, Icon, IconButton, Input, isApplePlatform, isModHeld, Kbd, shortcut, Spinner } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { useNumberNotation } from '../client-context.ts';
+import type { EditValue, Value } from '../protocol/index.ts';
+import { cellView, copyTextOf, isNumericKind, isPreview, numeralText, type NumberNotation } from './display.ts';
+import { draftOf, parseDraft } from './edit-value.ts';
+import { parseEnumType } from './enum-type.ts';
+import { EnumPicker } from './EnumPicker.tsx';
+import type { FocusedCell, GridColumn, GridRow } from './types.ts';
+
+export interface RecordViewProps {
+    columns: readonly GridColumn[];
+    rows: readonly GridRow[];
+    /* The row shown, an index into `rows`. */
+    index: number;
+    onIndexChange(index: number): void;
+    /* Lets a field be edited; the rows that are `locked` stay as they are. */
+    editable?: boolean;
+    onCommit?(rowKey: string, column: number, value: EditValue): void;
+    /* The whole value of a field that is only a preview. Resolves `undefined` when it cannot be had. */
+    loadValue?(rowKey: string, column: number): Promise<Value | undefined>;
+    /* The field that holds the focus changed, or lost it. */
+    onFocusedCellChange?(cell: FocusedCell | null): void;
+    onFollow?(cell: FocusedCell): void;
+    canFollow?(cell: FocusedCell): boolean;
+    /* The accessible name of the list of fields. */
+    label: string;
+    /* Drawn while there are no rows. */
+    empty?: string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+
+interface Editing {
+    column: number;
+    draft: string;
+    initial: string;
+    loading: boolean;
+}
+
+const PREVIOUS_ROW = shortcut('Mod+ArrowUp');
+const NEXT_ROW = shortcut('Mod+ArrowDown');
+
+const textOf = (cell: GridRow['cells'][number], kind: GridColumn['kind'], notation: NumberNotation, readOnly: boolean): string => {
+    if (isPreview(cell)) {
+        return cellView(cell, kind, notation).text;
+    }
+    if (cell !== null && typeof cell === 'object' && cell.kind === 'default') {
+        return '';
+    }
+    // A field that can be edited holds the server's text, which is what an edit starts from.
+    if (readOnly && isNumericKind(kind) && (typeof cell === 'number' || typeof cell === 'string')) {
+        return numeralText(cell, notation);
+    }
+    return draftOf(cell);
+};
+
+/*
+ * One row as a list of fields, the column's name and type beside an editor for its value. Edits go
+ * to the same `onCommit` the grid uses, so they pile up as pending changes there. Up and Down move
+ * between the fields; with Mod they move between the rows.
+ */
+export function RecordView({
+    columns,
+    rows,
+    index,
+    onIndexChange,
+    editable = false,
+    onCommit,
+    loadValue,
+    onFocusedCellChange,
+    onFollow,
+    canFollow,
+    label,
+    empty,
+    className,
+    ref
+}: RecordViewProps) {
+    const { t } = useTranslation('database');
+    const notation = useNumberNotation();
+    const fields = useRef<(HTMLElement | null)[]>([]);
+    const [editing, setEditing] = useState<Editing | null>(null);
+    const row = rows[index];
+    const enumTypes = useMemo(() => columns.map((column) => parseEnumType(column.type)), [columns]);
+    const apple = isApplePlatform();
+
+    const canEdit = (column: number): boolean =>
+        editable && row !== undefined && row.locked !== true && row.state !== 'deleted' && columns[column]?.readOnly !== true;
+
+    const commitEdit = (): void => {
+        if (editing !== null && !editing.loading && row !== undefined && editing.draft !== editing.initial) {
+            onCommit?.(row.key, editing.column, parseDraft(editing.draft, columns[editing.column]!.kind));
+        }
+        setEditing(null);
+    };
+
+    const commitValue = (column: number, value: EditValue): void => {
+        if (row !== undefined && canEdit(column)) {
+            onCommit?.(row.key, column, value);
+        }
+    };
+
+    const beginEdit = async (column: number): Promise<void> => {
+        const cell = row?.cells[column] ?? null;
+        if (row === undefined || !canEdit(column) || !isPreview(cell) || loadValue === undefined) {
+            return;
+        }
+        setEditing({ column, draft: '', initial: '', loading: true });
+        const value = await loadValue(row.key, column);
+        setEditing((now) => {
+            if (now === null || !now.loading || now.column !== column) {
+                return now;
+            }
+            if (value === undefined) {
+                return null;
+            }
+            const text = draftOf(value);
+            return { column, draft: text, initial: text, loading: false };
+        });
+    };
+
+    const changeDraft = (column: number, draft: string): void => {
+        setEditing((now) =>
+            now !== null && now.column === column
+                ? { ...now, draft }
+                : { column, draft, initial: textOf(row?.cells[column] ?? null, columns[column]!.kind, 'database', false), loading: false }
+        );
+    };
+
+    const focusField = (column: number): void => {
+        fields.current[column]?.focus();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLElement>, column: number): void => {
+        if (event.nativeEvent.isComposing) {
+            return;
+        }
+        const mod = isModHeld(event, apple);
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowUp' ? -1 : 1;
+            if (mod) {
+                commitEdit();
+                onIndexChange(Math.max(0, Math.min(index + direction, rows.length - 1)));
+            } else {
+                focusField(Math.max(0, Math.min(column + direction, columns.length - 1)));
+            }
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            commitEdit();
+        } else if (event.key === 'Escape' && editing !== null) {
+            event.preventDefault();
+            event.stopPropagation();
+            setEditing(null);
+        }
+    };
+
+    const cellOf = (column: number): FocusedCell | null => (row === undefined ? null : { rowKey: row.key, column });
+
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 flex-1 flex-col bg-surface', className)}>
+            <div className="flex h-10 shrink-0 items-center gap-2 border-b border-border px-3">
+                <IconButton
+                    icon={ChevronUp}
+                    size="sm"
+                    label={t('table.record.previous')}
+                    kbd={PREVIOUS_ROW}
+                    disabled={index <= 0}
+                    onClick={() => onIndexChange(index - 1)}
+                />
+                <IconButton
+                    icon={ChevronDown}
+                    size="sm"
+                    label={t('table.record.next')}
+                    kbd={NEXT_ROW}
+                    disabled={index >= rows.length - 1}
+                    onClick={() => onIndexChange(index + 1)}
+                />
+                {row !== undefined && (
+                    <>
+                        <span className="text-sm font-medium text-text tabular-nums">
+                            {row.number === null ? t('table.record.newRow') : t('table.record.row', { number: formatNumber(row.number) })}
+                        </span>
+                        <span className="text-xs text-text-faint tabular-nums">
+                            {t('table.record.position', { index: formatNumber(index + 1), count: formatNumber(rows.length) })}
+                        </span>
+                    </>
+                )}
+            </div>
+            {row === undefined ? (
+                <p className="px-4 py-6 text-xs text-text-muted">{empty}</p>
+            ) : (
+                <div role="group" aria-label={label} className="min-h-0 flex-1 overflow-auto py-1">
+                    {columns.map((column, position) => {
+                        const cell = row.cells[position] ?? null;
+                        const enumType = enumTypes[position] ?? null;
+                        const active = editing !== null && editing.column === position;
+                        const editableField = canEdit(position);
+                        const preview = isPreview(cell);
+                        const cellKey = cellOf(position);
+                        const followable = cellKey !== null && onFollow !== undefined && (canFollow?.(cellKey) ?? true);
+                        const nullable = column.nullable !== false;
+                        const placeholder = cell === null ? 'NULL' : typeof cell === 'object' && cell.kind === 'default' ? 'DEFAULT' : undefined;
+                        return (
+                            <ContextMenu.Root key={position}>
+                                <ContextMenu.Trigger
+                                    className={clsx('flex items-center gap-3 px-4 py-1', row.edited?.has(position) && 'bg-accent/10')}
+                                    onFocusCapture={() => onFocusedCellChange?.(cellKey)}
+                                >
+                                    <span className="flex w-56 shrink-0 items-baseline gap-2 truncate">
+                                        <span className="truncate font-mono text-code text-text">{column.name}</span>
+                                        {column.type !== '' && <span className="truncate text-xs text-text-faint">{column.type}</span>}
+                                    </span>
+                                    <span className="relative flex min-w-0 flex-1 items-center gap-1">
+                                        {enumType !== null ? (
+                                            <EnumPicker
+                                                look="field"
+                                                type={enumType}
+                                                value={typeof cell === 'string' ? cell : null}
+                                                nullable={nullable}
+                                                label={column.name}
+                                                disabled={!editableField}
+                                                ref={(node) => {
+                                                    fields.current[position] = node;
+                                                }}
+                                                onDone={(result) => {
+                                                    if (result !== undefined && result.value !== (typeof cell === 'string' ? cell : null)) {
+                                                        commitValue(position, result.value);
+                                                    }
+                                                }}
+                                            />
+                                        ) : (
+                                            <Input
+                                                size="sm"
+                                                mono
+                                                spellCheck={false}
+                                                aria-label={column.name}
+                                                ref={(node) => {
+                                                    fields.current[position] = node;
+                                                }}
+                                                value={active ? editing.draft : textOf(cell, column.kind, notation, !editableField)}
+                                                placeholder={placeholder}
+                                                readOnly={!editableField || (preview && (!active || editing.loading))}
+                                                className={clsx('min-w-0 flex-1', row.state === 'deleted' && 'line-through')}
+                                                onFocus={() => void beginEdit(position)}
+                                                onBlur={commitEdit}
+                                                onChange={(event) => changeDraft(position, event.target.value)}
+                                                onKeyDown={(event) => handleKeyDown(event, position)}
+                                            />
+                                        )}
+                                        {active && editing.loading && <Spinner size={12} label={t('grid.loadingValue')} className="absolute right-2" />}
+                                        {followable && (
+                                            <IconButton
+                                                icon={ArrowUpRight}
+                                                size="xs"
+                                                label={t('grid.followReference')}
+                                                onClick={() => cellKey !== null && onFollow?.(cellKey)}
+                                            />
+                                        )}
+                                    </span>
+                                </ContextMenu.Trigger>
+                                <ContextMenu.Popup>
+                                    <ContextMenu.Item onClick={() => copyText(copyTextOf(cell))}>
+                                        <Icon icon={Copy} size={14} />
+                                        {t('grid.copyValue')}
+                                        <Kbd shortcut={EDIT_SHORTCUTS.copy} />
+                                    </ContextMenu.Item>
+                                    {editable && (
+                                        <>
+                                            <ContextMenu.Separator />
+                                            <ContextMenu.Item disabled={!editableField || !nullable} onClick={() => commitValue(position, null)}>
+                                                <Icon icon={Ban} size={14} />
+                                                {t('grid.setNull')}
+                                            </ContextMenu.Item>
+                                            <ContextMenu.Item disabled={!editableField} onClick={() => commitValue(position, { kind: 'default' })}>
+                                                <Icon icon={RotateCcw} size={14} />
+                                                {t('grid.setDefault')}
+                                            </ContextMenu.Item>
+                                        </>
+                                    )}
+                                </ContextMenu.Popup>
+                            </ContextMenu.Root>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+}