@adecore/database 0.17.0 → 0.18.0

package/dist/explorer/tree.js

@@ -5,7 +5,11 @@ export const connectionKey = (connectionId) => `c:${connectionId}`;
 export const schemaKey = (connectionId, schema) => `s:${connectionId}${SEPARATOR}${schema}`;
 export const folderKey = (connectionId, schema, group) => `f:${connectionId}${SEPARATOR}${schema}${SEPARATOR}${group}`;
 export const tableKey = (ref) => `t:${ref.connectionId}${SEPARATOR}${ref.schema}${SEPARATOR}${ref.table}`;
-export const isFolderKey = (key) => key.startsWith('f:');
+/* The folders of a table, in the order they come under it. */
+export const PARTS = ['columns', 'keys', 'foreignKeys', 'indexes', 'checks', 'triggers'];
+export const partKey = (ref, part) => `p:${ref.connectionId}${SEPARATOR}${ref.schema}${SEPARATOR}${ref.table}${SEPARATOR}${part}`;
+/* A folder of a schema, and the columns of a table, are open until the person closes them; everything else is closed until they open it. */
+export const startsOpen = (key) => key.startsWith('f:') || (key.startsWith('p:') && key.endsWith(`${SEPARATOR}columns`));
 /* The connection a key of a connection, schema, folder or table belongs to. */
 export const connectionOfKey = (key) => {
     const rest = key.slice(2);
@@ -13,6 +17,10 @@ export const connectionOfKey = (key) => {
     return end === -1 ? rest : rest.slice(0, end);
 };
 export const columnKey = (ref, column) => `${tableKey(ref)}${SEPARATOR}${column}`;
+/* A folder of the app's own under a connection, and an item in it. */
+export const appFolderKey = (connectionId, folder) => `x:${connectionId}${SEPARATOR}${folder}`;
+const appItemKey = (connectionId, folder, item) => `${appFolderKey(connectionId, folder)}${SEPARATOR}${item}`;
+const entryKey = (ref, part, index) => `${partKey(ref, part)}${SEPARATOR}${index}`;
 export const loadKey = (target) => {
     if (target.schema === undefined) {
         return connectionKey(target.connectionId);
@@ -23,9 +31,15 @@ export const loadKey = (target) => {
 };
 /* The kinds of table a schema lists, in the order of its folders. */
 export const GROUPS = ['table', 'view'];
-export const isExpandable = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'folder' || row.kind === 'table';
+export const isExpandable = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'folder' || row.kind === 'table' || row.kind === 'part' || row.kind === 'appFolder';
 /* The table a row stands for, when it stands for one. */
-export const tableOf = (row) => (row.kind === 'table' || row.kind === 'column' ? row.ref : null);
+export const tableOf = (row) => (row.kind === 'table' || row.kind === 'column' || row.kind === 'entry' ? row.ref : null);
+/* The table activating a row opens: its own, or for a foreign key the table it references. */
+export const openedTableOf = (row) => row.kind === 'entry' && row.entry.type === 'foreignKey'
+    ? { connectionId: row.ref.connectionId, schema: row.entry.foreignKey.referencedSchema, table: row.entry.foreignKey.referencedTable }
+    : tableOf(row);
+/* Whether a list of tables holds `name` as a table or a view; `undefined` while the list has not loaded or lacks it. */
+export const tableKindIn = (tables, name) => tables.status === 'ready' ? tables.value.find((table) => table.name === name)?.kind : undefined;
 /* What picking a row selects: its connection, its schema, or its table (a column stands for its table). Status rows select nothing. */
 export const selectionOf = (row) => {
     switch (row.kind) {
@@ -35,7 +49,9 @@ export const selectionOf = (row) => {
         case 'folder':
             return { connectionId: row.connection.id, schema: row.schema };
         case 'table':
+        case 'part':
         case 'column':
+        case 'entry':
             return { connectionId: row.ref.connectionId, schema: row.ref.schema, table: row.ref.table };
         default:
             return null;
@@ -50,8 +66,13 @@ export const selectionKey = (selection) => {
         ? schemaKey(selection.connectionId, selection.schema)
         : tableKey({ connectionId: selection.connectionId, schema: selection.schema, table: selection.table });
 };
-/* Whether a row has a menu: the rows of a connection, a schema, a table or a column, and none of the rows that only report. */
-export const hasMenu = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'folder' || row.kind === 'table' || row.kind === 'column';
+/* Whether a row has a menu: the rows of a connection, a schema, a table or a column, an item the app gave one, and none of the rows that only report. */
+export const hasMenu = (row) => row.kind === 'connection' ||
+    row.kind === 'schema' ||
+    row.kind === 'folder' ||
+    row.kind === 'table' ||
+    row.kind === 'column' ||
+    (row.kind === 'appItem' && row.item.menu !== undefined);
 /* Only the rows a selection can point at are drawn selected; a folder or a column leaves that to the row above it. */
 export const isSelectable = (row) => row.kind === 'connection' || row.kind === 'schema' || row.kind === 'table';
 /* The statement behind New console here on a table: every row, as the engine quotes it. */
@@ -67,6 +88,21 @@ const statusDraft = (row, level, parent, focusable) => ({
     below: []
 });
 const matches = (name, query) => name.toLowerCase().includes(query);
+/* What each folder of a table besides its columns holds: the primary key and the unique keys, the foreign keys, the other indexes, the checks and the triggers. */
+export const tableEntries = (structure) => {
+    const primaryIndex = structure.indexes.find((index) => index.primary);
+    const primary = structure.primaryKey.length === 0 ? [] : [{ type: 'key', name: primaryIndex?.name ?? null, columns: structure.primaryKey, primary: true }];
+    const unique = structure.indexes
+        .filter((index) => index.unique && !index.primary)
+        .map((index) => ({ type: 'key', name: index.name, columns: index.columns, primary: false }));
+    return {
+        keys: [...primary, ...unique],
+        foreignKeys: structure.foreignKeys.map((foreignKey) => ({ type: 'foreignKey', foreignKey })),
+        indexes: structure.indexes.filter((index) => !index.primary).map((index) => ({ type: 'index', index })),
+        checks: (structure.checks ?? []).map((check) => ({ type: 'check', check })),
+        triggers: (structure.triggers ?? []).map((trigger) => ({ type: 'trigger', trigger }))
+    };
+};
 /*
  * The rows a tree shows, top to bottom. With a filter only the loaded tables that match stay, under
  * their folder, schema and connection, which then count as open whatever the person left them at.
@@ -74,21 +110,10 @@ const matches = (name, query) => name.toLowerCase().includes(query);
 export const flattenTree = (input) => {
     const query = input.filter.trim().toLowerCase();
     const filtering = query !== '';
-    const columnDrafts = (ref, level, parent) => {
-        const load = input.structures(ref.connectionId, ref.schema, ref.table);
-        if (load.status !== 'ready') {
-            const row = load.status === 'error'
-                ? { kind: 'error', message: load.message, retry: { connectionId: ref.connectionId, schema: ref.schema, table: ref.table } }
-                : { kind: 'loading' };
-            return [statusDraft(row, level, parent, load.status === 'error')];
-        }
-        const { columns, primaryKey, foreignKeys } = load.value;
-        if (columns.length === 0) {
-            return [statusDraft({ kind: 'empty', of: 'columns' }, level, parent, true)];
-        }
-        const primary = new Set(primaryKey);
-        const foreign = new Set(foreignKeys.flatMap((foreignKey) => foreignKey.columns));
-        return columns.map((column) => ({
+    const columnRows = (ref, structure, level, parent) => {
+        const primary = new Set(structure.primaryKey);
+        const foreign = new Set(structure.foreignKeys.flatMap((foreignKey) => foreignKey.columns));
+        return structure.columns.map((column) => ({
             make: (place) => ({
                 kind: 'column',
                 key: columnKey(ref, column.name),
@@ -104,12 +129,59 @@ export const flattenTree = (input) => {
             below: []
         }));
     };
+    /* The folders a table opens into, each only when it holds something. A view has only its columns, straight under it. */
+    const tableChildren = (ref, kind, level, parent) => {
+        const load = input.structures(ref.connectionId, ref.schema, ref.table);
+        if (load.status !== 'ready') {
+            const row = load.status === 'error'
+                ? { kind: 'error', message: load.message, retry: { connectionId: ref.connectionId, schema: ref.schema, table: ref.table } }
+                : { kind: 'loading' };
+            return [statusDraft(row, level, parent, load.status === 'error')];
+        }
+        const structure = load.value;
+        if (structure.columns.length === 0) {
+            return [statusDraft({ kind: 'empty', of: 'columns' }, level, parent, true)];
+        }
+        if (kind === 'view') {
+            return columnRows(ref, structure, level, parent);
+        }
+        const entries = tableEntries(structure);
+        return PARTS.flatMap((part) => {
+            const count = part === 'columns' ? structure.columns.length : entries[part].length;
+            if (count === 0) {
+                return [];
+            }
+            const key = partKey(ref, part);
+            const open = startsOpen(key) ? !input.collapsed.has(key) : input.expanded.has(key);
+            const below = () => part === 'columns'
+                ? columnRows(ref, structure, level + 1, key)
+                : entries[part].map((entry, index) => ({
+                    make: (place) => ({
+                        kind: 'entry',
+                        key: entryKey(ref, part, index),
+                        level: level + 1,
+                        parent: key,
+                        focusable: true,
+                        ref,
+                        entry,
+                        ...place
+                    }),
+                    below: []
+                }));
+            return [
+                {
+                    make: (place) => ({ kind: 'part', key, level, parent, focusable: true, ref, part, expanded: open, count, ...place }),
+                    below: open ? settle(below()) : []
+                }
+            ];
+        });
+    };
     const tableDraft = (ref, table, level, parent) => {
         const key = tableKey(ref);
         const open = input.expanded.has(key);
         return {
             make: (place) => ({ kind: 'table', key, level, parent, focusable: true, ref, table, expanded: open, ...place }),
-            below: open ? settle(columnDrafts(ref, level + 1, key)) : []
+            below: open ? settle(tableChildren(ref, table.kind, level + 1, key)) : []
         };
     };
     /* The folders under a schema (or under a connection with only that schema), and how many tables they hold. */
@@ -167,10 +239,50 @@ export const flattenTree = (input) => {
             below: open ? settle(drafts) : []
         };
     };
+    /* The app's folders under a connection, each while it holds items; with a filter only the items that match, in folders that count as open. */
+    const appFolderDrafts = (connection, level, parent) => (input.folders?.(connection.id) ?? []).flatMap((folder) => {
+        const items = filtering ? folder.items.filter((item) => matches(item.label, query)) : folder.items;
+        if (items.length === 0) {
+            return [];
+        }
+        const key = appFolderKey(connection.id, folder.id);
+        const open = filtering || input.expanded.has(key);
+        const rows = items.map((item) => ({
+            make: (place) => ({
+                kind: 'appItem',
+                key: appItemKey(connection.id, folder.id, item.id),
+                level: level + 1,
+                parent: key,
+                focusable: true,
+                connection,
+                item,
+                ...place
+            }),
+            below: []
+        }));
+        return [
+            {
+                make: (place) => ({
+                    kind: 'appFolder',
+                    key,
+                    level,
+                    parent,
+                    focusable: true,
+                    connection,
+                    folder,
+                    expanded: open,
+                    count: items.length,
+                    ...place
+                }),
+                below: open ? settle(rows) : []
+            }
+        ];
+    });
     const connectionDraft = (connection) => {
         const key = connectionKey(connection.id);
         const load = input.schemas(connection.id);
-        const open = filtering ? load.status === 'ready' : input.expanded.has(key);
+        const appFolders = appFolderDrafts(connection, 2, key);
+        const open = filtering ? load.status === 'ready' || appFolders.length > 0 : input.expanded.has(key);
         let children = [];
         let schemaCount = null;
         if (load.status === 'ready') {
@@ -189,10 +301,12 @@ export const flattenTree = (input) => {
                 children = visible.flatMap((entry) => schemaDraft(connection, entry.name, key) ?? []);
             }
         }
-        else if (open) {
+        else if (open && !filtering) {
             const row = load.status === 'error' ? { kind: 'error', message: load.message, retry: { connectionId: connection.id } } : { kind: 'loading' };
             children = [statusDraft(row, 2, key, load.status === 'error')];
         }
+        // Behind a status row too: what the app keeps of a connection does not wait on its server.
+        children = [...children, ...(open ? appFolders : [])];
         if (filtering && children.length === 0) {
             return null;
         }

package/dist/grid/CellEditor.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
+import clsx from 'clsx';
 import { Input } from '@adecore/ui';
+import { CODE_TEXT } from '../code-text.js';
 /* The input a cell turns into while it is edited. It takes the focus and selects its text when it appears. */
 export function CellEditor({ value, label, onValueChange, onCommit, onCancel }) {
     const input = useRef(null);
@@ -25,5 +27,5 @@ export function CellEditor({ value, label, onValueChange, onCommit, onCancel })
             onCommit(event.shiftKey ? 'previous' : 'next');
         }
     };
-    return (_jsx(Input, { ref: input, mono: true, size: "sm", "aria-label": label, value: value, className: "absolute inset-0 z-10 h-full min-w-0 rounded-none px-3", onChange: (event) => onValueChange(event.target.value), onKeyDown: handleKeyDown, onBlur: () => onCommit() }));
+    return (_jsx(Input, { ref: input, size: "sm", "aria-label": label, value: value, className: clsx(CODE_TEXT, 'absolute inset-0 z-10 h-full min-w-0 rounded-none px-3'), onChange: (event) => onValueChange(event.target.value), onKeyDown: handleKeyDown, onBlur: () => onCommit() }));
 }

package/dist/grid/DataGrid.d.ts

@@ -4,7 +4,7 @@ import type { SqlTarget } from '../sql.ts';
 import type { RangeBlock } from './aggregates.ts';
 import { type GridLayout } from './column-layout.ts';
 import { type GridSort } from './sort.ts';
-import type { ColumnRequest, FocusedCell, GridColumn, GridMenuContext, GridRow } from './types.ts';
+import type { ColumnRequest, FocusedCell, FocusRequest, GridColumn, GridMenuContext, GridRow } from './types.ts';
 export interface DataGridProps {
     columns: readonly GridColumn[];
     rows: readonly GridRow[];
@@ -27,7 +27,7 @@ export interface DataGridProps {
     onRangeChange?(block: RangeBlock | null): void;
     initialLayout?: GridLayout;
     onLayoutChange?(layout: GridLayout): void;
-    focusRequest?: FocusedCell | null;
+    focusRequest?: FocusRequest | null;
     columnRequest?: ColumnRequest | null;
     empty?: ReactNode;
     className?: string;

package/dist/grid/DataGrid.js

@@ -1,12 +1,10 @@
 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 { 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 { ContextMenu, copyText, EDIT_SHORTCUTS, Icon, isApplePlatform, isModHeld, Kbd, useContentSize } from '@adecore/ui';
 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';
@@ -15,28 +13,21 @@ 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 { cellIdOf } from './cell-id.js';
+import { GridRowView, PINNED_GROUP } from './GridRowView.js';
+import { clampColumnWidth, columnOffsets, estimateColumnWidth, fitColumnWidth, FALLBACK_VIEWPORT_HEIGHT, growWidths, gutterWidth, drawnRange, HEADER_HEIGHT, ROW_HEIGHT, scrollBlock, scrollToReveal } 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';
+import { useStableCallback } from '../use-stable-callback.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
@@ -58,7 +49,7 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
     const reportRange = useRef(onRangeChange);
     const reportLayout = useRef(onLayoutChange);
     const [measure, size] = useContentSize();
-    const [scrollTop, setScrollTop] = useState(0);
+    const [scrolledBlock, setScrolledBlock] = useState(0);
     const [focused, setFocused] = useState(null);
     const [rangeAnchor, setRangeAnchor] = useState(null);
     const [columnSelection, setColumnSelection] = useState(NO_COLUMN_SELECTION);
@@ -87,17 +78,18 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
         };
         setLayout(current);
     }
-    const order = displayOrder(columns.length, current.view);
+    // Kept by identity while nothing about the columns changes, since every drawn row compares them.
+    const order = useMemo(() => displayOrder(columns.length, current.view), [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 displayOf = useMemo(() => new Map(order.map((index, position) => [index, position])), [order]);
+    const widths = useMemo(() => columns.map((_, index) => current.resized[index] ?? current.estimated[index] ?? clampColumnWidth(0)), [columns, current.resized, current.estimated]);
+    const shownWidths = useMemo(() => order.map((index) => widths[index]), [order, widths]);
     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 range = drawnRange(scrolledBlock, viewportHeight, rows.length);
     const selection = selectedKeys ?? ownSelection;
     const isShown = (position) => position !== null && position.row < rows.length && displayOf.has(position.column);
     const focusCell = isShown(focused) ? focused : null;
@@ -110,8 +102,8 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
     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 pickedColumns = useMemo(() => shownSelection(columnSelection, order), [columnSelection, order]);
+    const pickedSet = useMemo(() => new Set(pickedColumns), [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;
@@ -147,7 +139,9 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
         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();
+            if (focusRequest.quiet !== true) {
+                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
@@ -182,7 +176,7 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
             ref.current = node;
         }
     }, [measure, ref]);
-    const cellId = (row, column) => `${gridId}-${row}-${column}`;
+    const cellId = (row, column) => cellIdOf(gridId, row, column);
     const canEdit = (position) => {
         const row = rows[position.row];
         const column = columns[position.column];
@@ -460,39 +454,50 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
         onShowAll: () => changeView(showAllColumns),
         onTogglePin: (index) => changeView((view) => togglePin(view, index))
     };
+    const look = useMemo(() => ({
+        gridId,
+        columns,
+        order,
+        widths: shownWidths,
+        pinnedShown,
+        gutter,
+        notation,
+        enumTypes,
+        picked: pickedSet,
+        loadingLabel: t('grid.loadingValue')
+    }), [gridId, columns, order, shownWidths, pinnedShown, gutter, notation, enumTypes, pickedSet, t]);
+    const stablePressCell = useStableCallback(pressCell);
+    const stableDragTo = useStableCallback(dragTo);
+    const stableBeginEdit = useStableCallback((position) => void beginEdit(position));
+    const stableOpenCellMenu = useStableCallback(openCellMenu);
+    const stablePressRowNumber = useStableCallback((index, event) => {
+        if (!pressedInPopup()) {
+            selectRowAt(index, { shiftKey: event.shiftKey, mod: isModHeld(event, isApplePlatform()) });
+        }
+    });
+    const stableOpenRowMenu = useStableCallback(openRowMenu);
+    const stableFinishPick = useStableCallback(finishPick);
+    const stableFinishEdit = useStableCallback(finishEdit);
+    const rowActions = useMemo(() => ({
+        pressCell: stablePressCell,
+        dragTo: stableDragTo,
+        beginEdit: stableBeginEdit,
+        openCellMenu: stableOpenCellMenu,
+        pressRowNumber: stablePressRowNumber,
+        openRowMenu: stableOpenRowMenu,
+        finishPick: stableFinishPick,
+        finishEdit: stableFinishEdit,
+        changeDraft: (draft) => setEditing((now) => (now === null ? now : { ...now, draft }))
+    }), [stablePressCell, stableDragTo, stableBeginEdit, stableOpenCellMenu, stablePressRowNumber, stableOpenRowMenu, stableFinishPick, stableFinishEdit]);
     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 inRect = columnBlock === null && rect !== null && index >= rect.top && index <= rect.bottom;
+        return (_jsx(GridRowView, { row: row, index: index, selected: selection.has(row.key), focusedColumn: focusCell !== null && focusCell.row === index ? focusCell.column : -1, rangeStart: inRect ? rect.left : -1, rangeEnd: inRect ? rect.right : -1, editing: editing !== null && editing.row === index ? editing : null, look: look, actions: rowActions }, row.key));
     };
+    const headerCells = 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, lastPinned: position === pinnedShown - 1, last: position === order.length - 1, hasHidden: current.view.hidden.size > 0, canHide: order.length > 1, actions: headerActions }, columnIndex));
+    });
     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);
@@ -505,8 +510,5 @@ export function DataGrid({ columns, rows, label, editable = false, selectedKeys,
             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 })] }) }));
+    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) => setScrolledBlock(scrollBlock(event.currentTarget.scrollTop - HEADER_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: [_jsxs("div", { className: PINNED_GROUP, children: [_jsx("div", { className: "shrink-0 border-r border-border bg-surface bg-clip-border", style: { width: gutter } }), headerCells.slice(0, pinnedShown)] }), headerCells.slice(pinnedShown)] }), _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.js

@@ -4,9 +4,10 @@ import clsx from 'clsx';
 import { Ban, ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Icon, Menu } from '@adecore/ui';
+import { CODE_TEXT } from '../code-text.js';
 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',
+    cell: `absolute inset-0 z-10 flex items-center gap-2 border border-accent bg-surface-raised px-3 ${CODE_TEXT} outline-0`,
     field: 'field field-sm flex w-full items-center gap-2 font-mono text-code data-disabled:opacity-50'
 };
 /*

package/dist/grid/GridHeaderCell.d.ts

@@ -26,11 +26,10 @@ export interface GridHeaderCellProps {
     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;
+export declare function GridHeaderCell({ column, index, position, width, sortable, selected, id, sort, multipleSorts, hasSorts, pinned, lastPinned, last, hasHidden, canHide, actions }: GridHeaderCellProps): import("react").JSX.Element;

package/dist/grid/GridHeaderCell.js

@@ -1,10 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import clsx from 'clsx';
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, Copy, Eye, EyeOff, Key, Pin, PinOff } from 'lucide-react';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, Copy, Eye, EyeOff, 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 { CODE_TEXT } from '../code-text.js';
+import { keyLabelOf } from '../column-keys.js';
+import { KeyIcon } from '../KeyIcon.js';
 import { isNumericKind } from './display.js';
 import { isDoubleClick, MAX_RESIZED_WIDTH, MIN_COLUMN_WIDTH } from './layout.js';
 /* The items of the menu a header opens, from its button and from a right click. */
@@ -15,7 +18,9 @@ function HeaderMenuItems({ column, index, sortable, hasSorts, pinned, hasHidden,
 /* The facts about a table column that a tooltip can carry: its type, whether it takes NULL, its default. */
 function ColumnFacts({ column }) {
     const { t } = useTranslation('database');
+    const keys = { primaryKey: column.primaryKey === true, foreignKey: column.foreignKey === true };
     const facts = [
+        keys.primaryKey || keys.foreignKey ? t(keyLabelOf(keys)) : null,
         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 }),
@@ -23,8 +28,8 @@ function ColumnFacts({ column }) {
     ].filter((fact) => fact !== null);
     return (_jsxs(_Fragment, { children: [_jsx("span", { className: "block", children: column.name }), facts.length > 0 && _jsx("span", { className: "block", children: facts.join(', ') })] }));
 }
-/* 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 }) {
+/* One column's head: its name, the sort it carries, the key of a 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, lastPinned, last, hasHidden, canHide, actions }) {
     const { t } = useTranslation('database');
     const cell = useRef(null);
     const lastPress = useRef(null);
@@ -61,9 +66,11 @@ export function GridHeaderCell({ column, index, position, width, sortable, selec
     };
     const menuProps = { column, index, sortable, hasSorts, pinned, hasHidden, canHide, actions };
     const numeric = isNumericKind(column.kind);
-    return (_jsxs(ContextMenu.Root, { children: [_jsxs("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: () => {
+    return (_jsxs(ContextMenu.Root, { children: [_jsxs("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(
+                // The name in the face and size of the cells under it, which is how the column is written in SQL too.
+                'group/header flex h-full shrink-0 cursor-default font-medium select-none', CODE_TEXT, 'relative', pinned && 'bg-clip-border', 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 }, onPointerDownCapture: () => {
                     resized.current = false;
-                }, onClick: handleClick, children: [_jsxs(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'), children: [column.primaryKey === true && _jsx(Icon, { icon: Key, size: 12, className: "shrink-0 text-(--file-icon-yellow)" }), _jsx(Tooltip, { label: _jsx(ColumnFacts, { column: column }), side: "bottom", children: _jsx("span", { className: "min-w-0 truncate", children: column.name }) }), sort !== null && (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-0.5', selected ? 'text-accent-text' : 'text-text-muted'), children: [_jsx(Icon, { icon: sort.direction === 'asc' ? ArrowUp : ArrowDown, size: 12 }), multipleSorts && _jsx("span", { className: "tabular-nums", children: formatNumber(sort.position) })] }))] }), _jsxs(Menu.Root, { children: [_jsx(IconButton, { render: _jsx(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
+                }, onClick: handleClick, children: [_jsxs(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'), children: [_jsx(KeyIcon, { primaryKey: column.primaryKey === true, foreignKey: column.foreignKey === true, size: 12 }), _jsx(Tooltip, { label: _jsx(ColumnFacts, { column: column }), side: "bottom", children: _jsx("span", { className: "min-w-0 truncate", children: column.name }) }), sort !== null && (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-0.5', selected ? 'text-accent-text' : 'text-text-muted'), children: [_jsx(Icon, { icon: sort.direction === 'asc' ? ArrowUp : ArrowDown, size: 12 }), multipleSorts && _jsx("span", { className: "tabular-nums", children: formatNumber(sort.position) })] }))] }), _jsxs(Menu.Root, { children: [_jsx(IconButton, { render: _jsx(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') }), _jsx(Menu.Popup, { children: _jsx(HeaderMenuItems, { ...menuProps }) })] }), _jsx(ColumnResizeHandle, { from: "left", onPointerDown: pressHandle, className: "hover:bg-border-strong" })] }), _jsx(ContextMenu.Popup, { children: _jsx(HeaderMenuItems, { ...menuProps }) })] }));
 }

package/dist/grid/GridRowView.d.ts

@@ -0,0 +1,49 @@
+import { type MouseEvent, type PointerEvent } from 'react';
+import { type EditMove } from './CellEditor.tsx';
+import { type NumberNotation } from './display.ts';
+import type { EnumType } from './enum-type.ts';
+import type { CellPosition } from './navigation.ts';
+import type { GridColumn, GridRow } from './types.ts';
+export declare const PINNED_GROUP = "sticky left-0 z-10 flex shrink-0";
+export interface CellEdit extends CellPosition {
+    draft: string;
+    initial: string;
+    loading: boolean;
+}
+export interface RowLook {
+    readonly gridId: string;
+    readonly columns: readonly GridColumn[];
+    readonly order: readonly number[];
+    readonly widths: readonly number[];
+    readonly pinnedShown: number;
+    readonly gutter: number;
+    readonly notation: NumberNotation;
+    readonly enumTypes: readonly (EnumType | null)[];
+    readonly picked: ReadonlySet<number>;
+    readonly loadingLabel: string;
+}
+export interface RowActions {
+    pressCell(event: PointerEvent, position: CellPosition, isEditing: boolean): void;
+    dragTo(position: CellPosition): void;
+    beginEdit(position: CellPosition): void;
+    openCellMenu(position: CellPosition): void;
+    pressRowNumber(index: number, event: MouseEvent): void;
+    openRowMenu(index: number): void;
+    finishPick(result: {
+        readonly value: string | null;
+    } | undefined): void;
+    finishEdit(commit: boolean, move?: EditMove): void;
+    changeDraft(draft: string): void;
+}
+export interface GridRowViewProps {
+    row: GridRow;
+    index: number;
+    selected: boolean;
+    focusedColumn: number;
+    rangeStart: number;
+    rangeEnd: number;
+    editing: CellEdit | null;
+    look: RowLook;
+    actions: RowActions;
+}
+export declare const GridRowView: import("react").MemoExoticComponent<({ row, index, selected, focusedColumn, rangeStart, rangeEnd, editing, look, actions }: GridRowViewProps) => import("react").JSX.Element>;