@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/data-grid.js

@@ -0,0 +1,829 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The kit's one list: TanStack Table for sorting, column visibility and order, drawn as a CSS grid
+ * of ARIA table rows so every row shares the columns (subgrid) and a row can carry a group heading,
+ * a detail line or a wash over pinned cells. State comes in controlled/uncontrolled pairs, so a page
+ * can keep its sort, selection and columns in the URL. `Table` is the same list with the plain,
+ * frameless look.
+ */
+import { CaretDownIcon, CaretUpIcon, EyeSlashIcon, FunnelSimpleIcon, SortAscendingIcon, SortDescendingIcon, } from "@phosphor-icons/react";
+import { columnOrderingFeature, columnVisibilityFeature, createColumnHelper, createSortedRowModel, functionalUpdate, rowSortingFeature, tableFeatures, useTable, } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { cloneElement, useLayoutEffect, useRef, useState, } from "react";
+import { css, cx } from "#primitives/css";
+import { useBreakpoint } from "./breakpoint.js";
+import { useControllableState } from "./controllable-state.js";
+import { replaceFilter, FilterValueEditor } from "./filter-bar.js";
+import { Checkbox } from "./form-controls.js";
+import { useHotkeys } from "./hotkeys.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { Popover } from "./overlays.js";
+import { Skeleton } from "./skeleton.js";
+/** TanStack uses this type-only slot to type `meta`. */
+const columnMeta = {};
+const tableFeatureSet = tableFeatures({
+    rowSortingFeature,
+    columnVisibilityFeature,
+    columnOrderingFeature,
+    sortedRowModel: createSortedRowModel(),
+    columnMeta,
+});
+/**
+ * Column helper bound to the list's features: `accessor` columns sort by their value, `display`
+ * columns render without one. See `TableColumnMeta` for the per-column options.
+ */
+export function createTableColumns() {
+    return createColumnHelper();
+}
+/** Each column's id, plain-text name and whether it is locked, in definition order. */
+export function columnInfoOf(columns) {
+    return columns.map((column) => {
+        const id = column.id ?? ("accessorKey" in column ? String(column.accessorKey) : "");
+        const label = column.meta?.label ?? (typeof column.header === "string" ? column.header : id);
+        return { id, label, locked: column.meta?.locked ?? false };
+    });
+}
+/** The element that scrolls `element` vertically: its nearest scrolling ancestor, or the page. */
+function scrollingAncestor(element) {
+    for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+        if (/auto|scroll|overlay/.test(getComputedStyle(parent).overflowY))
+            return parent;
+    }
+    return document.scrollingElement instanceof HTMLElement
+        ? document.scrollingElement
+        : document.documentElement;
+}
+/**
+ * The list: sortable heads (or a head menu), row selection with a select-all box, hidden and
+ * reordered columns, columns that drop by `priority` as the list narrows, row links and presses,
+ * hover-revealed row actions, groups, loading, empty and no-results states. `role="table"`; Enter
+ * on a pressable row opens it.
+ */
+export function DataGrid({ data, columns, getRowId, variant = "framed", density = "default", sorting: sortingProp, defaultSorting = emptySorting, onSortingChange, manualSorting = false, enableRowSelection, rowSelection: rowSelectionProp, defaultRowSelection = emptySelection, onRowSelectionChange, stickySelectColumn = false, columnVisibility: columnVisibilityProp, defaultColumnVisibility = emptyVisibility, onColumnVisibilityChange, columnOrder: columnOrderProp, defaultColumnOrder = emptyOrder, onColumnOrderChange, headerMenu = false, filters, onFiltersChange, getRowHref, renderRowLink, onRowClick, activeRowId, keyboardNavigation = false, virtualize = false, rowActions, renderRowDetail, groupBy, renderGroupRow, loading = false, empty, noResults, filtered, hideHeader = false, fill = false, narrowScreenLayout = "columns", footer, labels: ownLabels, className, frameClassName, style, ...props }) {
+    const { labels: localeLabels } = useCiridaeLocale();
+    const labels = { ...localeLabels.table, ...ownLabels };
+    const [sorting, setSorting] = useControllableState(sortingProp, defaultSorting, onSortingChange);
+    const [rowSelection, setRowSelection] = useControllableState(rowSelectionProp, defaultRowSelection, onRowSelectionChange);
+    const [columnVisibility, setColumnVisibility] = useControllableState(columnVisibilityProp, defaultColumnVisibility, onColumnVisibilityChange);
+    const [columnOrder, setColumnOrder] = useControllableState(columnOrderProp, defaultColumnOrder, onColumnOrderChange);
+    const table = useTable({
+        features: tableFeatureSet,
+        data,
+        columns,
+        getRowId: (row) => getRowId(row),
+        defaultColumn: { sortFn: compareSortValues },
+        state: { sorting, columnVisibility, columnOrder },
+        onSortingChange: (updater) => setSorting(functionalUpdate(updater, sorting)),
+        onColumnVisibilityChange: (updater) => setColumnVisibility(functionalUpdate(updater, columnVisibility)),
+        onColumnOrderChange: (updater) => setColumnOrder(functionalUpdate(updater, columnOrder)),
+        manualSorting,
+        sortDescFirst: false,
+        enableSortingRemoval: false,
+    });
+    const phone = useBreakpoint("phone");
+    const stacked = narrowScreenLayout === "stacked" && phone;
+    const visibleColumns = table
+        .getVisibleLeafColumns()
+        .filter((column) => !(phone && column.columnDef.meta?.hideOnNarrow));
+    // Priority dropping: measured, so it follows the list's own width (beside a panel, in a side
+    // column), not the screen's. Each dropped column remembers the width the list needed with it,
+    // and comes back once the list is that wide again.
+    const frameRef = useRef(null);
+    const gridRef = useRef(null);
+    const selectHeadRef = useRef(null);
+    const [frameWidth, setFrameWidth] = useState(0);
+    const [dropped, setDropped] = useState(new Map());
+    // Ids that can drop, lowest priority first, as one string so the effect can depend on it.
+    const droppableKey = stacked
+        ? ""
+        : visibleColumns
+            .filter((column) => column.columnDef.meta?.priority !== undefined)
+            .sort((left, right) => (left.columnDef.meta?.priority ?? 0) - (right.columnDef.meta?.priority ?? 0))
+            .map((column) => column.id)
+            .join(" ");
+    const shownColumns = visibleColumns.filter((column) => stacked || !dropped.has(column.id));
+    const shownKey = shownColumns.map((column) => column.id).join(" ");
+    useLayoutEffect(() => {
+        const frame = frameRef.current;
+        if (!frame)
+            return;
+        const observer = new ResizeObserver(([entry]) => setFrameWidth(entry.contentRect.width));
+        observer.observe(frame);
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        const frame = frameRef.current;
+        const grid = gridRef.current;
+        if (!frame || !grid || frameWidth === 0)
+            return;
+        grid.style.setProperty("--data-grid-sticky-offset", `${selectHeadRef.current?.offsetWidth ?? 0}px`);
+        const droppable = droppableKey ? droppableKey.split(" ") : [];
+        if (droppable.length === 0)
+            return;
+        const available = frame.clientWidth;
+        const needed = grid.offsetWidth;
+        if (needed > available + 1) {
+            const next = droppable.find((id) => !dropped.has(id));
+            if (next)
+                setDropped(new Map(dropped).set(next, needed));
+            return;
+        }
+        const restorable = [...droppable].reverse().find((id) => dropped.has(id));
+        const neededWith = restorable === undefined ? undefined : dropped.get(restorable);
+        if (restorable !== undefined && neededWith !== undefined && neededWith <= available) {
+            const next = new Map(dropped);
+            next.delete(restorable);
+            setDropped(next);
+        }
+        // Re-measured when the width, the columns on show or the rows change; it settles once
+        // nothing more drops or comes back.
+    }, [frameWidth, droppableKey, shownKey, dropped, data, loading]);
+    const foldedInto = new Map();
+    for (const column of visibleColumns) {
+        const target = column.columnDef.meta?.foldInto;
+        if (!target || stacked || !dropped.has(column.id))
+            continue;
+        foldedInto.set(target, [...(foldedInto.get(target) ?? []), column]);
+    }
+    const selectable = enableRowSelection !== undefined && enableRowSelection !== false;
+    const canSelect = (row) => typeof enableRowSelection === "function" ? enableRowSelection(row) : selectable;
+    const rows = table.getRowModel().rows;
+    const selectableIds = rows.filter((row) => canSelect(row.original)).map((row) => row.id);
+    const setSelected = (ids, selected) => {
+        const next = Object.fromEntries(Object.entries(rowSelection).filter(([id]) => selected || !ids.includes(id)));
+        if (selected)
+            for (const id of ids)
+                next[id] = true;
+        setRowSelection(next);
+    };
+    const selectionOf = (ids) => {
+        const count = ids.filter((id) => rowSelection[id]).length;
+        return count === 0 ? "none" : count === ids.length ? "all" : "some";
+    };
+    const allSelected = selectionOf(selectableIds);
+    const rowLinkColumnId = shownColumns.find((column) => column.columnDef.meta?.rowLink)?.id ?? shownColumns[0]?.id;
+    const stickyColumnId = shownColumns[0]?.columnDef.meta?.sticky === "start" ? shownColumns[0].id : undefined;
+    const template = [
+        ...(selectable ? ["max-content"] : []),
+        ...shownColumns.map((column) => trackOf(column.columnDef.meta)),
+        ...(rowActions ? ["max-content"] : []),
+    ].join(" ");
+    const columnCount = shownColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+    const pressable = Boolean(getRowHref || onRowClick);
+    const [filterColumnId, setFilterColumnId] = useState(null);
+    const headRefs = useRef(new Map());
+    const filterColumn = shownColumns.find((column) => column.id === filterColumnId);
+    const filterField = filterColumn?.columnDef.meta?.filter;
+    const pressRow = (event, row, href) => {
+        // A portalled menu or dialog in a cell still bubbles its clicks here through React, though
+        // its DOM sits outside the row; only a click on the row itself counts, and not on its controls.
+        const target = event.target;
+        if (!(target instanceof Element) || !event.currentTarget.contains(target))
+            return;
+        if (event.defaultPrevented || getSelection()?.type === "Range")
+            return;
+        if (target.closest(interactiveSelector))
+            return;
+        if (onRowClick && !hasModifier(event)) {
+            onRowClick(row, event);
+            return;
+        }
+        if (!href)
+            return;
+        const anchor = event.currentTarget.querySelector("a[data-row-link]");
+        if (anchor instanceof HTMLAnchorElement) {
+            anchor.dispatchEvent(new globalThis.MouseEvent("click", {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+                button: event.button,
+                altKey: event.altKey,
+                ctrlKey: event.ctrlKey,
+                metaKey: event.metaKey,
+                shiftKey: event.shiftKey,
+            }));
+        }
+        else
+            window.location.assign(href);
+    };
+    // A plain click on the row's link presses the row when it has `onRowClick`; a modified one
+    // still opens the link, such as in a new tab.
+    const pressRowLink = (event, row) => {
+        if (!onRowClick || hasModifier(event))
+            return;
+        if (!(event.target instanceof Element) || !event.target.closest("a[data-row-link]"))
+            return;
+        event.preventDefault();
+        onRowClick(row, event);
+    };
+    const openOnKey = (event, row) => {
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        if (onRowClick)
+            onRowClick(row, event);
+        else
+            event.currentTarget.querySelector("a[data-row-link]")?.click();
+    };
+    // The body as drawn, group lines and rows in order, so the list keys and the virtualizer agree.
+    const groups = [];
+    if (groupBy) {
+        for (const tableRow of rows) {
+            const key = groupBy(tableRow.original);
+            const group = groups.find((existing) => existing.key === key);
+            if (group)
+                group.rows.push(tableRow);
+            else
+                groups.push({ key, rows: [tableRow] });
+        }
+    }
+    const bodyItems = groupBy
+        ? groups.flatMap((group) => [
+            { kind: "group", key: `group:${group.key}`, group },
+            ...group.rows.map((row) => ({ kind: "row", key: row.id, row })),
+        ])
+        : rows.map((row) => ({ kind: "row", key: row.id, row }));
+    const rowIds = bodyItems.flatMap((item) => (item.kind === "row" ? [item.row.id] : []));
+    // Long lists draw only the rows near the view, between two spacers, in whichever element
+    // scrolls them: the frame for a `fill` list, else the nearest scrolling ancestor.
+    const [scroller, setScroller] = useState(null);
+    const [scrollMargin, setScrollMargin] = useState(0);
+    useLayoutEffect(() => {
+        const frameElement = frameRef.current;
+        if (!virtualize || !frameElement)
+            return;
+        const element = fill ? frameElement : scrollingAncestor(frameElement);
+        setScroller(element);
+        const head = gridRef.current?.querySelector("[role=row]:has([role=columnheader])");
+        const gridTop = gridRef.current?.getBoundingClientRect().top ?? 0;
+        setScrollMargin(gridTop - element.getBoundingClientRect().top + element.scrollTop + (head?.offsetHeight ?? 0));
+    }, [virtualize, fill, frameWidth, hideHeader, bodyItems.length]);
+    const virtualizer = useVirtualizer({
+        count: bodyItems.length,
+        getScrollElement: () => scroller,
+        estimateSize: () => (density === "compact" ? 37 : 53),
+        getItemKey: (index) => bodyItems[index]?.key ?? index,
+        overscan: 10,
+        scrollMargin,
+        enabled: virtualize && scroller !== null,
+    });
+    const virtualItems = virtualize ? virtualizer.getVirtualItems() : [];
+    // The list keys move through rows in that order; a row scrolled out of a virtualized list is
+    // scrolled back in, and focused once it is drawn.
+    const cursorRowId = useRef(null);
+    const anchorRowId = useRef(null);
+    const pendingFocusId = useRef(null);
+    const rowElement = (id) => gridRef.current?.querySelector(`[role=row][data-row-id="${CSS.escape(id)}"]`);
+    useLayoutEffect(() => {
+        const id = pendingFocusId.current;
+        const element = id === null ? null : rowElement(id);
+        if (!element)
+            return;
+        pendingFocusId.current = null;
+        element.focus();
+    });
+    const focusRow = (id) => {
+        cursorRowId.current = id;
+        const element = rowElement(id);
+        if (element)
+            return element.focus();
+        pendingFocusId.current = id;
+        virtualizer.scrollToIndex(bodyItems.findIndex((item) => item.key === id), { align: "auto" });
+    };
+    const cursorId = () => {
+        // A row still on its way into view is where the cursor already is.
+        if (pendingFocusId.current !== null)
+            return pendingFocusId.current;
+        const focused = document.activeElement?.closest("[role=row][data-row-id]");
+        if (focused && gridRef.current?.contains(focused))
+            return focused.dataset.rowId ?? null;
+        if (cursorRowId.current !== null && rowIds.includes(cursorRowId.current))
+            return cursorRowId.current;
+        return activeRowId ?? null;
+    };
+    const moveCursor = (step) => {
+        const current = cursorId();
+        const index = current === null || !rowIds.includes(current)
+            ? step === 1
+                ? 0
+                : rowIds.length - 1
+            : rowIds.indexOf(current) + step;
+        const next = rowIds[Math.min(rowIds.length - 1, Math.max(0, index))];
+        if (next !== undefined)
+            focusRow(next);
+    };
+    const toggleCursorRow = () => {
+        const id = cursorId();
+        const row = rows.find((candidate) => candidate.id === id);
+        if (id === null || !row || !canSelect(row.original))
+            return;
+        anchorRowId.current = id;
+        setSelected([id], !rowSelection[id]);
+    };
+    const selectToCursor = () => {
+        const end = rowIds.indexOf(cursorId() ?? "");
+        if (end === -1)
+            return;
+        const start = anchorRowId.current === null ? end : rowIds.indexOf(anchorRowId.current);
+        const range = rowIds.slice(Math.min(start, end), Math.max(start, end) + 1);
+        setSelected(range.filter((id) => selectableIds.includes(id)), true);
+        anchorRowId.current = rowIds[end] ?? null;
+    };
+    useHotkeys([
+        {
+            hotkey: "J",
+            callback: () => moveCursor(1),
+            options: {
+                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.nextRow },
+            },
+        },
+        {
+            hotkey: "K",
+            callback: () => moveCursor(-1),
+            options: {
+                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.previousRow },
+            },
+        },
+        {
+            hotkey: "X",
+            callback: toggleCursorRow,
+            options: {
+                enabled: selectable,
+                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.selectRow },
+            },
+        },
+        {
+            hotkey: "Shift+X",
+            callback: selectToCursor,
+            options: {
+                enabled: selectable,
+                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.selectRange },
+            },
+        },
+        {
+            hotkey: "Escape",
+            callback: () => setRowSelection({}),
+            options: {
+                enabled: Object.values(rowSelection).some(Boolean),
+                // Escape in a field is the field's, such as clearing a search.
+                ignoreInputs: true,
+                // The shell's Escape closes its phone menu, which covers the list.
+                conflictBehavior: "allow",
+                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.clearSelection },
+            },
+        },
+    ], { enabled: keyboardNavigation });
+    const cellClass = (column) => cx(cell, column.columnDef.meta?.truncate && truncateCell, column.id === stickyColumnId && pinnedCell);
+    const renderCellContent = (tableRow, column) => {
+        const cells = tableRow.getAllCells();
+        const content = cellContentOf(cells, column.id);
+        const folded = foldedInto.get(column.id);
+        if (!folded)
+            return content;
+        return (_jsxs("span", { className: foldedStack, children: [_jsx("span", { className: foldedPrimary, children: content }), _jsx("span", { className: foldedLine, children: folded.map((foldedColumn) => (_jsx("span", { children: cellContentOf(cells, foldedColumn.id) }, foldedColumn.id))) })] }));
+    };
+    const renderRow = (tableRow, measured) => {
+        const original = tableRow.original;
+        const href = getRowHref?.(original);
+        const selected = Boolean(rowSelection[tableRow.id]);
+        const active = activeRowId === tableRow.id;
+        const actions = rowActions?.(original);
+        const detail = renderRowDetail?.(original);
+        const firstValue = shownColumns[0] && tableRow.getValue(shownColumns[0].id);
+        const rowName = typeof firstValue === "string" || typeof firstValue === "number"
+            ? String(firstValue)
+            : tableRow.id;
+        return (_jsxs("div", { ref: measured?.ref, "data-index": measured?.index, role: "row", className: bodyRow, "data-row-id": tableRow.id, "data-pressable": pressable || undefined, "data-selected": selected || undefined, "data-active": active || undefined, "aria-current": active || undefined, tabIndex: onRowClick && !href ? 0 : keyboardNavigation ? -1 : undefined, onClick: pressable ? (event) => pressRow(event, original, href) : undefined, onClickCapture: href && onRowClick ? (event) => pressRowLink(event, original) : undefined, onKeyDown: onRowClick || (keyboardNavigation && href)
+                ? (event) => openOnKey(event, original)
+                : undefined, onFocus: keyboardNavigation
+                ? (event) => {
+                    if (event.target === event.currentTarget)
+                        cursorRowId.current = tableRow.id;
+                }
+                : undefined, children: [selectable && (_jsx("div", { role: "cell", className: cx(cell, selectCell, stickySelectColumn && pinnedCell), children: canSelect(original) && (_jsx(Checkbox, { "aria-label": labels.selectRow(rowName), checked: selected, onCheckedChange: (checked) => setSelected([tableRow.id], checked) })) })), shownColumns.map((column) => (_jsx("div", { role: "cell", className: cellClass(column), "data-align": column.columnDef.meta?.align, children: href && column.id === rowLinkColumnId ? (renderRowLink ? (cloneElement(renderRowLink(href), {
+                        ...rowLinkMarker,
+                        children: renderCellContent(tableRow, column),
+                    })) : (_jsx("a", { href: href, ...rowLinkMarker, children: renderCellContent(tableRow, column) }))) : (renderCellContent(tableRow, column)) }, column.id))), rowActions && (_jsx("div", { role: "cell", className: cx(cell, actionsCell), "data-row-actions": "", children: actions })), detail !== undefined && detail !== null && detail !== false && (_jsx("div", { role: "cell", "aria-colspan": columnCount, className: detailCell, children: detail }))] }, tableRow.id));
+    };
+    const drawGroupRow = (group, measured) => {
+        const groupRowIds = group.rows
+            .filter((tableRow) => canSelect(tableRow.original))
+            .map((tableRow) => tableRow.id);
+        const details = {
+            key: group.key,
+            rows: group.rows.map((tableRow) => tableRow.original),
+            rowIds: groupRowIds,
+            selected: selectionOf(groupRowIds),
+            toggleSelected: (value) => setSelected(groupRowIds, value),
+        };
+        const heading = renderGroupRow ? renderGroupRow(details) : group.key;
+        return (_jsxs("div", { ref: measured?.ref, "data-index": measured?.index, role: "row", className: groupRow, children: [selectable && (_jsx("div", { role: "cell", className: cx(cell, selectCell, stickySelectColumn && pinnedCell), children: groupRowIds.length > 0 && (_jsx(Checkbox, { "aria-label": labels.selectRow(group.key), checked: details.selected === "all", indeterminate: details.selected === "some", onCheckedChange: (checked) => details.toggleSelected(checked) })) })), _jsx("div", { role: "cell", "aria-colspan": columnCount - (selectable ? 1 : 0), className: groupCell, style: { gridColumn: selectable ? "2 / -1" : "1 / -1" }, children: heading })] }, `group:${group.key}`));
+    };
+    const drawBodyItem = (item, measured) => item.kind === "group" ? drawGroupRow(item.group, measured) : renderRow(item.row, measured);
+    const drawBody = () => {
+        if (!virtualize)
+            return bodyItems.map((item) => drawBodyItem(item));
+        const first = virtualItems[0];
+        const last = virtualItems[virtualItems.length - 1];
+        const before = first ? first.start - scrollMargin : 0;
+        const after = last ? virtualizer.getTotalSize() - (last.end - scrollMargin) : 0;
+        return (_jsxs(_Fragment, { children: [before > 0 && _jsx("div", { "aria-hidden": "true", className: spacerRow, style: { height: before } }), virtualItems.map((virtualItem) => {
+                    const item = bodyItems[virtualItem.index];
+                    return (item &&
+                        drawBodyItem(item, { index: virtualItem.index, ref: virtualizer.measureElement }));
+                }), after > 0 && _jsx("div", { "aria-hidden": "true", className: spacerRow, style: { height: after } })] }));
+    };
+    const headerCell = (column) => {
+        const meta = column.columnDef.meta;
+        const sorted = column.getIsSorted();
+        const name = meta?.label ??
+            (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
+        const content = _jsx(table.FlexRender, { header: headerOf(table.getFlatHeaders(), column.id) });
+        const menuItems = [];
+        if (headerMenu && meta?.headerMenu !== false) {
+            if (column.getCanSort()) {
+                const [ascending, descending] = meta?.sortLabels ?? [
+                    labels.sortAscending,
+                    labels.sortDescending,
+                ];
+                menuItems.push({
+                    label: ascending,
+                    icon: _jsx(SortAscendingIcon, { className: icon({ size: "small" }) }),
+                    checked: sorted === "asc",
+                    onSelect: () => setSorting([{ id: column.id, desc: false }]),
+                }, {
+                    label: descending,
+                    icon: _jsx(SortDescendingIcon, { className: icon({ size: "small" }) }),
+                    checked: sorted === "desc",
+                    onSelect: () => setSorting([{ id: column.id, desc: true }]),
+                });
+            }
+            if (meta?.filter && onFiltersChange) {
+                if (menuItems.length > 0)
+                    menuItems.push({ separator: true });
+                menuItems.push({
+                    label: labels.filterBy(name),
+                    icon: _jsx(FunnelSimpleIcon, { className: icon({ size: "small" }) }),
+                    onSelect: () => setFilterColumnId(column.id),
+                });
+            }
+            if (!meta?.locked && column.getCanHide()) {
+                if (menuItems.length > 0)
+                    menuItems.push({ separator: true });
+                menuItems.push({
+                    label: labels.hideColumn,
+                    icon: _jsx(EyeSlashIcon, { className: icon({ size: "small" }) }),
+                    onSelect: () => setColumnVisibility({ ...columnVisibility, [column.id]: false }),
+                });
+            }
+        }
+        const caret = sorted === "desc" ? (_jsx(CaretDownIcon, { className: icon({ size: "small" }) })) : (_jsx(CaretUpIcon, { className: icon({ size: "small" }) }));
+        return (_jsx("div", { role: "columnheader", className: cx(headCell, column.id === stickyColumnId && pinnedCell), "data-align": meta?.align, "data-truncate": meta?.truncate || undefined, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, ref: (element) => {
+                if (element)
+                    headRefs.current.set(column.id, element);
+                else
+                    headRefs.current.delete(column.id);
+            }, children: menuItems.length > 0 ? (_jsx(Menu, { align: meta?.align === "end" ? "end" : "start", trigger: _jsxs("button", { type: "button", className: headButton, "data-sorted": sorted || undefined, children: [content, caret] }), items: menuItems })) : column.getCanSort() ? (_jsxs("button", { type: "button", className: headButton, "data-sorted": sorted || undefined, "data-toggle": "", onClick: column.getToggleSortingHandler(), children: [content, caret] })) : (content) }, column.id));
+    };
+    const showEmpty = !loading && rows.length === 0;
+    const isFiltered = filtered ?? (filters !== undefined && filters.length > 0);
+    const emptyContent = isFiltered && noResults !== undefined ? noResults : (empty ?? labels.nothingToShow);
+    return (_jsxs("div", { ref: frameRef, className: cx(frame, frameClassName), "data-ciridae-ui": "", "data-variant": variant, "data-density": density, "data-fill": fill || undefined, "data-stacked": narrowScreenLayout === "stacked" || undefined, children: [_jsxs("div", { ...props, ref: gridRef, role: "table", "aria-busy": loading || undefined, className: cx(grid, className), style: { ...style, gridTemplateColumns: template }, children: [!hideHeader && (_jsxs("div", { role: "row", className: headRow, children: [selectable && (_jsx("div", { ref: selectHeadRef, role: "columnheader", className: cx(headCell, selectCell, stickySelectColumn && pinnedCell), children: _jsx(Checkbox, { "aria-label": labels.selectAll, checked: allSelected === "all" && selectableIds.length > 0, indeterminate: allSelected === "some", disabled: loading || selectableIds.length === 0, onCheckedChange: (checked) => setSelected(selectableIds, checked) }) })), shownColumns.map(headerCell), rowActions && (_jsx("div", { role: "columnheader", className: headCell, children: _jsx("span", { className: visuallyHidden, children: labels.actions }) }))] })), loading ? (skeletonRows.map((rowIndex) => (_jsxs("div", { role: "row", className: bodyRow, "data-skeleton": "", children: [selectable && _jsx("div", { role: "cell", className: cx(cell, selectCell) }), shownColumns.map((column, columnIndex) => (_jsx("div", { role: "cell", className: cellClass(column), "data-align": column.columnDef.meta?.align, children: column.columnDef.meta?.skeleton ?? (_jsx(Skeleton, { shape: "text", style: {
+                                        width: skeletonWidths[(rowIndex + columnIndex) % skeletonWidths.length],
+                                    } })) }, column.id))), rowActions && _jsx("div", { role: "cell", className: cell })] }, rowIndex)))) : showEmpty ? (_jsx("div", { role: "row", className: emptyRow, children: _jsx("div", { role: "cell", "aria-colspan": columnCount, className: emptyCell, children: emptyContent }) })) : (drawBody())] }), footer, filterColumn && filterField && onFiltersChange && (_jsx(Popover, { open: true, onOpenChange: (open) => {
+                    if (!open)
+                        setFilterColumnId(null);
+                }, anchor: headRefs.current.get(filterColumn.id) ?? null, density: "compact", children: _jsx("div", { className: columnFilter, children: _jsx(FilterValueEditor, { field: filterField, value: filters?.find((filter) => filter.field === filterField.key), onChange: (filter) => onFiltersChange(replaceFilter(filters ?? [], filter)) }) }) }))] }));
+}
+/**
+ * `DataGrid` with the plain look: flush with its section, heads in caps, rows that light on hover
+ * when they lead somewhere.
+ */
+export function Table({ variant = "plain", initialSorting, emptyMessage, ...props }) {
+    return (_jsx(DataGrid, { variant: variant, defaultSorting: initialSorting, empty: emptyMessage, ...props }));
+}
+const emptySorting = [];
+const emptySelection = {};
+const emptyVisibility = {};
+const emptyOrder = [];
+const skeletonRows = [0, 1, 2, 3, 4];
+const skeletonWidths = ["70%", "45%", "85%", "55%"];
+/** What takes a click of its own inside a row, so pressing it leaves the row alone. */
+const interactiveSelector = "a:not([data-row-link]), button, input, label, select, textarea, [role=button], [role=checkbox], [role=combobox], [role=menuitem], [contenteditable=true]";
+/** Marks the row's own anchor among any links its cells hold. */
+const rowLinkMarker = { "data-row-link": "" };
+function hasModifier(event) {
+    return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+}
+/** The narrowest a truncating column shrinks to when it names no `minWidth`. */
+const truncatedColumnMinimum = 96;
+/*
+ * A column's track. Cells set `min-width: 0` so their text can truncate, which would let a plain
+ * `auto` track shrink to nothing and draw columns over each other; a column that does not truncate
+ * keeps its content's least width, so a list too wide for its frame scrolls instead.
+ */
+function trackOf(meta) {
+    if (typeof meta?.width === "number")
+        return `${meta.width}px`;
+    if (typeof meta?.width === "string")
+        return meta.width;
+    if (meta?.truncate || meta?.minWidth !== undefined) {
+        return `minmax(${meta.minWidth ?? truncatedColumnMinimum}px, 1fr)`;
+    }
+    return "minmax(min-content, auto)";
+}
+function headerOf(headers, columnId) {
+    const header = headers.find((candidate) => candidate.column.id === columnId);
+    if (!header)
+        throw new Error(`Header for column ${columnId} not found`);
+    return header;
+}
+/**
+ * Calls the column's cell renderer. TanStack's `FlexRender` mounts a renderer function as a
+ * component, so an inline `cell` recreated on each render would remount its cell and drop state
+ * such as an open row menu or dialog.
+ */
+function cellContentOf(cells, columnId) {
+    const tableCell = cells.find((candidate) => candidate.column.id === columnId);
+    if (!tableCell)
+        return null;
+    const render = tableCell.column.columnDef.cell;
+    // TanStack types a cell template's result as `any`; a cell renders React content.
+    const content = typeof render === "function" ? render(tableCell.getContext()) : render;
+    return content;
+}
+/** Numbers compare numerically; everything else, including dates as ISO strings, in natural order. */
+function compareSortValues(left, right, columnId) {
+    const a = left.getValue(columnId) ?? "";
+    const b = right.getValue(columnId) ?? "";
+    return typeof a === "number" && typeof b === "number"
+        ? a - b
+        : String(a).localeCompare(String(b), undefined, { numeric: true });
+}
+// The frame owns the sideways scroll; a `fill` list also owns the vertical one and pins its head.
+// The surface a pinned cell rebuilds: the list's own surfaces are translucent, so a pinned cell
+// redraws them on the solid canvas, or the columns scrolling under it would show through.
+const frame = css({
+    "--row-gap-inline": "token(spacing.layout.pageGap)",
+    "--row-pad-inline": "token(spacing.panel.comfortable)",
+    "--row-pad-block": "token(spacing.panel.default)",
+    "--pinned-background": "token(colors.bg.canvas)",
+    "--pinned-layers": "inset 0 0 0 999px token(colors.bg.hover), inset 0 0 0 999px token(colors.bg.panel)",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    minWidth: "0",
+    overflowX: "auto",
+    overflowY: "hidden",
+    "&[data-variant=framed]": {
+        border: "1px solid token(colors.border.panel)",
+        borderRadius: "action",
+        background: "bg.hover",
+        _light: {
+            background: "bg.card",
+            "--pinned-background": "token(colors.bg.card)",
+            "--pinned-layers": "none",
+        },
+    },
+    "&[data-variant=framed][data-density=compact]": {
+        "--row-pad-block": "token(spacing.control.compactBlock)",
+    },
+    "&[data-variant=plain]": {
+        "--row-gap-inline": "0px",
+        "--row-pad-inline": "0px",
+        "--row-pad-block": "token(spacing.table.rowBlock)",
+        "--pinned-layers": "inset 0 0 0 999px token(colors.bg.panel)",
+    },
+    "&[data-variant=plain][data-density=compact]": {
+        "--row-pad-block": "token(spacing.table.compactRowBlock)",
+    },
+    "&[data-fill]": { flex: "1", minHeight: "0", overflowY: "auto" },
+    _phone: { "--row-pad-inline": "token(spacing.panel.default)" },
+});
+const grid = css({
+    display: "grid",
+    alignContent: "start",
+    columnGap: "var(--row-gap-inline)",
+    // As wide as the frame, or as its columns' least widths when those outgrow it, so it scrolls.
+    width: "100%",
+    minWidth: "min-content",
+    color: "fg.primary",
+    fontSize: "body",
+    letterSpacing: "compact",
+    "[data-variant=plain] > &": { lineHeight: "compact" },
+    // On a phone a stacked list lays each row out as one block: the first cell takes the whole
+    // first line and the others wrap under it, an end-aligned one pushed to the far edge.
+    _phone: {
+        "[data-stacked] > &": {
+            display: "block",
+            minWidth: "0",
+            "& > [role=row]": {
+                display: "flex",
+                flexWrap: "wrap",
+                alignItems: "center",
+                columnGap: "layout.controlGap",
+                rowGap: "layout.tightGap",
+            },
+            "& > [role=row]:first-child:has([role=columnheader])": { srOnly: true },
+            "& [role=cell]": { display: "block", padding: "0", minWidth: "0" },
+            "& [role=cell]:first-child": { flexBasis: "100%" },
+            "& [role=cell][data-truncate]": { whiteSpace: "normal", overflowWrap: "anywhere" },
+            "& [role=cell][data-align=end]": { marginInlineStart: "auto" },
+        },
+    },
+});
+const rowBase = {
+    display: "grid",
+    gridTemplateColumns: "subgrid",
+    gridColumn: "1 / -1",
+    alignItems: "center",
+    paddingInline: "var(--row-pad-inline)",
+    borderBottom: "1px solid token(colors.border.panel)",
+    "[data-variant=plain] &": { borderBottomColor: "border.subtle" },
+};
+const headRow = css(rowBase, {
+    color: "fg.primary",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    "[data-variant=plain] &": {
+        color: "fg.muted",
+        fontSize: "caption",
+        letterSpacing: "label",
+        textTransform: "uppercase",
+    },
+    "[data-fill] &": {
+        position: "sticky",
+        top: "0",
+        zIndex: "3",
+        background: "var(--pinned-background)",
+        boxShadow: "var(--pinned-layers)",
+    },
+});
+// Stands in for the rows a virtualized list leaves undrawn, so the scroll height holds.
+const spacerRow = css({ gridColumn: "1 / -1" });
+const bodyRow = css(rowBase, {
+    position: "relative",
+    outline: "none",
+    "&:last-child": { borderBottom: "0" },
+    "[data-variant=framed][data-density=default] &": {
+        minHeight: "calc(token(sizes.control.compact) + var(--row-pad-block) * 2 + 1px)",
+    },
+    // The row's wash is one layer over every cell, the pinned ones included, so they tint together.
+    _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        zIndex: "2",
+        background: "var(--row-wash, transparent)",
+        pointerEvents: "none",
+        transitionProperty: "background",
+        transitionDuration: "fast",
+    },
+    "&[data-pressable]": { cursor: "pointer" },
+    "&[data-pressable]:hover": { "--row-wash": "token(colors.bg.rowHover)" },
+    "&:is([data-selected], [data-active])": { "--row-wash": "token(colors.bg.selected)" },
+    "&:is([data-selected], [data-active]):hover": { "--row-wash": "token(colors.bg.selectedHover)" },
+    _focusVisible: { focusRing: "inset", "--row-wash": "token(colors.bg.rowHover)" },
+    // Its anchor stands for the row and sits in a cell that may clip, so the row draws the ring.
+    "&:has(a[data-row-link]:focus-visible)": {
+        focusRing: "inset",
+        "--row-wash": "token(colors.bg.rowHover)",
+    },
+    "& a[data-row-link]:focus-visible": { outline: "none" },
+    "& a[data-row-link]:hover": { textDecoration: "none" },
+    // Row actions show while the row is pointed at, focused, ticked or open, and always on touch.
+    "& [data-row-actions] > *": {
+        opacity: "0",
+        transitionProperty: "opacity",
+        transitionDuration: "fast",
+    },
+    "&:is(:hover, :focus-within, [data-selected], [data-active]) [data-row-actions] > *, & [data-row-actions]:has([data-popup-open]) > *": { opacity: "1" },
+    "@media (hover: none)": { "& [data-row-actions] > *": { opacity: "1" } },
+});
+const groupRow = css(rowBase, {
+    minHeight: "40px",
+    background: "bg.field",
+    "&:last-child": { borderBottom: "0" },
+});
+const emptyRow = css({ gridColumn: "1 / -1" });
+const cellBase = {
+    minWidth: "0",
+    paddingBlock: "var(--row-pad-block)",
+    "[data-variant=plain] &": { paddingInline: "table.cell" },
+    "&[data-align=end]": { textAlign: "end", justifyContent: "flex-end" },
+    "&[data-align=end] > [data-shape]": { marginInlineStart: "auto" },
+};
+const cell = css(cellBase, {
+    fontWeight: "medium",
+    "[data-variant=plain] &": { fontWeight: "normal" },
+    "& a": { color: "inherit", textDecoration: "none" },
+    "& a:hover": { textDecoration: "underline" },
+});
+const headCell = css(cellBase, {
+    display: "flex",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    // A truncating column can be narrower than its heading, which then cuts rather than running
+    // into the next column's.
+    "&[data-truncate]": { display: "block", overflow: "hidden", textOverflow: "ellipsis" },
+});
+const truncateCell = css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+});
+const selectCell = css({
+    display: "flex",
+    alignItems: "center",
+    alignSelf: "stretch",
+});
+// Only the pinned column stays put while the rest scroll under it. It reaches over the row's
+// padding and the gap after it, so nothing scrolling under it shows round its edges, and redraws
+// the list's surface on the solid canvas.
+const pinnedCell = css({
+    position: "sticky",
+    zIndex: "1",
+    insetInlineStart: "0",
+    alignSelf: "stretch",
+    display: "flex",
+    alignItems: "center",
+    marginInlineStart: "calc(var(--row-pad-inline) * -1)",
+    marginInlineEnd: "calc(var(--row-gap-inline) * -1)",
+    paddingInlineStart: "var(--row-pad-inline)",
+    paddingInlineEnd: "var(--row-gap-inline)",
+    background: "var(--pinned-background)",
+    boxShadow: "var(--pinned-layers)",
+    "[role=row] > & + &": {
+        insetInlineStart: "var(--data-grid-sticky-offset)",
+        marginInlineStart: "0",
+        paddingInlineStart: "0",
+    },
+    "[role=columnheader]&": { zIndex: "4" },
+});
+const actionsCell = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "layout.tightGap",
+});
+const groupCell = css({
+    minWidth: "0",
+    paddingBlock: "panel.compact",
+    fontSize: "body",
+    fontWeight: "medium",
+});
+const detailCell = css({
+    gridColumn: "1 / -1",
+    minWidth: "0",
+    marginTop: "calc(var(--row-pad-block) * -1)",
+    paddingBottom: "var(--row-pad-block)",
+});
+const emptyCell = css({
+    padding: "panel.roomy",
+    textAlign: "center",
+    color: "fg.muted",
+});
+const foldedStack = css({ display: "grid", gap: "layout.tightGap", minWidth: "0" });
+const foldedPrimary = css({ minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" });
+const foldedLine = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    columnGap: "layout.controlGap",
+    rowGap: "layout.tightGap",
+    minWidth: "0",
+    color: "fg.muted",
+    fontSize: "code",
+    "& > *": { minWidth: "0" },
+});
+const headButton = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    maxWidth: "100%",
+    padding: "none",
+    border: "0",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+    letterSpacing: "inherit",
+    textTransform: "inherit",
+    cursor: "pointer",
+    borderRadius: "control",
+    _focusVisible: { focusRing: "outer" },
+    "& svg": { flexShrink: "0", color: "fg.muted" },
+    "&[data-sorted] svg": { color: "fg.primary" },
+    // A plain list's sort toggle shows its caret only while pointed at or sorted.
+    // A sort toggle shows its caret only while pointed at or sorted; a head menu's always shows.
+    "&[data-toggle] svg": { opacity: "0", transition: "opacity .15s" },
+    "&[data-toggle]:is(:hover, :focus-visible, [data-sorted]) svg": { opacity: "1" },
+    "[data-align=end] > &": { marginInlineStart: "auto" },
+});
+const columnFilter = css({ display: "flex", flexDirection: "column", width: "260px" });
+const visuallyHidden = css({ srOnly: true });