vastgrid 0.1.0 → 0.2.0

package/dist/data-grid.js

@@ -1,698 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore, } from "react";
-import { plainText } from "vastgrid-core";
-import { StatusBar, Toolbar } from "./components/bars.js";
-import { CellInspector } from "./components/cell-inspector.js";
-import { ColumnsPanel } from "./components/columns-panel.js";
-import { FilterPanel } from "./components/filter-panel.js";
-import { FindBar } from "./components/find-bar.js";
-import { MenuList, Popover } from "./components/popover.js";
-import { StatsPanel } from "./components/stats-panel.js";
-import { CopyTooLargeError, GridController } from "./controller.js";
-import { countFormat, numberFormat } from "./labels.js";
-import { messagesFor } from "./messages.js";
-import { CanvasRenderer } from "./renderer.js";
-import { cssLength, resolveTheme } from "./theme.js";
-const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
-async function writeClipboard(text, html) {
-    const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard;
-    if (!clipboard)
-        throw new Error("The clipboard is not available.");
-    if (clipboard.write && typeof ClipboardItem !== "undefined") {
-        const items = {
-            "text/plain": text.then((value) => new Blob([value], { type: "text/plain" })),
-        };
-        if (html)
-            items["text/html"] = html.then((value) => new Blob([value ?? ""], { type: "text/html" }));
-        await clipboard.write([new ClipboardItem(items)]);
-        return;
-    }
-    await clipboard.writeText(await text);
-}
-/**
- * A data grid for very large tables. Draws on a canvas, reads rows through a `TableSource` as you
- * scroll, and offers spreadsheet selection and keyboard navigation, copying, sorting, filters,
- * search, column statistics and a selection summary.
- */
-export const DataGrid = forwardRef(function DataGrid(props, ref) {
-    const { source, locale, rowHeight, headerHeight, nullText = "", frozenColumns = 0, toolbar = true, statusBar = true, reloadKey, copyLimit = 1_000_000, onQueryChange, className, style, } = props;
-    const resolvedLocale = locale ?? (typeof navigator === "undefined" ? undefined : navigator.language);
-    const messages = useMemo(() => ({ ...messagesFor(resolvedLocale), ...props.messages }), [resolvedLocale, props.messages]);
-    const rootRef = useRef(null);
-    const bodyRef = useRef(null);
-    const canvasRef = useRef(null);
-    const scrollerRef = useRef(null);
-    const sizerRef = useRef(null);
-    const rendererRef = useRef(null);
-    const dragRef = useRef(null);
-    const autoScrollRef = useRef(0);
-    const cellId = useId();
-    const [overlay, setOverlay] = useState(null);
-    const [findOpen, setFindOpen] = useState(false);
-    const [notice, setNotice] = useState(null);
-    const noticeTimer = useRef(undefined);
-    // One controller per source. Options that can change later are applied in effects below.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: the other options are applied without recreating the grid.
-    const controller = useMemo(() => new GridController(source, {
-        rowHeight: rowHeight ?? 24,
-        headerHeight: headerHeight ?? 32,
-        locale: resolvedLocale,
-        nullText,
-        frozenColumns,
-        minColumnWidth: 36,
-        maxAutoWidth: 360,
-        copyLimit,
-    }), [source]);
-    useSyncExternalStore(controller.subscribe, controller.getVersion, controller.getVersion);
-    const count = useMemo(() => countFormat(resolvedLocale), [resolvedLocale]);
-    const number = useMemo(() => numberFormat(resolvedLocale), [resolvedLocale]);
-    useEffect(() => {
-        if (resolvedLocale !== controller.options.locale || nullText !== controller.options.nullText) {
-            controller.setFormat(resolvedLocale, nullText);
-        }
-    }, [controller, resolvedLocale, nullText]);
-    const announce = useCallback((text) => {
-        setNotice(text);
-        clearTimeout(noticeTimer.current);
-        noticeTimer.current = setTimeout(() => setNotice(null), 3000);
-    }, []);
-    useEffect(() => () => clearTimeout(noticeTimer.current), []);
-    // Canvas, scrolling, sizes and theme.
-    useEffect(() => {
-        const root = rootRef.current;
-        const canvas = canvasRef.current;
-        const scroller = scrollerRef.current;
-        const sizer = sizerRef.current;
-        if (!root || !canvas || !scroller || !sizer)
-            return;
-        controller.options.rowHeight = rowHeight ?? cssLength(root, "--vg-row-height", 24);
-        controller.options.headerHeight = headerHeight ?? cssLength(root, "--vg-header-height", 32);
-        const renderer = new CanvasRenderer(canvas, controller, resolveTheme(root));
-        rendererRef.current = renderer;
-        controller.attach(scroller, sizer);
-        const stopRender = controller.onRender(() => renderer.schedule());
-        const resize = () => controller.setViewport(scroller.clientWidth, scroller.clientHeight);
-        resize();
-        const observer = new ResizeObserver(resize);
-        observer.observe(scroller);
-        const onScroll = () => controller.handleScroll();
-        scroller.addEventListener("scroll", onScroll, { passive: true });
-        // Without a text selection, Chromium and Safari disable the copy command unless "beforecopy" is
-        // cancelled; then ⌘C and the Edit menu fire "copy", which the grid answers while it has focus.
-        const onBeforeCopy = (event) => {
-            if (document.activeElement === scroller)
-                event.preventDefault();
-        };
-        const onCopy = (event) => {
-            if (document.activeElement === scroller)
-                copyHandler.current(event);
-        };
-        document.addEventListener("beforecopy", onBeforeCopy);
-        document.addEventListener("copy", onCopy);
-        const refreshTheme = () => renderer.setTheme(resolveTheme(root));
-        const media = window.matchMedia("(prefers-color-scheme: dark)");
-        media.addEventListener("change", refreshTheme);
-        const themeObserver = new MutationObserver(refreshTheme);
-        themeObserver.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class", "style", "data-theme"],
-        });
-        void document.fonts?.ready.then(refreshTheme);
-        controller.start();
-        renderer.schedule();
-        return () => {
-            controller.stop();
-            stopRender();
-            observer.disconnect();
-            scroller.removeEventListener("scroll", onScroll);
-            document.removeEventListener("beforecopy", onBeforeCopy);
-            document.removeEventListener("copy", onCopy);
-            media.removeEventListener("change", refreshTheme);
-            themeObserver.disconnect();
-            renderer.dispose();
-            rendererRef.current = null;
-        };
-    }, [controller, rowHeight, headerHeight]);
-    // Theme changes through the grid's own class or style.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: className and style are the triggers.
-    useEffect(() => {
-        const root = rootRef.current;
-        if (root && rendererRef.current)
-            rendererRef.current.setTheme(resolveTheme(root));
-    }, [className, style]);
-    const firstReload = useRef(true);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: reloadKey is the trigger.
-    useEffect(() => {
-        if (firstReload.current) {
-            firstReload.current = false;
-            return;
-        }
-        controller.reload();
-    }, [reloadKey, controller]);
-    const lastQuery = useRef(controller.query);
-    useEffect(() => {
-        if (lastQuery.current !== controller.query) {
-            lastQuery.current = controller.query;
-            onQueryChange?.(controller.query);
-        }
-    });
-    useImperativeHandle(ref, () => ({
-        focus: () => scrollerRef.current?.focus(),
-        reload: () => controller.reload(),
-        getQuery: () => controller.query,
-        setQuery: (query) => void controller.setQuery(query),
-        goToRow: (row) => {
-            controller.selection.select({ row, col: controller.selection.active.col });
-            controller.selectionChanged({ row, col: controller.selection.active.col });
-        },
-        controller,
-        get renderer() {
-            return rendererRef.current;
-        },
-    }), [controller]);
-    // ----- helpers -----
-    function local(event) {
-        const rect = scrollerRef.current?.getBoundingClientRect();
-        return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
-    }
-    /** A popover anchor at a point of the grid body. */
-    function anchorAt(x, y, height = 0) {
-        const offsetX = bodyRef.current?.offsetLeft ?? 0;
-        const offsetY = bodyRef.current?.offsetTop ?? 0;
-        return { x: x + offsetX, y: y + offsetY, height };
-    }
-    function headerAnchor(col) {
-        const x = Math.max(controller.gutterWidth, controller.columnX(col));
-        return anchorAt(x, 0, controller.options.headerHeight);
-    }
-    function cellAnchor(row, col) {
-        const x = Math.max(controller.gutterWidth, controller.columnX(col));
-        const y = Math.max(controller.options.headerHeight, Math.min(controller.height - 8, controller.rowY(row)));
-        return anchorAt(x, y, controller.options.rowHeight);
-    }
-    function focusGrid() {
-        scrollerRef.current?.focus({ preventScroll: true });
-    }
-    const copy = useCallback(async (options) => {
-        const task = controller.copySelection(options);
-        try {
-            await writeClipboard(task.then((result) => result.text), options.markdown ? null : task.then((result) => result.html));
-            const result = await task;
-            announce(messages.copied(count(result.cells)));
-        }
-        catch (error) {
-            if (error instanceof CopyTooLargeError)
-                announce(messages.copyTooLarge(count(error.limit)));
-            else
-                announce(messages.copyFailed);
-        }
-    }, [announce, controller, count, messages]);
-    /** Options of a copy started from the keyboard, answered by the browser's own copy event. */
-    const pendingCopy = useRef(null);
-    const copyHandler = useRef(() => undefined);
-    // ----- pointer -----
-    function selectMode(event) {
-        if (event.shiftKey)
-            return "extend";
-        if (isMac ? event.metaKey : event.ctrlKey)
-            return "add";
-        return "replace";
-    }
-    function dragTo(x, y) {
-        const drag = dragRef.current;
-        if (!drag || (drag.kind !== "cells" && drag.kind !== "rows" && drag.kind !== "cols"))
-            return;
-        const c = controller;
-        const clampedX = Math.min(Math.max(x, c.gutterWidth + 1), c.width - 1);
-        const clampedY = Math.min(Math.max(y, c.options.headerHeight + 1), c.height - 1);
-        const col = c.columnAt(clampedX);
-        const row = c.rowAt(clampedY);
-        if (drag.kind === "rows" && row >= 0)
-            c.selection.selectRows(row, row, "extend");
-        else if (drag.kind === "cols" && col >= 0)
-            c.selection.selectCols(col, col, "extend");
-        else if (drag.kind === "cells" && row >= 0 && col >= 0)
-            c.selection.select({ row, col }, "extend");
-        c.selectionChanged();
-    }
-    function autoScroll() {
-        const drag = dragRef.current;
-        if (!drag || (drag.kind !== "cells" && drag.kind !== "rows" && drag.kind !== "cols")) {
-            autoScrollRef.current = 0;
-            return;
-        }
-        const c = controller;
-        const speed = (distance) => Math.sign(distance) * Math.min(80, Math.abs(distance) * 0.6);
-        let dx = 0;
-        let dy = 0;
-        if (drag.y < c.options.headerHeight)
-            dy = speed(drag.y - c.options.headerHeight);
-        else if (drag.y > c.height)
-            dy = speed(drag.y - c.height);
-        if (drag.kind !== "rows") {
-            if (drag.x < c.gutterWidth + c.frozenWidth && c.scrollX.position > 0)
-                dx = speed(drag.x - c.gutterWidth - c.frozenWidth);
-            else if (drag.x > c.width)
-                dx = speed(drag.x - c.width);
-        }
-        if (dx !== 0 || dy !== 0) {
-            c.scrollToVirtual(dx === 0 ? null : c.scrollX.position + dx, dy === 0 ? null : c.scrollY.position + dy);
-            dragTo(drag.x, drag.y);
-        }
-        autoScrollRef.current = requestAnimationFrame(autoScroll);
-    }
-    function onPointerDown(event) {
-        const scroller = scrollerRef.current;
-        if (!scroller || event.button !== 0)
-            return;
-        const { x, y } = local(event);
-        // Leave the native scrollbars alone.
-        if (x > scroller.clientWidth || y > scroller.clientHeight)
-            return;
-        focusGrid();
-        const c = controller;
-        const hit = c.hitTest(x, y);
-        const mode = selectMode(event);
-        if (hit.resize >= 0) {
-            event.preventDefault();
-            scroller.setPointerCapture(event.pointerId);
-            dragRef.current = {
-                kind: "resize",
-                pointerId: event.pointerId,
-                col: hit.resize,
-                startX: x,
-                startWidth: c.layout.width(hit.resize),
-            };
-            c.resizing = hit.resize;
-            c.requestRender();
-            return;
-        }
-        if (hit.menu && hit.col >= 0) {
-            event.preventDefault();
-            setOverlay({ kind: "columnMenu", col: hit.col, anchor: headerAnchor(hit.col) });
-            return;
-        }
-        switch (hit.zone) {
-            case "cell":
-                c.selection.select({ row: hit.row, col: hit.col }, mode);
-                dragRef.current = { kind: "cells", pointerId: event.pointerId, x, y };
-                break;
-            case "header":
-                if (mode === "replace" && c.selection.colSelected(hit.col)) {
-                    dragRef.current = { kind: "move", pointerId: event.pointerId, col: hit.col, x, y, moved: false };
-                }
-                else {
-                    c.selection.selectCols(hit.col, hit.col, mode);
-                    dragRef.current = { kind: "cols", pointerId: event.pointerId, x, y };
-                }
-                break;
-            case "gutter":
-                c.selection.selectRows(hit.row, hit.row, mode);
-                dragRef.current = { kind: "rows", pointerId: event.pointerId, x, y };
-                break;
-            case "corner":
-                c.selection.selectAll();
-                break;
-            default:
-                return;
-        }
-        event.preventDefault();
-        scroller.setPointerCapture(event.pointerId);
-        c.selectionChanged();
-    }
-    function onPointerMove(event) {
-        const scroller = scrollerRef.current;
-        if (!scroller)
-            return;
-        const { x, y } = local(event);
-        const c = controller;
-        const drag = dragRef.current;
-        if (drag && drag.pointerId === event.pointerId) {
-            if (drag.kind === "resize") {
-                c.resizeColumn(drag.col, drag.startWidth + (x - drag.startX));
-                return;
-            }
-            if (drag.kind === "move") {
-                drag.moved = drag.moved || Math.abs(x - drag.x) > 4;
-                drag.x = x;
-                drag.y = y;
-                scroller.style.cursor = drag.moved ? "grabbing" : "";
-                return;
-            }
-            drag.x = x;
-            drag.y = y;
-            dragTo(x, y);
-            if (!autoScrollRef.current)
-                autoScrollRef.current = requestAnimationFrame(autoScroll);
-            return;
-        }
-        const hit = x > scroller.clientWidth || y > scroller.clientHeight
-            ? { zone: "outside", row: -1, col: -1, resize: -1, menu: false }
-            : c.hitTest(x, y);
-        const previous = c.hover;
-        c.hover = hit;
-        scroller.style.cursor = hit.resize >= 0 ? "col-resize" : hit.menu ? "pointer" : "";
-        if (previous?.zone !== hit.zone || previous.col !== hit.col || previous.menu !== hit.menu)
-            c.requestRender();
-    }
-    function endDrag(event) {
-        const drag = dragRef.current;
-        if (!drag || drag.pointerId !== event.pointerId)
-            return;
-        dragRef.current = null;
-        cancelAnimationFrame(autoScrollRef.current);
-        autoScrollRef.current = 0;
-        const scroller = scrollerRef.current;
-        if (scroller?.hasPointerCapture(event.pointerId))
-            scroller.releasePointerCapture(event.pointerId);
-        if (scroller)
-            scroller.style.cursor = "";
-        const c = controller;
-        if (drag.kind === "resize") {
-            c.resizing = -1;
-            c.requestRender();
-        }
-        else if (drag.kind === "move") {
-            const target = c.columnAt(local(event).x);
-            if (drag.moved && target >= 0 && target !== drag.col) {
-                c.moveColumn(drag.col, target);
-                c.selection.selectCols(target, target);
-                c.selectionChanged();
-            }
-            else if (!drag.moved) {
-                c.selection.selectCols(drag.col, drag.col);
-                c.selectionChanged();
-            }
-        }
-    }
-    function onPointerLeave() {
-        if (controller.hover && !dragRef.current) {
-            controller.hover = null;
-            controller.requestRender();
-        }
-    }
-    function onDoubleClick(event) {
-        const { x, y } = local(event);
-        const hit = controller.hitTest(x, y);
-        if (hit.resize >= 0) {
-            controller.autoFit(hit.resize);
-            controller.emit();
-        }
-        else if (hit.zone === "cell") {
-            setOverlay({ kind: "inspector", row: hit.row, col: hit.col, anchor: cellAnchor(hit.row, hit.col) });
-        }
-    }
-    function onContextMenu(event) {
-        const { x, y } = local(event);
-        const c = controller;
-        const hit = c.hitTest(x, y);
-        if (hit.zone === "header") {
-            event.preventDefault();
-            setOverlay({ kind: "columnMenu", col: hit.col, anchor: anchorAt(x, y) });
-            return;
-        }
-        if (hit.zone !== "cell")
-            return;
-        event.preventDefault();
-        if (!c.selection.contains(hit.row, hit.col)) {
-            c.selection.select({ row: hit.row, col: hit.col });
-            c.selectionChanged();
-        }
-        setOverlay({ kind: "contextMenu", row: hit.row, col: hit.col, anchor: anchorAt(x, y) });
-    }
-    // ----- keyboard -----
-    function onKeyDown(event) {
-        if (event.target !== scrollerRef.current)
-            return;
-        const c = controller;
-        const primary = isMac ? event.metaKey : event.ctrlKey;
-        const extend = event.shiftKey;
-        const lastRow = Math.max(0, c.rowCount - 1);
-        const lastCol = Math.max(0, c.visible.length - 1);
-        const focus = extend ? c.selection.focus : c.selection.active;
-        let target = null;
-        switch (event.key) {
-            case "ArrowDown":
-                if (event.altKey) {
-                    setOverlay({ kind: "columnMenu", col: c.selection.active.col, anchor: headerAnchor(c.selection.active.col) });
-                    break;
-                }
-                target = c.selection.moveTo({ row: primary ? lastRow : focus.row + 1, col: focus.col }, extend);
-                break;
-            case "ArrowUp":
-                target = c.selection.moveTo({ row: primary ? 0 : focus.row - 1, col: focus.col }, extend);
-                break;
-            case "ArrowRight":
-                target = c.selection.moveTo({ row: focus.row, col: primary ? lastCol : focus.col + 1 }, extend);
-                break;
-            case "ArrowLeft":
-                target = c.selection.moveTo({ row: focus.row, col: primary ? 0 : focus.col - 1 }, extend);
-                break;
-            case "PageDown":
-                target = event.altKey
-                    ? c.selection.moveTo({ row: focus.row, col: focus.col + 5 }, extend)
-                    : c.selection.moveTo({ row: focus.row + c.pageRows, col: focus.col }, extend);
-                break;
-            case "PageUp":
-                target = event.altKey
-                    ? c.selection.moveTo({ row: focus.row, col: focus.col - 5 }, extend)
-                    : c.selection.moveTo({ row: focus.row - c.pageRows, col: focus.col }, extend);
-                break;
-            case "Home":
-                target = c.selection.moveTo({ row: event.ctrlKey || event.metaKey ? 0 : focus.row, col: 0 }, extend);
-                break;
-            case "End":
-                target = c.selection.moveTo({ row: event.ctrlKey || event.metaKey ? lastRow : focus.row, col: lastCol }, extend);
-                break;
-            case "Tab":
-                target = c.selection.advance(0, event.shiftKey ? -1 : 1);
-                break;
-            case "Enter":
-                target = c.selection.advance(event.shiftKey ? -1 : 1, 0);
-                break;
-            case " ":
-                if (event.shiftKey)
-                    c.selection.selectRows(c.selection.active.row, c.selection.active.row);
-                else if (event.ctrlKey)
-                    c.selection.selectCols(c.selection.active.col, c.selection.active.col);
-                else
-                    return;
-                c.selectionChanged();
-                break;
-            case "F2":
-                setOverlay({
-                    kind: "inspector",
-                    ...c.selection.active,
-                    anchor: cellAnchor(c.selection.active.row, c.selection.active.col),
-                });
-                break;
-            case "Escape":
-                if (findOpen)
-                    setFindOpen(false);
-                else if (!c.selection.single) {
-                    c.selection.select(c.selection.active);
-                    c.selectionChanged();
-                }
-                else
-                    return;
-                break;
-            case "ContextMenu":
-                setOverlay({
-                    kind: "contextMenu",
-                    ...c.selection.active,
-                    anchor: cellAnchor(c.selection.active.row, c.selection.active.col),
-                });
-                break;
-            default:
-                if (primary && event.key.toLowerCase() === "a") {
-                    c.selection.selectAll();
-                    c.selectionChanged();
-                }
-                else if (primary && event.key.toLowerCase() === "c") {
-                    // Let the browser run its own copy command: it needs no clipboard permission, and onCopy answers
-                    // it with the loaded cells. Shortcuts the browser does not treat as copying fall back below.
-                    const options = { headers: event.shiftKey };
-                    pendingCopy.current = options;
-                    setTimeout(() => {
-                        if (pendingCopy.current !== options)
-                            return;
-                        pendingCopy.current = null;
-                        void copy(options);
-                    }, 0);
-                    return;
-                }
-                else if (primary && event.key.toLowerCase() === "f") {
-                    setFindOpen(true);
-                }
-                else if (event.shiftKey && event.key === "F10") {
-                    setOverlay({
-                        kind: "contextMenu",
-                        ...c.selection.active,
-                        anchor: cellAnchor(c.selection.active.row, c.selection.active.col),
-                    });
-                }
-                else {
-                    return;
-                }
-        }
-        event.preventDefault();
-        if (target)
-            c.selectionChanged(target);
-    }
-    /** The browser's own copy command (Edit menu): answer synchronously when the cells are loaded. */
-    /**
-     * The browser's copy command (⌘C, or Copy in the app's Edit menu) while the grid has focus. Loaded
-     * cells are written here, synchronously, which needs no clipboard permission; larger selections are
-     * read first and written with the asynchronous clipboard API.
-     */
-    copyHandler.current = (event) => {
-        if (!event.clipboardData)
-            return;
-        event.preventDefault();
-        const options = pendingCopy.current ?? {};
-        pendingCopy.current = null;
-        const result = controller.copySelectionSync(options);
-        if (result) {
-            event.clipboardData.setData("text/plain", result.text);
-            if (result.html)
-                event.clipboardData.setData("text/html", result.html);
-            announce(messages.copied(count(result.cells)));
-        }
-        else {
-            void copy(options);
-        }
-    };
-    // ----- menus -----
-    const c = controller;
-    const capabilities = c.info?.capabilities;
-    const ready = c.info?.status === "ready";
-    function columnMenuItems(col) {
-        const state = c.visible[col];
-        const schema = c.columnSchema(col);
-        if (!state || !schema)
-            return [];
-        const sort = c.sortOf(state.index);
-        const otherSorts = (c.query.sort ?? []).filter((key) => key.column !== state.index).length > 0;
-        const items = [
-            {
-                label: messages.sortAscending,
-                onSelect: () => c.sortBy(col, "asc"),
-                disabled: !ready || !capabilities?.sort,
-                checked: sort?.direction === "asc" && !otherSorts,
-            },
-            {
-                label: messages.sortDescending,
-                onSelect: () => c.sortBy(col, "desc"),
-                disabled: !ready || !capabilities?.sort,
-                checked: sort?.direction === "desc" && !otherSorts,
-            },
-        ];
-        if ((c.query.sort?.length ?? 0) > 0 && !(sort && !otherSorts)) {
-            items.push({ label: messages.addSortAscending, onSelect: () => c.sortBy(col, "asc", true), disabled: !ready }, { label: messages.addSortDescending, onSelect: () => c.sortBy(col, "desc", true), disabled: !ready });
-        }
-        if ((c.query.sort?.length ?? 0) > 0)
-            items.push({ label: messages.clearSort, onSelect: () => c.clearSort() });
-        items.push({
-            label: messages.filter,
-            separator: true,
-            disabled: !ready || !capabilities?.filter,
-            onSelect: () => setOverlay({ kind: "filter", column: state.index, anchor: headerAnchor(col) }),
-        }, {
-            label: messages.statistics,
-            disabled: !ready || !capabilities?.stats,
-            onSelect: () => setOverlay({ kind: "stats", col, anchor: headerAnchor(col) }),
-        }, {
-            label: messages.autoFit,
-            separator: true,
-            onSelect: () => {
-                c.autoFit(col);
-                c.emit();
-            },
-        }, col < c.frozen && c.frozen > 0
-            ? { label: messages.unfreeze, onSelect: () => c.freezeUpTo(-1) }
-            : { label: messages.freezeUpTo, onSelect: () => c.freezeUpTo(col) }, { label: messages.hideColumn, disabled: c.visible.length <= 1, onSelect: () => c.hideColumn(col) }, {
-            label: messages.copyColumnName,
-            onSelect: () => void writeClipboard(Promise.resolve(schema.name), null).then(() => announce(messages.copied("1")), (error) => announce(error instanceof Error ? error.message : String(error))),
-        });
-        return items;
-    }
-    function contextMenuItems(row, col) {
-        const state = c.visible[col];
-        const value = c.value(row, col);
-        const items = [
-            { label: messages.copy, shortcut: isMac ? "⌘C" : "Ctrl+C", onSelect: () => void copy({}) },
-            {
-                label: messages.copyWithHeaders,
-                shortcut: isMac ? "⇧⌘C" : "Ctrl+Shift+C",
-                onSelect: () => void copy({ headers: true }),
-            },
-            { label: messages.copyAsMarkdown, onSelect: () => void copy({ markdown: true }) },
-        ];
-        if (state && value !== undefined) {
-            items.push({
-                label: messages.filterToValue,
-                separator: true,
-                disabled: !ready || !capabilities?.filter,
-                onSelect: () => c.setFilter(state.index, { type: "values", column: state.index, values: [value] }),
-            }, {
-                label: messages.excludeValue,
-                disabled: !ready || !capabilities?.filter,
-                onSelect: () => c.setFilter(state.index, { type: "values", column: state.index, values: [value], exclude: true }),
-            });
-        }
-        items.push({
-            label: messages.sortAscending,
-            separator: true,
-            disabled: !ready || !capabilities?.sort,
-            onSelect: () => c.sortBy(col, "asc"),
-        }, {
-            label: messages.sortDescending,
-            disabled: !ready || !capabilities?.sort,
-            onSelect: () => c.sortBy(col, "desc"),
-        }, {
-            label: messages.inspectCell,
-            separator: true,
-            shortcut: "F2",
-            onSelect: () => setOverlay({ kind: "inspector", row, col, anchor: cellAnchor(row, col) }),
-        });
-        return items;
-    }
-    const closeOverlay = useCallback(() => setOverlay(null), []);
-    const loadDistinct = useCallback((search, signal) => overlay?.kind === "filter" ? controller.distinct(overlay.column, search, signal) : null, [controller, overlay]);
-    const loadStats = useCallback((signal) => (overlay?.kind === "stats" ? controller.stats(overlay.col, signal) : null), [controller, overlay]);
-    const loadCell = useCallback((signal) => overlay?.kind === "inspector" ? controller.fullValue(overlay.row, overlay.col, signal) : Promise.resolve(null), [controller, overlay]);
-    // ----- accessibility -----
-    const active = c.selection.active;
-    const activeSchema = c.columnSchema(active.col);
-    const activeValue = c.value(active.row, active.col);
-    const activeText = activeValue === undefined ? messages.loading : activeValue === null ? messages.blank : plainText(activeValue);
-    let overlayMessage = null;
-    if (c.loadError)
-        overlayMessage = `${messages.error} ${c.loadError}`;
-    else if (c.info?.status === "error")
-        overlayMessage = `${messages.error} ${c.info.error ?? ""}`;
-    else if (c.viewError)
-        overlayMessage = c.viewError;
-    else if (!c.info || (c.info.status === "loading" && c.readableRows === 0))
-        overlayMessage = messages.loading;
-    else if (c.rowCount === 0 && !c.viewPending)
-        overlayMessage = messages.noRows;
-    return (_jsxs("div", { ref: rootRef, className: `vg-root${className ? ` ${className}` : ""}`, style: style, "data-status": c.status, children: [toolbar && (_jsx(Toolbar, { controller: c, messages: messages, onColumns: (button) => {
-                    const root = rootRef.current?.getBoundingClientRect();
-                    const rect = button.getBoundingClientRect();
-                    setOverlay({
-                        kind: "columns",
-                        anchor: { x: rect.right - (root?.left ?? 0) - 260, y: rect.top - (root?.top ?? 0), height: rect.height },
-                    });
-                } })), (c.viewPending || c.info?.status === "loading") && (_jsx("div", { className: "vg-progress", role: "progressbar", "aria-label": messages.loading, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": c.info?.progress ? Math.round(c.info.progress * 100) : undefined, children: _jsx("span", { style: c.info?.progress && !c.viewPending ? { width: `${Math.round(c.info.progress * 100)}%` } : undefined, "data-indeterminate": c.viewPending || !c.info?.progress || undefined }) })), _jsxs("div", { ref: bodyRef, className: "vg-body", children: [_jsx("canvas", { ref: canvasRef, className: "vg-canvas" }), _jsxs("div", { ref: scrollerRef, className: "vg-scroller", role: "grid", tabIndex: 0, "aria-label": props["aria-label"] ?? messages.gridLabel, "aria-rowcount": c.rowCount + 1, "aria-colcount": c.visible.length + 1, "aria-multiselectable": "true", "aria-activedescendant": c.rowCount > 0 && activeSchema ? cellId : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onPointerLeave: onPointerLeave, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, onKeyDown: onKeyDown, children: [_jsx("div", { ref: sizerRef, className: "vg-sizer" }), activeSchema && c.rowCount > 0 && (_jsxs("div", { className: "vg-sr-only", role: "rowgroup", children: [_jsx("div", { role: "row", "aria-rowindex": 1, children: _jsx("div", { role: "columnheader", "aria-colindex": active.col + 2, children: activeSchema.name }) }), _jsx("div", { role: "row", "aria-rowindex": active.row + 2, children: _jsx("div", { role: "gridcell", id: cellId, "aria-colindex": active.col + 2, "aria-selected": "true", children: activeText }) })] }))] }), overlayMessage && (_jsxs("div", { className: "vg-message", role: c.loadError || c.viewError || c.info?.status === "error" ? "alert" : "status", children: [_jsx("span", { children: overlayMessage }), (c.loadError || c.info?.status === "error") && (_jsx("button", { type: "button", className: "vg-button", onClick: () => controller.reload(), children: messages.retry }))] })), findOpen && (_jsx(FindBar, { messages: messages, initial: c.findText, onFind: (text, direction, caseSensitive, signal) => controller.find(text, direction, caseSensitive, signal), onClose: () => {
-                            setFindOpen(false);
-                            controller.findText = "";
-                            controller.requestRender();
-                            focusGrid();
-                        } })), notice && (_jsx("div", { className: "vg-toast", role: "status", children: notice }))] }), statusBar && _jsx(StatusBar, { controller: c, messages: messages }), overlay?.kind === "columnMenu" && (_jsx(Popover, { anchor: overlay.anchor, container: rootRef, onClose: closeOverlay, returnFocus: scrollerRef, label: c.columnSchema(overlay.col)?.name ?? "", role: "menu", children: _jsx(MenuList, { items: columnMenuItems(overlay.col), onClose: closeOverlay }) })), overlay?.kind === "contextMenu" && (_jsx(Popover, { anchor: overlay.anchor, container: rootRef, onClose: closeOverlay, returnFocus: scrollerRef, label: messages.copy, role: "menu", children: _jsx(MenuList, { items: contextMenuItems(overlay.row, overlay.col), onClose: closeOverlay }) })), overlay?.kind === "filter" && c.schema[overlay.column] && (_jsx(Popover, { anchor: overlay.anchor, container: rootRef, onClose: closeOverlay, returnFocus: scrollerRef, label: messages.filterBy(c.schema[overlay.column].name), className: "vg-popover--panel", children: _jsx(FilterPanel, { column: overlay.column, schema: c.schema[overlay.column], filter: c.filterOf(overlay.column), messages: messages, formatter: c.formatter, count: count, load: loadDistinct, onApply: (filter) => {
-                        c.setFilter(overlay.column, filter);
-                        setOverlay(null);
-                        focusGrid();
-                    } }) })), overlay?.kind === "stats" && c.columnSchema(overlay.col) && (_jsx(Popover, { anchor: overlay.anchor, container: rootRef, onClose: closeOverlay, returnFocus: scrollerRef, label: messages.statistics, className: "vg-popover--panel", children: _jsx(StatsPanel, { schema: c.columnSchema(overlay.col), messages: messages, formatter: c.formatter, count: count, number: number, load: loadStats }) })), overlay?.kind === "inspector" && c.columnSchema(overlay.col) && (_jsx(Popover, { anchor: overlay.anchor, container: rootRef, onClose: closeOverlay, returnFocus: scrollerRef, label: messages.inspectCell, className: "vg-popover--panel vg-popover--wide", children: _jsx(CellInspector, { schema: c.columnSchema(overlay.col), messages: messages, location: messages.cell(count(overlay.row + 1), c.columnSchema(overlay.col)?.name ?? ""), load: loadCell, onCopy: (text) => void writeClipboard(Promise.resolve(text), null).then(() => announce(messages.copied("1")), (error) => announce(error instanceof Error ? error.message : String(error))) }) })), overlay?.kind === "columns" && (_jsx(Popover, { anchor: overlay.anchor, container: rootRef, onClose: closeOverlay, label: messages.columns, className: "vg-popover--panel", children: _jsx(ColumnsPanel, { columns: c.columns, schema: c.schema, messages: messages, onToggle: (index, hidden) => c.setColumnHidden(index, hidden), onShowAll: () => c.showAllColumns() }) }))] }));
-});
-//# sourceMappingURL=data-grid.js.map