@calliopelabs/ui 0.14.0 → 0.18.0

package/dist/workbench/CommandPalette.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+export interface PaletteItem {
+    /** Stable: the recent list and the option's key. */
+    id: string;
+    label: string;
+    /** The heading it sits under ("Editor", "Tables", "Open tabs"). */
+    group?: string;
+    /** A decorative icon (`aria-hidden`). */
+    icon?: React.ReactNode;
+    /** Extra words the search matches. */
+    keywords?: string;
+    /** A second, quieter line: a path, a server. */
+    description?: string;
+    /** Its chord, drawn as key caps: `"Mod+N"`. */
+    shortcut?: string;
+    disabled?: boolean;
+    /** Leave the palette open after it runs (an entry that switches the palette's own mode). */
+    keepOpen?: boolean;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: readonly PaletteItem[];
+    /** Run an entry. The palette has already closed unless the entry keeps it open. */
+    onSelect: (item: PaletteItem) => void;
+    /** The search text. Controlled when given, so a host can switch lists on a prefix ("@", ">"). */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    /** Rank and filter `items` by the query. False when the host already did. Defaults to true. */
+    filter?: boolean;
+    /** Ids run lately, shown first under "Recent" while the query is empty. */
+    recent?: readonly string[];
+    /** The host is still building `items` (an object index): shown under the list. */
+    loading?: boolean;
+    placeholder?: string;
+    /** Copy for no match. */
+    empty?: string;
+    /** A key on the highlighted entry that the palette does not handle (Delete to close a tab). */
+    onItemKeyDown?: (item: PaletteItem, event: React.KeyboardEvent<HTMLInputElement>) => void;
+    mac?: boolean;
+    className?: string;
+}
+/**
+ * The command palette: a modal search over commands, objects and open tabs,
+ * with the ARIA combobox pattern (the input owns a listbox; Up and Down move
+ * the highlight, Enter runs it, Escape closes). The host supplies the items
+ * and runs them; focus returns where it was when the palette closes.
+ */
+export declare function CommandPalette({ open, onOpenChange, items, onSelect, query: queryProp, onQueryChange, filter, recent, loading, placeholder, empty, onItemKeyDown, mac, className, }: CommandPaletteProps): React.JSX.Element;

package/dist/workbench/CommandPalette.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogContent, DialogTitle } from "../overlays/Dialog.js";
+import { useUI } from "../provider/UIProvider.js";
+import { rankItems } from "./palette.js";
+import { ShortcutKeys } from "./Shortcuts.js";
+function sections(items, query, filter, recent, recentLabel) {
+    const list = filter ? rankItems(items, query) : [...items];
+    const out = [];
+    let rest = list;
+    if (query.trim() === "" && recent && recent.length > 0) {
+        const byId = new Map(list.map((i) => [i.id, i]));
+        const firsts = recent.flatMap((id) => byId.get(id) ?? []);
+        if (firsts.length > 0) {
+            out.push({ heading: recentLabel, items: firsts });
+            const taken = new Set(firsts.map((i) => i.id));
+            rest = list.filter((i) => !taken.has(i.id));
+        }
+    }
+    const groups = new Map();
+    for (const item of rest)
+        groups.set(item.group, [...(groups.get(item.group) ?? []), item]);
+    for (const [heading, groupItems] of groups)
+        out.push({ heading, items: groupItems });
+    return out;
+}
+/**
+ * The command palette: a modal search over commands, objects and open tabs,
+ * with the ARIA combobox pattern (the input owns a listbox; Up and Down move
+ * the highlight, Enter runs it, Escape closes). The host supplies the items
+ * and runs them; focus returns where it was when the palette closes.
+ */
+export function CommandPalette({ open, onOpenChange, items, onSelect, query: queryProp, onQueryChange, filter = true, recent, loading = false, placeholder, empty, onItemKeyDown, mac, className, }) {
+    const { messages } = useUI();
+    const m = messages.workbench;
+    const [ownQuery, setOwnQuery] = React.useState("");
+    const query = queryProp ?? ownQuery;
+    const setQuery = (next) => {
+        if (queryProp === undefined)
+            setOwnQuery(next);
+        onQueryChange?.(next);
+    };
+    // The highlight belongs to one query: typing puts it back on the first match.
+    const [highlight, setHighlight] = React.useState({ query: "", index: 0 });
+    const active = highlight.query === query ? highlight.index : 0;
+    const setActive = (index) => setHighlight({ query, index });
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const restoreRef = React.useRef(null);
+    const baseId = React.useId();
+    const shown = sections(items, query, filter, recent, m.recent);
+    const flat = shown.flatMap((s) => s.items);
+    const current = flat[Math.min(active, flat.length - 1)];
+    const optionId = (index) => `${baseId}-option-${index}`;
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const el = listRef.current?.querySelector('[aria-selected="true"]');
+        el?.scrollIntoView?.({ block: "nearest" });
+    }, [active, open]);
+    const close = () => {
+        onOpenChange(false);
+        if (queryProp === undefined)
+            setOwnQuery("");
+    };
+    const run = (item) => {
+        if (!item || item.disabled)
+            return;
+        if (!item.keepOpen)
+            close();
+        onSelect(item);
+    };
+    const move = (delta) => {
+        if (flat.length === 0)
+            return;
+        setActive((Math.min(active, flat.length - 1) + delta + flat.length) % flat.length);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            move(1);
+        }
+        else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            move(-1);
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            run(current);
+        }
+        else if (current) {
+            onItemKeyDown?.(current, event);
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => (next ? onOpenChange(true) : close()), children: _jsxs(DialogContent, { hideCloseButton: true, "aria-describedby": undefined, className: cn("top-24 max-w-xl translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl", className), onOpenAutoFocus: (event) => {
+                restoreRef.current = document.activeElement;
+                event.preventDefault();
+                inputRef.current?.focus();
+            }, onCloseAutoFocus: (event) => {
+                event.preventDefault();
+                if (restoreRef.current instanceof HTMLElement)
+                    restoreRef.current.focus();
+            }, children: [_jsx(DialogTitle, { className: "sr-only", children: m.commandPalette }), _jsxs("div", { className: "flex items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }), _jsx("input", { ref: inputRef, role: "combobox", "aria-expanded": flat.length > 0, "aria-controls": `${baseId}-list`, "aria-autocomplete": "list", "aria-activedescendant": current ? optionId(flat.indexOf(current)) : undefined, "aria-label": placeholder ?? m.searchCommands, placeholder: placeholder ?? m.searchCommands, className: "h-11 w-full bg-transparent text-sm outline-hidden placeholder:text-muted-foreground", value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown })] }), _jsx("div", { ref: listRef, id: `${baseId}-list`, role: "listbox", hidden: flat.length === 0, "aria-label": m.commandPalette, "aria-busy": loading || undefined, className: "max-h-[min(24rem,60vh)] overflow-y-auto p-1", children: shown.map((section, s) => {
+                        const headingId = `${baseId}-group-${s}`;
+                        return (_jsxs("div", { role: "group", "aria-labelledby": section.heading ? headingId : undefined, children: [section.heading && (_jsx("div", { id: headingId, role: "presentation", className: "px-2 pt-2 pb-1 text-2xs font-semibold tracking-wider text-muted-foreground uppercase", children: section.heading })), section.items.map((item) => {
+                                    const i = flat.indexOf(item);
+                                    const selected = item === current;
+                                    return (_jsxs("div", { id: optionId(i), role: "option", tabIndex: -1, "aria-selected": selected, "aria-disabled": item.disabled || undefined, className: cn("flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm", selected && "bg-accent text-accent-foreground", item.disabled && "cursor-default opacity-50"), onPointerMove: () => i !== active && setActive(i), onClick: () => run(item), children: [item.icon && (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 text-muted-foreground [&_svg]:size-4", children: item.icon })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.label }), item.description && (_jsxs(_Fragment, { children: [" ", _jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.description })] }))] }), item.shortcut && _jsx(ShortcutKeys, { keys: item.shortcut, mac: mac })] }, `${section.heading ?? ""}:${item.id}`));
+                                })] }, section.heading ?? `section-${s}`));
+                    }) }), (loading || flat.length === 0) && (_jsx("div", { role: "status", className: "px-3 py-4 text-center text-sm text-muted-foreground", children: loading ? m.commandsLoading : (empty ?? m.noCommands) }))] }) }));
+}

package/dist/workbench/DataChart.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { type GridColumn, type GridRow } from "./grid-model.js";
+/**
+ * The parts of Recharts the chart draws with. The host hands over the
+ * module (`loadCharts={() => import("recharts")}`), so the package never
+ * names Recharts in an import: an app without it builds, and one with it
+ * loads it only when a chart opens.
+ */
+export interface ChartLibrary {
+    ResponsiveContainer: React.ElementType;
+    BarChart: React.ElementType;
+    Bar: React.ElementType;
+    LineChart: React.ElementType;
+    Line: React.ElementType;
+    AreaChart: React.ElementType;
+    Area: React.ElementType;
+    ScatterChart: React.ElementType;
+    Scatter: React.ElementType;
+    PieChart: React.ElementType;
+    Pie: React.ElementType;
+    Cell: React.ElementType;
+    XAxis: React.ElementType;
+    YAxis: React.ElementType;
+    CartesianGrid: React.ElementType;
+    Tooltip: React.ElementType;
+    Legend: React.ElementType;
+}
+export type ChartKind = "bar" | "line" | "area" | "scatter" | "pie";
+export interface DataChartProps {
+    columns: readonly (string | GridColumn)[];
+    rows: readonly GridRow[];
+    /** Resolves to Recharts (an optional peer): `() => import("recharts")`. Called once, when the chart mounts. */
+    loadCharts: () => Promise<ChartLibrary>;
+    /** A note that the rows themselves are capped. */
+    truncated?: string | null;
+    /** Rows plotted at most. */
+    rowCap?: number;
+    className?: string;
+}
+/**
+ * A quick chart of a result: bar, line, area, scatter or pie, an X column
+ * and one or more Y columns, coloured by the theme's chart series. Recharts
+ * is the host's to supply (`loadCharts`); without it nothing is loaded.
+ */
+export declare function DataChart(props: DataChartProps): React.JSX.Element;

package/dist/workbench/DataChart.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityIcon, ChartColumnIcon, ChartPieIcon, CircleIcon, TrendingUpIcon, } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Segmented } from "../primitives/Segmented.js";
+import { Select } from "../primitives/Select.js";
+import { useUI } from "../provider/UIProvider.js";
+import { EmptyState } from "../states/EmptyState.js";
+import { ErrorState } from "../states/ErrorState.js";
+import { LoadingState } from "../states/LoadingState.js";
+import { columnSignature } from "./grid-model.js";
+import { TruncationBanner } from "./TruncationBanner.js";
+/** Recharts puts every point in the DOM, so the chart plots a prefix. */
+const CHART_ROW_CAP = 500;
+/** The five chart series, from the theme: they follow the ground and the accent. */
+const SERIES = [
+    "var(--chart-1)",
+    "var(--chart-2)",
+    "var(--chart-3)",
+    "var(--chart-4)",
+    "var(--chart-5)",
+];
+const KIND_ICON = {
+    bar: ChartColumnIcon,
+    line: TrendingUpIcon,
+    area: ActivityIcon,
+    scatter: CircleIcon,
+    pie: ChartPieIcon,
+};
+function isNumeric(value) {
+    if (typeof value === "number")
+        return Number.isFinite(value);
+    return typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value));
+}
+/** Columns mostly numeric in a sample of their first values, and the rest. */
+function classify(names, rows) {
+    const numeric = [];
+    const categorical = [];
+    for (const name of names) {
+        const sample = [];
+        for (const row of rows) {
+            const v = row[name];
+            if (v !== null && v !== undefined)
+                sample.push(v);
+            if (sample.length >= 20)
+                break;
+        }
+        const share = sample.length > 0 ? sample.filter(isNumeric).length / sample.length : 0;
+        (share > 0.7 ? numeric : categorical).push(name);
+    }
+    return { numeric, categorical };
+}
+/**
+ * A quick chart of a result: bar, line, area, scatter or pie, an X column
+ * and one or more Y columns, coloured by the theme's chart series. Recharts
+ * is the host's to supply (`loadCharts`); without it nothing is loaded.
+ */
+export function DataChart(props) {
+    return _jsx(ChartSurface, { ...props }, columnSignature(props.columns));
+}
+function ChartSurface({ columns, rows, loadCharts, truncated, rowCap = CHART_ROW_CAP, className, }) {
+    const { messages } = useUI();
+    const t = messages.workbench;
+    const names = React.useMemo(() => columns.map((c) => (typeof c === "string" ? c : c.name)), [columns]);
+    const { numeric, categorical } = React.useMemo(() => classify(names, rows), [names, rows]);
+    const [kind, setKind] = React.useState("bar");
+    const [x, setX] = React.useState(() => categorical[0] ?? names[0] ?? "");
+    const [ys, setYs] = React.useState(() => {
+        const first = numeric.find((n) => n !== (categorical[0] ?? names[0])) ?? names[1];
+        return first ? [first] : [];
+    });
+    const [lib, setLib] = React.useState(null);
+    const [failed, setFailed] = React.useState(null);
+    const [attempt, setAttempt] = React.useState(0);
+    const loader = React.useRef(loadCharts);
+    React.useEffect(() => {
+        let live = true;
+        loader.current().then((module) => live && setLib(module), (reason) => live && setFailed(reason instanceof Error ? reason.message : String(reason)));
+        return () => {
+            live = false;
+        };
+    }, [attempt]);
+    const data = React.useMemo(() => rows.slice(0, rowCap).map((row) => {
+        const entry = { [x]: row[x] };
+        for (const y of ys) {
+            const v = row[y];
+            entry[y] = typeof v === "number" ? v : Number(v) || 0;
+        }
+        return entry;
+    }), [rows, rowCap, x, ys]);
+    if (rows.length === 0)
+        return _jsx(EmptyState, { title: t.chartNoData, className: className });
+    const notes = [truncated, rows.length > rowCap ? t.chartCap(rowCap, rows.length) : null].filter(Boolean);
+    const tick = { fontSize: 11, fill: "var(--muted-foreground)" };
+    const tooltip = {
+        contentStyle: {
+            backgroundColor: "var(--popover)",
+            border: "1px solid var(--border)",
+            borderRadius: "var(--radius)",
+            color: "var(--popover-foreground)",
+            fontSize: 12,
+        },
+        itemStyle: { color: "var(--popover-foreground)" },
+        labelStyle: { color: "var(--muted-foreground)" },
+        cursor: { fill: "var(--muted)", stroke: "var(--border)" },
+    };
+    const legend = { wrapperStyle: { fontSize: 12, color: "var(--muted-foreground)" } };
+    let chart;
+    if (failed) {
+        chart = (_jsx(ErrorState, { title: t.chartLoadFailed, error: failed, onRetry: () => {
+                setFailed(null);
+                setAttempt((n) => n + 1);
+            }, retryLabel: t.retry }));
+    }
+    else if (!lib) {
+        chart = _jsx(LoadingState, { label: t.chartLoading, variant: "rows", rows: 4 });
+    }
+    else if (ys.length === 0) {
+        chart = _jsx(EmptyState, { title: t.chartPickY });
+    }
+    else {
+        const L = lib;
+        const axes = (_jsxs(_Fragment, { children: [_jsx(L.CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }), _jsx(L.XAxis, { dataKey: x, tick: tick, tickLine: false, stroke: "var(--border)" }), _jsx(L.YAxis, { tick: tick, tickLine: false, stroke: "var(--border)" }), _jsx(L.Tooltip, { ...tooltip }), ys.length > 1 && _jsx(L.Legend, { ...legend })] }));
+        const series = (i) => SERIES[i % SERIES.length];
+        chart = (_jsx(L.ResponsiveContainer, { width: "100%", height: "100%", children: kind === "bar" ? (_jsxs(L.BarChart, { data: data, children: [axes, ys.map((y, i) => (_jsx(L.Bar, { dataKey: y, fill: series(i), radius: [2, 2, 0, 0], isAnimationActive: false }, y)))] })) : kind === "line" ? (_jsxs(L.LineChart, { data: data, children: [axes, ys.map((y, i) => (_jsx(L.Line, { dataKey: y, stroke: series(i), strokeWidth: 2, dot: { r: 2, fill: series(i) }, isAnimationActive: false }, y)))] })) : kind === "area" ? (_jsxs(L.AreaChart, { data: data, children: [axes, ys.map((y, i) => (_jsx(L.Area, { dataKey: y, stroke: series(i), fill: series(i), fillOpacity: 0.2, strokeWidth: 2, isAnimationActive: false }, y)))] })) : kind === "scatter" ? (_jsxs(L.ScatterChart, { children: [_jsx(L.CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border)" }), _jsx(L.XAxis, { dataKey: x, name: x, type: "number", tick: tick, tickLine: false, stroke: "var(--border)" }), _jsx(L.YAxis, { dataKey: ys[0], name: ys[0], tick: tick, tickLine: false, stroke: "var(--border)" }), _jsx(L.Tooltip, { ...tooltip }), _jsx(L.Scatter, { data: data, fill: series(0), isAnimationActive: false })] })) : (_jsxs(L.PieChart, { children: [_jsx(L.Tooltip, { ...tooltip }), _jsx(L.Legend, { ...legend }), _jsx(L.Pie, { data: data.map((d) => ({
+                            name: String(d[x] ?? ""),
+                            value: Number(d[ys[0] ?? ""]) || 0,
+                        })), dataKey: "value", nameKey: "name", outerRadius: "80%", stroke: "var(--background)", isAnimationActive: false, children: data.map((_, i) => (_jsx(L.Cell, { fill: series(i) }, i))) })] })) }));
+    }
+    return (_jsxs("section", { "aria-label": t.chartLabel, "data-slot": "data-chart", className: cn("flex min-h-0 flex-col", className), children: [notes.length > 0 && _jsx(TruncationBanner, { children: notes.join(" ") }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-3 border-b bg-muted/40 px-3 py-1.5 text-xs", children: [_jsx(Segmented, { label: t.chartType, size: "sm", value: kind, onValueChange: setKind, options: ["bar", "line", "area", "scatter", "pie"].map((k) => ({
+                            value: k,
+                            label: t.chartKind(k),
+                            icon: KIND_ICON[k],
+                        })) }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: t.chartX }), _jsx(Select, { size: "sm", "aria-label": t.chartX, value: x, onValueChange: (next) => {
+                                    setX(next);
+                                    setYs((prev) => prev.filter((y) => y !== next));
+                                }, options: names.map((n) => ({ value: n, label: n })) })] }), _jsxs("fieldset", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [_jsx("legend", { className: "sr-only", children: t.chartY }), _jsx("span", { className: "mr-0.5 text-muted-foreground", "aria-hidden": true, children: t.chartY }), names
+                                .filter((n) => n !== x)
+                                .map((name) => {
+                                const on = ys.includes(name);
+                                return (_jsxs("button", { type: "button", "aria-pressed": on, className: cn("flex items-center gap-1 rounded-full border px-2 py-0.5 outline-none focus-visible:ring-2 focus-visible:ring-ring/50", on
+                                        ? "border-foreground/30 text-foreground"
+                                        : "text-muted-foreground hover:text-foreground"), onClick: () => setYs((prev) => (on ? prev.filter((y) => y !== name) : [...prev, name])), children: [on && (_jsx("span", { "aria-hidden": true, className: "size-2 rounded-full", style: { backgroundColor: SERIES[ys.indexOf(name) % SERIES.length] } })), name] }, name));
+                            })] })] }), _jsx("div", { className: "min-h-64 flex-1 p-4", children: chart })] }));
+}

package/dist/workbench/DataGrid.d.ts

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { type CellMatrix, type CopyFormat, type ExportFile, type ExportFormat } from "./grid-format.js";
+import { type GridColumn, type GridRow } from "./grid-model.js";
+import { type ChangeSet, type PendingChanges } from "./pending.js";
+/** A format the host adds to the export menu (a workbook); the host writes the file. */
+export interface GridExportOption {
+    id: string;
+    label: string;
+}
+/** An export the person asked for. `file` is the library's text for its own formats, null for a host's. */
+export interface GridExportRequest {
+    format: ExportFormat | (string & {});
+    matrix: CellMatrix;
+    file: ExportFile | null;
+}
+/** A copy the grid put on the clipboard. */
+export interface GridCopyEvent {
+    format: CopyFormat;
+    text: string;
+    /** Cells copied: rows times columns. */
+    cells: number;
+}
+/** A commit's failure, as the host rejects `onCommit` with it. `key` is the row key in the change set. */
+export interface GridCommitError {
+    message: string;
+    key?: number;
+}
+export interface DataGridProps {
+    /** Names, or descriptions with a type, keys and nullability. Undeclared types are sniffed from the rows. */
+    columns: readonly (string | GridColumn)[];
+    rows: readonly GridRow[];
+    /** The grid's accessible name. */
+    label?: string;
+    loading?: boolean;
+    error?: string | {
+        message: string;
+    } | null;
+    onRetry?: () => void;
+    /** The server's total when it capped the rows; with `hasMore`, the banner says more exist. */
+    totalRows?: number | null;
+    hasMore?: boolean;
+    /**
+     * Remembers column widths per person (the library's local store). The
+     * grid also starts clean (selection, sort, filter, hidden columns) when it
+     * changes, or when the columns do.
+     */
+    storageKey?: string;
+    /** The table for "Copy as INSERT" and the SQL export. */
+    tableName?: string;
+    /** The exported file's name without extension. */
+    exportName?: string;
+    /** After a copy reached the clipboard: the host may say so. */
+    onCopy?: (event: GridCopyEvent) => void;
+    /**
+     * Takes over export: the grid hands every request here instead of
+     * downloading (`downloadExport(request.file)` downloads one). Required for
+     * `exportFormats`.
+     */
+    onExport?: (request: GridExportRequest) => void;
+    /** Formats the host writes itself (xlsx), after the library's own. */
+    exportFormats?: readonly GridExportOption[];
+    /**
+     * Cells edit in place (Enter, F2, double click or typing), rows add,
+     * duplicate and delete, and the changes wait in a bar to be committed.
+     * Existing rows change only when a column is a `primaryKey`.
+     */
+    editable?: boolean;
+    /**
+     * Writes the changes. Resolve and the grid clears them; reject (with a
+     * `GridCommitError` or an Error) and they stay, with the message shown.
+     */
+    onCommit?: (changes: ChangeSet) => void | Promise<void>;
+    /** Controlled pending changes; leave out to let the grid keep them. */
+    pending?: PendingChanges;
+    onPendingChange?: (pending: PendingChanges) => void;
+    /** Host controls at the end of the toolbar (an edit-mode switch, a refresh). */
+    toolbar?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A data grid for query results and table data: rows and columns both
+ * virtualized (50,000 rows by 30 columns is a few hundred nodes), the
+ * WAI-ARIA grid pattern for the keyboard, cell, row and column selection,
+ * sort (NULLs last), filter, hidden and resizable columns, copy and export
+ * in six text formats, selection statistics, cell and row detail, and
+ * optional editing with pending changes the host commits. Host-driven: the
+ * rows come in, changes go out through callbacks, nothing fetches.
+ */
+export declare function DataGrid(props: DataGridProps): React.JSX.Element;