@adecore/database 0.0.1 → 0.16.0-beta.0

package/dist/grid/DataGrid.js

@@ -0,0 +1,512 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { ArrowUpRight, Ban, Copy, RotateCcw } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ContextMenu, copyText, EDIT_SHORTCUTS, Icon, IconButton, isApplePlatform, isModHeld, Kbd, Spinner, useContentSize } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { fullRect, rectBetween, rectContains } from './cell-range.js';
+import { CellEditor } from './CellEditor.js';
+import { captureLayout, restoreLayout, sameLayout } from './column-layout.js';
+import { NO_COLUMN_SELECTION, selectColumn, shownSelection } from './column-selection.js';
+import { displayOrder, hideColumn, pinnedCount, showAllColumns, togglePin } from './column-view.js';
+import { COPY_FORMATS, formatCopy } from './copy-formats.js';
+import { CopyAsMenu } from './CopyAsMenu.js';
+import { cellView, copyTextOf, isPreview } from './display.js';
+import { draftOf, parseDraft } from './edit-value.js';
+import { parseEnumType } from './enum-type.js';
+import { EnumPicker } from './EnumPicker.js';
+import { GridHeaderCell } from './GridHeaderCell.js';
+import { clampColumnWidth, columnOffsets, estimateColumnWidth, fitColumnWidth, FALLBACK_VIEWPORT_HEIGHT, growWidths, gutterWidth, HEADER_HEIGHT, OVERSCAN_ROWS, ROW_HEIGHT, scrollToReveal, visibleRange } from './layout.js';
+import { moveFocus } from './navigation.js';
+import { selectRow } from './row-selection.js';
+import { sortOnly, sortStateOf } from './sort.js';
+import { useNumberNotation } from '../client-context.js';
+import { usePopupPress } from '../use-popup-press.js';
+const NO_KEYS = new Set();
+const NO_SORTS = [];
+const signatureOf = (columns) => columns.map((column) => column.name).join('\u0000');
+const textOf = (view) => (view.suffix === undefined ? view.text : `${view.text} ${view.suffix}`);
+const estimateWidths = (columns, rows, notation) => columns.map((column, index) => estimateColumnWidth(column.name, rows.slice(0, 50).map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, notation))), column.primaryKey === true));
+const TONE = {
+    value: '',
+    null: 'text-text-faint',
+    default: 'text-text-faint italic'
+};
+const ROW_STATE = {
+    inserted: 'bg-positive/10',
+    deleted: 'bg-status-error/10 text-text-faint'
+};
+/*
+ * The table of the table view and of the console. Only the rows in view are drawn, at a fixed
+ * height, inside a box as tall as all of them; the header and the row-number gutter stick to the edges
+ * of the scroll box. Focus stays on that box and points at the cell with `aria-activedescendant`, so
+ * a cell scrolled out of the window loses nothing.
+ */
+export function DataGrid({ columns, rows, label, editable = false, selectedKeys, onSelectedKeysChange, onCommit, loadValue, sorts, onSortsChange, onFocusedCellChange, onDeleteSelected, sqlTarget, queryMenu, menu, onDuplicateRows, onFollow, canFollow, onRangeChange, initialLayout, onLayoutChange, focusRequest, columnRequest, empty, className, ref }) {
+    const { t } = useTranslation('database');
+    const gridId = useId();
+    const scroller = useRef(null);
+    const anchor = useRef(-1);
+    const pressedInPopup = usePopupPress();
+    const notation = useNumberNotation();
+    /* Set once an edit commits or cancels, so the blur that follows the input's removal does not commit it again. */
+    const settled = useRef(true);
+    const dragging = useRef(false);
+    const dragOrigin = useRef(null);
+    const reportFocus = useRef(onFocusedCellChange);
+    const reportRange = useRef(onRangeChange);
+    const reportLayout = useRef(onLayoutChange);
+    const [measure, size] = useContentSize();
+    const [scrollTop, setScrollTop] = useState(0);
+    const [focused, setFocused] = useState(null);
+    const [rangeAnchor, setRangeAnchor] = useState(null);
+    const [columnSelection, setColumnSelection] = useState(NO_COLUMN_SELECTION);
+    const [menuTarget, setMenuTarget] = useState(null);
+    const [editing, setEditing] = useState(null);
+    const [ownSelection, setOwnSelection] = useState(NO_KEYS);
+    const [layout, setLayout] = useState(() => ({
+        signature: signatureOf(columns),
+        rows,
+        notation,
+        estimated: estimateWidths(columns, rows, notation),
+        ...restoreLayout(columns, initialLayout)
+    }));
+    const reportedLayout = useRef(captureLayout(columns, layout));
+    const signature = signatureOf(columns);
+    let current = layout;
+    if (layout.signature !== signature || layout.rows !== rows || layout.notation !== notation) {
+        const same = layout.signature === signature;
+        const estimated = estimateWidths(columns, rows, notation);
+        current = {
+            signature,
+            rows,
+            notation,
+            estimated: same ? growWidths(layout.estimated, estimated) : estimated,
+            ...(same ? { resized: layout.resized, view: layout.view } : restoreLayout(columns, initialLayout))
+        };
+        setLayout(current);
+    }
+    const order = displayOrder(columns.length, current.view);
+    const pinnedShown = pinnedCount(columns.length, current.view);
+    const displayOf = new Map(order.map((index, position) => [index, position]));
+    const widths = columns.map((_, index) => current.resized[index] ?? current.estimated[index] ?? clampColumnWidth(0));
+    const shownWidths = order.map((index) => widths[index]);
+    const offsets = columnOffsets(shownWidths);
+    const gutter = gutterWidth(rows.length);
+    const totalWidth = gutter + shownWidths.reduce((sum, width) => sum + width, 0);
+    const pinnedWidth = shownWidths.slice(0, pinnedShown).reduce((sum, width) => sum + width, 0);
+    const viewportHeight = size.height > 0 ? size.height : FALLBACK_VIEWPORT_HEIGHT;
+    const range = visibleRange(scrollTop - HEADER_HEIGHT, viewportHeight, ROW_HEIGHT, rows.length, OVERSCAN_ROWS);
+    const selection = selectedKeys ?? ownSelection;
+    const isShown = (position) => position !== null && position.row < rows.length && displayOf.has(position.column);
+    const focusCell = isShown(focused) ? focused : null;
+    const anchorCell = isShown(rangeAnchor) ? rangeAnchor : null;
+    const toDisplay = (position) => ({ row: position.row, column: displayOf.get(position.column) });
+    const fromDisplay = (position) => ({ row: position.row, column: order[position.column] });
+    const rect = focusCell === null ? null : rectBetween(toDisplay(anchorCell ?? focusCell), toDisplay(focusCell));
+    const page = Math.max(1, Math.floor((viewportHeight - HEADER_HEIGHT) / ROW_HEIGHT));
+    const sortable = onSortsChange !== undefined;
+    const sortList = sorts ?? NO_SORTS;
+    const focusedRowKey = focusCell === null ? null : (rows[focusCell.row]?.key ?? null);
+    const focusedColumn = focusCell?.column ?? -1;
+    const pickedColumns = shownSelection(columnSelection, order);
+    const pickedSet = new Set(pickedColumns);
+    const columnBlock = pickedColumns.length > 0 && rows.length > 0 ? { top: 0, bottom: rows.length - 1, columns: pickedColumns } : null;
+    const cellBlock = rect === null ? null : { top: rect.top, bottom: rect.bottom, columns: order.slice(rect.left, rect.right + 1) };
+    const block = columnBlock ?? cellBlock;
+    const blockKey = block === null ? '' : `${block.top}:${block.bottom}:${block.columns.join(',')}`;
+    const headerId = (column) => `${gridId}-h-${column}`;
+    const enumTypes = useMemo(() => columns.map((column) => parseEnumType(column.type)), [columns]);
+    useEffect(() => {
+        reportFocus.current = onFocusedCellChange;
+    });
+    useEffect(() => {
+        reportRange.current = onRangeChange;
+        reportLayout.current = onLayoutChange;
+    });
+    useEffect(() => {
+        const captured = captureLayout(columns, current);
+        if (!sameLayout(captured, reportedLayout.current)) {
+            reportedLayout.current = captured;
+            reportLayout.current?.(captured);
+        }
+    }, [columns, current]);
+    useEffect(() => {
+        reportFocus.current?.(focusedRowKey === null ? null : { rowKey: focusedRowKey, column: focusedColumn });
+    }, [focusedRowKey, focusedColumn]);
+    useEffect(() => {
+        if (blockKey === '') {
+            reportRange.current?.(null);
+            return;
+        }
+        const [top, bottom, list] = blockKey.split(':');
+        reportRange.current?.({ top: Number(top), bottom: Number(bottom), columns: list === '' ? [] : list.split(',').map(Number) });
+    }, [blockKey]);
+    useEffect(() => {
+        const index = focusRequest === null || focusRequest === undefined ? -1 : rows.findIndex((row) => row.key === focusRequest.rowKey);
+        if (focusRequest !== null && focusRequest !== undefined && index >= 0) {
+            focusAt({ row: index, column: focusRequest.column });
+            scroller.current?.focus();
+        }
+        // Only a new request moves the focus; the rows changing under a request already handled must not.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [focusRequest]);
+    useEffect(() => {
+        if (columnRequest !== null && columnRequest !== undefined && displayOf.has(columnRequest.column)) {
+            pickColumn(columnRequest.column);
+            revealColumn(columnRequest.column);
+            scroller.current?.focus();
+        }
+        // Only a new request moves the pick; the columns changing under a request already handled must not.
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [columnRequest]);
+    useEffect(() => {
+        const stop = () => {
+            dragging.current = false;
+        };
+        window.addEventListener('pointerup', stop);
+        window.addEventListener('pointercancel', stop);
+        return () => {
+            window.removeEventListener('pointerup', stop);
+            window.removeEventListener('pointercancel', stop);
+        };
+    }, []);
+    const attach = useCallback((node) => {
+        scroller.current = node;
+        measure(node);
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [measure, ref]);
+    const cellId = (row, column) => `${gridId}-${row}-${column}`;
+    const canEdit = (position) => {
+        const row = rows[position.row];
+        const column = columns[position.column];
+        if (!editable || row === undefined || column === undefined || row.locked === true || row.state === 'deleted' || column.readOnly === true) {
+            return false;
+        }
+        return !isPreview(row.cells[position.column] ?? null) || loadValue !== undefined;
+    };
+    const revealColumn = (column) => {
+        const element = scroller.current;
+        const at = displayOf.get(column);
+        if (element === null || at === undefined || at < pinnedShown) {
+            return;
+        }
+        const left = scrollToReveal(gutter + (offsets[at] ?? 0), shownWidths[at] ?? 0, element.scrollLeft, element.clientWidth, gutter + pinnedWidth);
+        if (left !== element.scrollLeft) {
+            element.scrollLeft = left;
+        }
+    };
+    const reveal = (position) => {
+        const element = scroller.current;
+        if (element === null) {
+            return;
+        }
+        const top = scrollToReveal(HEADER_HEIGHT + position.row * ROW_HEIGHT, ROW_HEIGHT, element.scrollTop, element.clientHeight, HEADER_HEIGHT);
+        if (top !== element.scrollTop) {
+            element.scrollTop = top;
+        }
+        revealColumn(position.column);
+    };
+    const pickColumn = (column, click = { shiftKey: false, mod: false }) => {
+        setColumnSelection((now) => selectColumn(now, order, column, click));
+        setRangeAnchor(null);
+    };
+    /* With `extend` the range grows from where it started; otherwise the cell stands alone. */
+    const focusAt = (position, extend = false) => {
+        setColumnSelection(NO_COLUMN_SELECTION);
+        setRangeAnchor(extend && focusCell !== null ? (anchorCell ?? focusCell) : null);
+        setFocused(position);
+        reveal(position);
+    };
+    const step = (from, input) => {
+        const next = moveFocus(isShown(from) ? toDisplay(from) : null, input, { rows: rows.length, columns: order.length, page });
+        return next === null ? null : fromDisplay(next);
+    };
+    const setSelection = (next) => {
+        if (selectedKeys === undefined) {
+            setOwnSelection(next);
+        }
+        onSelectedKeysChange?.(next);
+    };
+    const beginEdit = async (position) => {
+        const row = rows[position.row];
+        if (row === undefined || !canEdit(position)) {
+            return;
+        }
+        const cell = row.cells[position.column] ?? null;
+        settled.current = false;
+        if (!isPreview(cell)) {
+            const text = draftOf(cell);
+            setEditing({ ...position, draft: text, initial: text, loading: false });
+            return;
+        }
+        setEditing({ ...position, draft: '', initial: '', loading: true });
+        const value = await loadValue?.(row.key, position.column);
+        setEditing((now) => {
+            if (now === null || !now.loading || now.row !== position.row || now.column !== position.column) {
+                return now;
+            }
+            if (value === undefined) {
+                return null;
+            }
+            const text = draftOf(value);
+            return { ...now, draft: text, initial: text, loading: false };
+        });
+    };
+    const finishEdit = (commit, move) => {
+        if (editing === null || settled.current) {
+            return;
+        }
+        settled.current = true;
+        const column = columns[editing.column];
+        const row = rows[editing.row];
+        if (commit && !editing.loading && editing.draft !== editing.initial && column !== undefined && row !== undefined) {
+            onCommit?.(row.key, editing.column, parseDraft(editing.draft, column.kind));
+        }
+        setEditing(null);
+        scroller.current?.focus();
+        if (move !== undefined) {
+            const next = step(editing, { key: 'Tab', shiftKey: move === 'previous', mod: false });
+            if (next !== null) {
+                focusAt(next);
+            }
+        }
+    };
+    const finishPick = (result) => {
+        if (editing === null || settled.current) {
+            return;
+        }
+        settled.current = true;
+        const row = rows[editing.row];
+        const before = row?.cells[editing.column] ?? null;
+        if (result !== undefined && row !== undefined && result.value !== (typeof before === 'string' ? before : null)) {
+            onCommit?.(row.key, editing.column, result.value);
+        }
+        setEditing(null);
+        scroller.current?.focus();
+    };
+    const followCell = (cell) => onFollow !== undefined && (canFollow?.(cell) ?? true);
+    const commitValue = (value) => {
+        const position = menuTarget === null || menuTarget.column === null ? null : { row: menuTarget.row, column: menuTarget.column };
+        const row = position === null ? undefined : rows[position.row];
+        if (position !== null && row !== undefined && canEdit(position)) {
+            onCommit?.(row.key, position.column, value);
+        }
+    };
+    /* The cells of the range or of the picked columns, as the columns and rows a copy writes. */
+    const blockOf = () => {
+        if (block === null) {
+            return null;
+        }
+        return {
+            columns: block.columns.map((index) => ({ name: columns[index].name, kind: columns[index].kind })),
+            rows: rows.slice(block.top, block.bottom + 1).map((row) => block.columns.map((index) => row.cells[index] ?? null)),
+            target: sqlTarget
+        };
+    };
+    const copyAs = (format) => {
+        const block = blockOf();
+        if (block !== null) {
+            copyText(formatCopy(format, block));
+        }
+    };
+    /* One cell copies as it reads; a block copies as TSV, which a spreadsheet pastes into cells. */
+    const copyRange = () => {
+        if (block !== null && block.top === block.bottom && block.columns.length === 1) {
+            copyText(copyTextOf(rows[block.top]?.cells[block.columns[0]] ?? null));
+        }
+        else {
+            copyAs('tsv');
+        }
+    };
+    const copyCell = () => {
+        const row = menuTarget === null ? undefined : rows[menuTarget.row];
+        if (row !== undefined && menuTarget?.column != null) {
+            copyText(copyTextOf(row.cells[menuTarget.column] ?? null));
+        }
+    };
+    const selectAll = () => {
+        const all = fullRect(rows.length, order.length);
+        if (all !== null) {
+            setColumnSelection(NO_COLUMN_SELECTION);
+            setRangeAnchor(fromDisplay({ row: all.top, column: all.left }));
+            setFocused(fromDisplay({ row: all.bottom, column: all.right }));
+        }
+    };
+    const selectRowAt = (index, click) => {
+        const result = selectRow(rows.map((row) => row.key), selection, anchor.current, index, click);
+        anchor.current = result.anchor;
+        setSelection(result.selected);
+        if (!click.mod && order.length > 0) {
+            setColumnSelection(NO_COLUMN_SELECTION);
+            setRangeAnchor({ row: result.anchor, column: order[order.length - 1] });
+            setFocused({ row: index, column: order[0] });
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.target !== event.currentTarget || event.altKey) {
+            return;
+        }
+        if (editing !== null) {
+            if (event.key === 'Escape') {
+                finishEdit(false);
+            }
+            return;
+        }
+        const mod = isModHeld(event, isApplePlatform());
+        const key = event.key.toLowerCase();
+        if (mod && key === 'c') {
+            event.preventDefault();
+            copyRange();
+        }
+        else if (mod && key === 'a') {
+            event.preventDefault();
+            selectAll();
+        }
+        else if (mod && key === 'd' && onDuplicateRows !== undefined) {
+            event.preventDefault();
+            const keys = selection.size > 0 ? rows.filter((row) => selection.has(row.key)).map((row) => row.key) : focusedRowKey === null ? [] : [focusedRowKey];
+            if (keys.length > 0) {
+                onDuplicateRows(keys);
+            }
+        }
+        else if ((event.key === 'Enter' || event.key === 'F2') && focusCell !== null) {
+            event.preventDefault();
+            void beginEdit(focusCell);
+        }
+        else if (event.key === ' ' && event.shiftKey && focusCell !== null) {
+            event.preventDefault();
+            selectRowAt(focusCell.row, { shiftKey: false, mod });
+        }
+        else if ((event.key === 'Delete' || event.key === 'Backspace') && onDeleteSelected !== undefined && selection.size > 0) {
+            event.preventDefault();
+            onDeleteSelected();
+        }
+        else if (event.key === 'Escape' && (anchorCell !== null || columnSelection.columns.size > 0)) {
+            setRangeAnchor(null);
+            setColumnSelection(NO_COLUMN_SELECTION);
+        }
+        else {
+            const next = step(focusCell, { key: event.key, shiftKey: event.shiftKey, mod });
+            if (next !== null) {
+                event.preventDefault();
+                focusAt(next, event.shiftKey && event.key !== 'Tab');
+            }
+        }
+    };
+    const pressCell = (event, position, isEditing) => {
+        if (event.button !== 0 || isEditing) {
+            return;
+        }
+        const row = rows[position.row];
+        if (row !== undefined && isModHeld(event, isApplePlatform()) && followCell({ rowKey: row.key, column: position.column })) {
+            focusAt(position);
+            onFollow?.({ rowKey: row.key, column: position.column });
+            return;
+        }
+        const extend = event.shiftKey && focusCell !== null;
+        dragOrigin.current = extend ? (anchorCell ?? focusCell) : position;
+        dragging.current = true;
+        focusAt(position, extend);
+    };
+    const dragTo = (position) => {
+        if (dragging.current && dragOrigin.current !== null) {
+            setRangeAnchor(dragOrigin.current);
+            setFocused(position);
+        }
+    };
+    const openCellMenu = (position) => {
+        if (!rectContains(rect, position.row, displayOf.get(position.column))) {
+            focusAt(position);
+        }
+        setMenuTarget(position);
+    };
+    const openRowMenu = (index) => {
+        const row = rows[index];
+        if (row !== undefined && !selection.has(row.key)) {
+            selectRowAt(index, { shiftKey: false, mod: false });
+        }
+        setMenuTarget({ row: index, column: null });
+    };
+    const resizeColumn = (index, width) => {
+        setLayout((now) => ({ ...now, resized: { ...now.resized, [index]: width } }));
+    };
+    const fitColumn = (index) => {
+        const column = columns[index];
+        if (column !== undefined) {
+            resizeColumn(index, fitColumnWidth(column.name, rows.map((row) => textOf(cellView(row.cells[index] ?? null, column.kind, notation))), column.primaryKey === true));
+        }
+    };
+    const changeView = (change) => {
+        setLayout((now) => ({ ...now, view: change(now.view) }));
+    };
+    const headerActions = {
+        onSelect: (index, click) => {
+            if (!pressedInPopup()) {
+                pickColumn(index, click);
+            }
+        },
+        onSortDirection: (index, direction) => onSortsChange?.(sortOnly(columns[index].name, direction)),
+        onClearSort: () => onSortsChange?.([]),
+        onResize: resizeColumn,
+        onFit: fitColumn,
+        onHide: (index) => changeView((view) => hideColumn(view, index)),
+        onShowAll: () => changeView(showAllColumns),
+        onTogglePin: (index) => changeView((view) => togglePin(view, index))
+    };
+    const renderRow = (index) => {
+        const row = rows[index];
+        const selected = selection.has(row.key);
+        const tint = row.state === undefined ? (selected ? 'bg-accent-soft/40' : '') : ROW_STATE[row.state];
+        return (_jsxs("div", { role: "row", "aria-rowindex": index + 2, "aria-selected": selected, className: clsx('group/row absolute inset-x-0 flex border-b border-border-soft', tint, tint === '' && 'hover:bg-surface-hover'), style: { top: index * ROW_HEIGHT, height: ROW_HEIGHT }, children: [_jsx("div", { role: "rowheader", "data-selected": selected ? '' : undefined, className: clsx('sticky left-0 z-10 flex shrink-0 cursor-default items-center justify-end border-r border-border bg-surface pr-2 pl-1 font-mono text-xs text-text-faint tabular-nums select-none data-[selected]:bg-accent-soft data-[selected]:text-text', row.state === 'inserted' && 'text-positive'), style: { width: gutter }, onClick: (event) => {
+                        if (!pressedInPopup()) {
+                            selectRowAt(index, { shiftKey: event.shiftKey, mod: isModHeld(event, isApplePlatform()) });
+                        }
+                    }, onContextMenu: () => openRowMenu(index), children: row.number === null ? '+' : formatNumber(row.number) }), order.map((columnIndex, position) => {
+                    const column = columns[columnIndex];
+                    const cell = row.cells[columnIndex] ?? null;
+                    const view = cellView(cell, column.kind, notation);
+                    const cellPosition = { row: index, column: columnIndex };
+                    const isFocused = focusCell !== null && focusCell.row === index && focusCell.column === columnIndex;
+                    const ranged = pickedSet.has(columnIndex) || (columnBlock === null && rectContains(rect, index, position));
+                    const edited = row.edited?.has(columnIndex) === true;
+                    const isEditing = editing !== null && editing.row === index && editing.column === columnIndex;
+                    const pinned = position < pinnedShown;
+                    const enumType = enumTypes[columnIndex] ?? null;
+                    const followable = !isEditing && followCell({ rowKey: row.key, column: columnIndex });
+                    return (_jsxs("div", { id: cellId(index, columnIndex), role: "gridcell", "aria-colindex": position + 2, "aria-selected": ranged, "data-focused": isFocused ? '' : undefined, "data-ranged": ranged ? '' : undefined, className: clsx('group/cell flex h-full shrink-0 items-center overflow-hidden px-3 font-mono text-code whitespace-nowrap outline-0 select-none data-[focused]:outline-1 data-[focused]:-outline-offset-1 data-[focused]:outline-border-strong group-focus-within/grid:data-[focused]:outline-accent', position === order.length - 1 ? 'border-r-0' : 'border-r', view.align === 'end' ? 'justify-end tabular-nums' : 'justify-start', pinned
+                            ? [
+                                'sticky z-5',
+                                position === pinnedShown - 1 ? 'border-border-strong' : 'border-border-soft',
+                                ranged ? 'bg-accent-soft' : ['bg-surface', tint === '' && 'group-hover/row:bg-surface-hover']
+                            ]
+                            : ['relative border-border-soft', ranged ? 'bg-accent-soft' : edited && 'bg-accent/10']), style: { width: shownWidths[position], left: pinned ? gutter + (offsets[position] ?? 0) : undefined }, onPointerDown: (event) => pressCell(event, cellPosition, isEditing), onPointerEnter: () => dragTo(cellPosition), onDoubleClick: () => void beginEdit(cellPosition), onContextMenu: () => openCellMenu(cellPosition), children: [pinned && !ranged && _jsx("span", { "aria-hidden": true, className: clsx('pointer-events-none absolute inset-0', tint, edited && 'bg-accent/10') }), isEditing && editing.loading && _jsx(Spinner, { size: 12, label: t('grid.loadingValue') }), isEditing && !editing.loading && enumType !== null && (_jsx(EnumPicker, { autoOpen: true, type: enumType, value: typeof cell === 'string' ? cell : null, nullable: column.nullable !== false, label: column.name, onDone: finishPick })), isEditing && !editing.loading && enumType === null && (_jsx(CellEditor, { value: editing.draft, label: column.name, onValueChange: (draft) => setEditing({ ...editing, draft }), onCommit: (move) => finishEdit(true, move), onCancel: () => finishEdit(false) })), !isEditing && (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx('min-w-0 truncate', TONE[view.tone], row.state === 'deleted' && 'line-through'), children: view.text }), view.suffix !== undefined && _jsx("span", { className: "ml-2 shrink-0 text-text-faint", children: view.suffix })] })), followable && (_jsx(IconButton, { icon: ArrowUpRight, size: "2xs", label: t('grid.followReference'), tabIndex: -1, className: "absolute top-1/2 right-1 -translate-y-1/2 bg-surface-raised opacity-0 group-hover/cell:opacity-100 group-data-[focused]/cell:opacity-100 focus-visible:opacity-100", onPointerDown: (event) => event.stopPropagation(), onClick: () => {
+                                    if (!pressedInPopup()) {
+                                        onFollow?.({ rowKey: row.key, column: columnIndex });
+                                    }
+                                } }))] }, columnIndex));
+                })] }, row.key));
+    };
+    const menuRow = menuTarget === null ? undefined : rows[menuTarget.row];
+    const menuCell = menuTarget === null || menuTarget.column === null ? null : { row: menuTarget.row, column: menuTarget.column };
+    const settable = menuCell !== null && canEdit(menuCell);
+    const nullable = menuCell !== null && columns[menuCell.column]?.nullable !== false;
+    const menuColumn = menuCell === null ? undefined : columns[menuCell.column];
+    const hasDefault = menuColumn !== undefined && ((menuColumn.defaultValue ?? null) !== null || menuColumn.autoIncrement === true);
+    const menuContext = menuRow === undefined || menuTarget === null
+        ? null
+        : {
+            rowKeys: selection.has(menuRow.key) ? rows.filter((row) => selection.has(row.key)).map((row) => row.key) : [menuRow.key],
+            cell: menuTarget.column === null ? null : { rowKey: menuRow.key, column: menuTarget.column }
+        };
+    return (_jsx("div", { ref: attach, role: "grid", "aria-label": label, "aria-rowcount": rows.length + 1, "aria-colcount": order.length + 1, "aria-activedescendant": pickedColumns.length > 0 ? headerId(pickedColumns[0]) : focusCell === null ? undefined : cellId(focusCell.row, focusCell.column), tabIndex: 0, className: clsx('group/grid relative min-h-0 flex-1 overflow-auto bg-surface text-text outline-none', className), onKeyDown: handleKeyDown, onScroll: (event) => setScrollTop(Math.floor(event.currentTarget.scrollTop / ROW_HEIGHT) * ROW_HEIGHT), children: _jsxs("div", { className: "relative min-w-full", style: { width: totalWidth }, children: [_jsxs("div", { role: "row", "aria-rowindex": 1, className: "sticky top-0 z-20 flex w-full border-b border-border bg-surface", style: { height: HEADER_HEIGHT }, children: [_jsx("div", { className: "sticky left-0 z-10 shrink-0 border-r border-border bg-surface", style: { width: gutter } }), order.map((columnIndex, position) => {
+                            const column = columns[columnIndex];
+                            return (_jsx(GridHeaderCell, { column: column, index: columnIndex, position: position, width: shownWidths[position], sortable: sortable, selected: pickedSet.has(columnIndex), id: headerId(columnIndex), sort: sortable ? sortStateOf(sortList, column.name) : null, multipleSorts: sortList.length > 1, hasSorts: sortList.length > 0, pinned: position < pinnedShown, stickyLeft: gutter + (offsets[position] ?? 0), lastPinned: position === pinnedShown - 1, last: position === order.length - 1, hasHidden: current.view.hidden.size > 0, canHide: order.length > 1, actions: headerActions }, columnIndex));
+                        })] }), _jsxs(ContextMenu.Root, { children: [_jsx(ContextMenu.Trigger, { role: "rowgroup", className: "relative", style: { height: rows.length * ROW_HEIGHT }, children: Array.from({ length: range.end - range.start }, (_, offset) => renderRow(range.start + offset)) }), _jsxs(ContextMenu.Popup, { children: [_jsxs(ContextMenu.Item, { disabled: menuCell === null, onClick: copyCell, children: [_jsx(Icon, { icon: Copy, size: 14 }), t('grid.copyValue'), _jsx(Kbd, { shortcut: EDIT_SHORTCUTS.copy })] }), _jsx(CopyAsMenu, { disabled: block === null, formats: sqlTarget === undefined ? COPY_FORMATS.filter((format) => format !== 'sql') : COPY_FORMATS, onCopy: copyAs }), menuContext !== null && menuCell !== null && queryMenu !== undefined && (_jsxs(_Fragment, { children: [_jsx(ContextMenu.Separator, {}), queryMenu(menuContext)] })), _jsx(ContextMenu.Separator, {}), editable && menuCell !== null && (_jsxs(_Fragment, { children: [_jsxs(ContextMenu.Item, { disabled: !settable || !nullable, onClick: () => commitValue(null), children: [_jsx(Icon, { icon: Ban, size: 14 }), t('grid.setNull')] }), hasDefault && (_jsxs(ContextMenu.Item, { disabled: !settable, onClick: () => commitValue({ kind: 'default' }), children: [_jsx(Icon, { icon: RotateCcw, size: 14 }), t('grid.setDefault')] }))] })), menuContext !== null && menu?.(menuContext)] })] }), rows.length === 0 && empty !== undefined && _jsx("div", { className: "sticky left-0 w-fit px-4 py-6 text-xs text-text-muted", children: empty })] }) }));
+}

package/dist/grid/EnumPicker.d.ts

@@ -0,0 +1,17 @@
+import { type Ref } from 'react';
+import { type EnumType } from './enum-type.ts';
+export interface EnumPickerProps {
+    type: EnumType;
+    value: string | null;
+    nullable: boolean;
+    label: string;
+    autoOpen?: boolean;
+    disabled?: boolean;
+    onDone(result: {
+        readonly value: string | null;
+    } | undefined): void;
+    look?: 'cell' | 'field';
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function EnumPicker({ type, value, nullable, label, autoOpen, disabled, onDone, look, className, ref }: EnumPickerProps): import("react").JSX.Element;

package/dist/grid/EnumPicker.js

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } 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 } from './enum-type.js';
+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'
+};
+/*
+ * 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 }) {
+    const { t } = useTranslation('database');
+    const settled = useRef(false);
+    const [members, setMembers] = useState(() => new Set(type.kind === 'set' && value !== null ? membersOf(value) : []));
+    const set = type.kind === 'set';
+    const settle = (result) => {
+        if (!settled.current) {
+            settled.current = true;
+            onDone(result);
+        }
+    };
+    const handleOpenChange = (open) => {
+        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, checked) => {
+        setMembers((now) => {
+            const next = new Set(now);
+            if (checked) {
+                next.add(member);
+            }
+            else {
+                next.delete(member);
+            }
+            return next;
+        });
+    };
+    return (_jsxs(Menu.Root, { defaultOpen: autoOpen, onOpenChange: handleOpenChange, children: [_jsxs(Menu.Trigger, { ref: ref, disabled: disabled, "aria-label": label, className: clsx(LOOK[look], className), children: [_jsx("span", { className: clsx('min-w-0 flex-1 truncate text-left', value === null && 'text-text-faint'), children: value ?? 'NULL' }), _jsx(Icon, { icon: ChevronDown, size: 14, className: "shrink-0 text-text-faint" })] }), _jsxs(Menu.Popup, { className: "max-h-80 overflow-auto", children: [nullable && (_jsxs(_Fragment, { children: [_jsxs(Menu.Item, { onClick: () => settle({ value: null }), children: [_jsx(Icon, { icon: Ban, size: 14 }), t('grid.setNull')] }), _jsx(Menu.Separator, {})] })), set
+                        ? type.values.map((member) => (_jsx(Menu.CheckboxItem, { checked: members.has(member), closeOnClick: false, onCheckedChange: (checked) => toggle(member, checked), children: member === '' ? _jsx("span", { className: "text-text-faint", children: t('grid.emptyValue') }) : member }, member)))
+                        : type.values.map((option) => (_jsxs(Menu.Item, { onClick: () => settle({ value: option }), children: [_jsx(Menu.Check, { kind: "radio", checked: option === value }), option === '' ? _jsx("span", { className: "text-text-faint", children: t('grid.emptyValue') }) : option] }, option)))] })] }));
+}

package/dist/grid/GridHeaderCell.d.ts

@@ -0,0 +1,36 @@
+import type { SortDirection } from '../sql.ts';
+import type { ColumnClick } from './column-selection.ts';
+import type { GridColumn } from './types.ts';
+export interface HeaderActions {
+    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;
+    index: number;
+    position: number;
+    width: number;
+    sortable: boolean;
+    selected: boolean;
+    id: string;
+    sort: {
+        direction: SortDirection;
+        position: number;
+    } | null;
+    multipleSorts: boolean;
+    hasSorts: boolean;
+    pinned: boolean;
+    stickyLeft: number;
+    lastPinned: boolean;
+    last: boolean;
+    hasHidden: boolean;
+    canHide: boolean;
+    actions: HeaderActions;
+}
+export declare function GridHeaderCell({ column, index, position, width, sortable, selected, id, sort, multipleSorts, hasSorts, pinned, stickyLeft, lastPinned, last, hasHidden, canHide, actions }: GridHeaderCellProps): import("react").JSX.Element;