@mendylanda/ui 0.2.0 → 0.3.0-alpha.1

package/dist/table/state.d.ts

@@ -0,0 +1,31 @@
+import type { ColumnPinningState, ColumnSizingState, ColumnVisibilityState, SortingState } from "@tanstack/react-table";
+import type { TableColumn } from "./columns.js";
+export interface TablePreferences {
+    version: 1;
+    columnOrder: string[];
+    columnVisibility: ColumnVisibilityState;
+    columnSizing: ColumnSizingState;
+    columnPinning: ColumnPinningState;
+}
+export interface PreferenceStorage {
+    read: (key: string) => unknown | Promise<unknown>;
+    write: (key: string, value: TablePreferences) => void | Promise<void>;
+}
+export interface SavedTableView<F = unknown> {
+    id: string;
+    name: string;
+    filters: F;
+    sorting: SortingState;
+    preferences: TablePreferences;
+}
+export type TableSelection<Q = unknown> = {
+    mode: "ids";
+    ids: string[];
+} | {
+    mode: "matching";
+    scope: Q;
+    excludedIds: string[];
+};
+export declare function reconcilePreferences<T extends object>(input: unknown, columns: readonly TableColumn<T>[], defaults?: Partial<TablePreferences>): TablePreferences;
+export declare function csvValue(value: string): string;
+export declare function tsvValue(value: string): string;

package/dist/table/state.js

@@ -0,0 +1,48 @@
+export function reconcilePreferences(input, columns, defaults) {
+    const ids = columns.map((c) => c.id ?? ("accessorKey" in c ? String(c.accessorKey) : ""));
+    const allowed = new Set(ids);
+    const byId = new Map(columns.map((column, index) => [ids[index], column]));
+    const raw = input && typeof input === "object" && "version" in input && input.version === 1
+        ? input
+        : (defaults ?? {});
+    const order = [
+        ...new Set(Array.isArray(raw.columnOrder)
+            ? raw.columnOrder.filter((v) => typeof v === "string" && allowed.has(v))
+            : []),
+    ];
+    const visibility = Object.fromEntries(columns
+        .filter((c) => c.defaultHidden && c.enableHiding !== false)
+        .map((c) => [c.id ?? String("accessorKey" in c ? c.accessorKey : ""), false]));
+    const sizes = {};
+    for (const [id, v] of Object.entries(raw.columnVisibility ?? {}))
+        if (allowed.has(id) && byId.get(id)?.enableHiding !== false && typeof v === "boolean")
+            visibility[id] = v;
+    for (const [id, v] of Object.entries(raw.columnSizing ?? {})) {
+        const column = byId.get(id);
+        if (column && typeof v === "number" && Number.isFinite(v))
+            sizes[id] = Math.min(column.maxSize ?? 1200, Math.max(column.minSize ?? 48, v));
+    }
+    const pin = (side) => [
+        ...new Set((Array.isArray(raw.columnPinning?.[side])
+            ? raw.columnPinning[side]
+            : columns.filter((c) => c.pin === side).map((c) => c.id)).filter((id) => allowed.has(id))),
+    ];
+    const start = pin("start");
+    const ordered = new Set(order);
+    const startSet = new Set(start);
+    return {
+        version: 1,
+        columnOrder: [...order, ...ids.filter((id) => !ordered.has(id))],
+        columnVisibility: visibility,
+        columnSizing: sizes,
+        columnPinning: { start, end: pin("end").filter((id) => !startSet.has(id)) },
+    };
+}
+export function csvValue(value) {
+    // Spreadsheet programs interpret formula prefixes even in quoted CSV fields.
+    const safe = /^[=+@\-\t\r]/.test(value) ? `'${value}` : value;
+    return `"${safe.replaceAll('"', '""')}"`;
+}
+export function tsvValue(value) {
+    return /["\t\r\n]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
+}

package/dist/table/table-controls.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { DataTableInstance } from "./use-data-table.js";
+import type { TableColumn } from "./columns.js";
+import type { SavedTableView } from "./state.js";
+export declare function TableColumnSettings<T extends object>({ table }: {
+    table: DataTableInstance<T>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TablePagination<T extends object>({ table, loading, }: {
+    table: DataTableInstance<T>;
+    loading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function selectionColumn<T extends object>(): TableColumn<T>;
+export declare function TableActionBar({ count, children, onClear, }: {
+    count: number;
+    children: ReactNode;
+    onClear: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function TableSavedViews<F>({ views, onApply, onSave, onDelete, }: {
+    views: readonly SavedTableView<F>[];
+    onApply: (view: SavedTableView<F>) => void;
+    onSave: (name: string) => Promise<unknown>;
+    onDelete?: (view: SavedTableView<F>) => Promise<unknown>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-controls.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronLeft, ChevronRight, SlidersHorizontal } from "lucide-react";
+import { Button } from "../primitives/button.js";
+import { Checkbox } from "../primitives/checkbox.js";
+import { Input } from "../primitives/input.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "../primitives/dropdown-menu.js";
+import { applyTablePreferences } from "./use-data-table.js";
+export function TableColumnSettings({ table }) {
+    const columns = table.getAllLeafColumns();
+    const byId = new Map(columns.map((column) => [column.id, column]));
+    const orderedIds = new Set(table.state.columnOrder);
+    const order = [
+        ...table.state.columnOrder,
+        ...columns.map((column) => column.id).filter((id) => !orderedIds.has(id)),
+    ];
+    function move(id, delta) {
+        const next = [...order], index = next.indexOf(id), destination = index + delta;
+        if (index < 0 || destination < 0 || destination >= next.length)
+            return;
+        next.splice(index, 1);
+        next.splice(destination, 0, id);
+        table.setColumnOrder(next);
+    }
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", "aria-label": "Column settings", children: [_jsx(SlidersHorizontal, { className: "mui-100c22d5776b" }), _jsx("span", { children: "Columns" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "mui-b057efba3283 mui-72b37c1a040d mui-1a26a0d28420", "aria-label": "Column settings", onCloseAutoFocus: (event) => {
+                    // The close animation can finish after the user has already selected a cell.
+                    if (document.activeElement?.closest('[role="grid"]'))
+                        event.preventDefault();
+                }, children: [order.map((id, index) => {
+                        const column = byId.get(id);
+                        if (!column)
+                            return null;
+                        const definition = column.columnDef;
+                        const label = definition.label ?? (typeof definition.header === "string" ? definition.header : id);
+                        return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: label }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), disabled: !column.getCanHide(), onSelect: (event) => event.preventDefault(), onCheckedChange: (value) => column.toggleVisibility(value), children: "Visible" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { disabled: !column.getCanPin(), onSelect: (event) => {
+                                                event.preventDefault();
+                                                column.pin(column.getIsPinned() === "start" ? false : "start");
+                                            }, children: [" ", column.getIsPinned() === "start" ? "Unpin" : "Pin to start"] }), _jsx(DropdownMenuItem, { disabled: !column.getCanPin(), onSelect: (event) => {
+                                                event.preventDefault();
+                                                column.pin(column.getIsPinned() === "end" ? false : "end");
+                                            }, children: column.getIsPinned() === "end" ? "Unpin" : "Pin to end" }), _jsx(DropdownMenuItem, { disabled: index === 0, onSelect: (event) => {
+                                                event.preventDefault();
+                                                move(id, -1);
+                                            }, children: "Move earlier" }), _jsx(DropdownMenuItem, { disabled: index === order.length - 1, onSelect: (event) => {
+                                                event.preventDefault();
+                                                move(id, 1);
+                                            }, children: "Move later" })] })] }, id));
+                    }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => applyTablePreferences(table, { version: 1, ...table.initialState }), children: "Reset columns" })] })] }));
+}
+export function TablePagination({ table, loading, }) {
+    return (_jsxs("nav", { "data-mendy-ui": "", "aria-label": "Table pagination", className: "mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-307644c34db6 mui-d7db3451d154 mui-b5edc3ea7c91 mui-c74ab393b96d", children: [_jsxs("span", { children: ["Page ", table.state.pagination.pageIndex + 1, table.getPageCount() >= 0 ? ` of ${Math.max(1, table.getPageCount())}` : ""] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", children: [table.state.pagination.pageSize, " rows"] }) }), _jsx(DropdownMenuContent, { children: [10, 20, 50, 100].map((size) => (_jsxs(DropdownMenuItem, { onSelect: () => table.setPageSize(size), children: [size, " rows"] }, size))) })] }), _jsx(Button, { variant: "outline", size: "icon-sm", disabled: loading || !table.getCanPreviousPage(), "aria-label": "Previous page", onClick: () => table.previousPage(), children: _jsx(ChevronLeft, { className: "mui-100c22d5776b" }) }), _jsx(Button, { variant: "outline", size: "icon-sm", disabled: loading || !table.getCanNextPage(), "aria-label": "Next page", onClick: () => table.nextPage(), children: _jsx(ChevronRight, { className: "mui-100c22d5776b" }) })] }));
+}
+export function selectionColumn() {
+    return {
+        id: "_selection",
+        label: "Select rows",
+        size: 44,
+        minSize: 44,
+        maxSize: 44,
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        enableCellSelection: false,
+        pin: "start",
+        exportOptions: false,
+        header: ({ table }) => (_jsx(Checkbox, { "data-mendy-ui": "", "aria-label": "Select loaded rows", checked: table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate"), onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true) })),
+        cell: ({ row }) => (_jsx(Checkbox, { "data-mendy-ui": "", "aria-label": `Select row ${row.id}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (value) => row.toggleSelected(value === true) })),
+    };
+}
+export function TableActionBar({ count, children, onClear, }) {
+    if (!count)
+        return null;
+    return (_jsxs("div", { "data-mendy-ui": "", role: "region", "aria-label": "Selected row actions", className: "mui-964a9431ff49 mui-a5c36273c0f0 mui-fbb62f5cb6fe mui-1752f11474a6 mui-222f930b8752 mui-8cfb5a42ef9f mui-81b198a2db84 mui-faa8a23c68f6 mui-71556df3b421 mui-d7db3451d154 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-0f9e6672913a mui-b5edc3ea7c91 mui-94ea94fde25f", children: [_jsxs("span", { className: "mui-c74ab393b96d", children: [count, " selected"] }), children, _jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Clear selection" })] }));
+}
+export function TableSavedViews({ views, onApply, onSave, onDelete, }) {
+    const [name, setName] = useState("");
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    async function run(action) {
+        setPending(true);
+        setError(null);
+        try {
+            await action();
+            setName("");
+        }
+        catch (reason) {
+            setError(reason instanceof Error ? reason.message : "Could not save changes.");
+        }
+        finally {
+            setPending(false);
+        }
+    }
+    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "outline", children: "Saved views" }) }), _jsx(DropdownMenuContent, { children: views.length ? (views.map((view) => (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: view.name }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { onSelect: () => onApply(view), children: "Apply" }), onDelete && (_jsx(DropdownMenuItem, { disabled: pending, onSelect: () => void run(() => onDelete(view)), children: "Delete" }))] })] }, view.id)))) : (_jsx(DropdownMenuItem, { disabled: true, children: "No saved views" })) })] }), _jsxs("form", { className: "mui-222f930b8752 mui-71556df3b421 mui-074569488cca", onSubmit: (event) => {
+                    event.preventDefault();
+                    if (name.trim() && !pending)
+                        void run(() => onSave(name.trim()));
+                }, children: [_jsx(Input, { "aria-label": "New view name", value: name, onChange: (event) => setName(event.target.value), className: "mui-1fb07b38c63b mui-4ac4ec8dfbce" }), _jsx(Button, { type: "submit", size: "sm", disabled: pending || !name.trim(), children: "Save view" })] }), error && (_jsx("span", { role: "alert", className: "mui-c74ab393b96d mui-887b9502d5c7", children: error }))] }));
+}

package/dist/table/table-feedback.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { TableDataState } from "./table-view.js";
+export declare function TableInitialState({ status, hasRows, loadingState, emptyState, error, retry, }: Pick<TableDataState, "status" | "error" | "retry"> & {
+    hasRows: boolean;
+    loadingState?: ReactNode;
+    emptyState?: ReactNode;
+}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;

package/dist/table/table-feedback.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../primitives/button.js";
+export function TableInitialState({ status, hasRows, loadingState, emptyState, error, retry, }) {
+    if (hasRows)
+        return null;
+    if (status === "loading")
+        return loadingState ?? null;
+    if (status === "error")
+        return (_jsxs("div", { role: "alert", className: "mui-c432836760e3 mui-05ab12448317", children: [error ?? "Could not load rows.", retry && (_jsx(Button, { variant: "outline", size: "sm", onClick: retry, children: "Retry" }))] }));
+    return (_jsx("div", { role: "status", className: "mui-c7902d77ad80 mui-05ab12448317 mui-35f35c41d134", children: emptyState ?? "No results." }));
+}

package/dist/table/table-layout.d.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties } from "react";
+import type { Column } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+import type { DataTableInstance } from "./use-data-table.js";
+/** Keep headers, skeletons, and loaded cells on the same column geometry. */
+export declare function tableLayout<T extends object>(table: DataTableInstance<T>, viewportWidth: number | null, rowHeight: number): {
+    columns: Column<{
+        cellSelectionFeature: import("@tanstack/react-table").TableFeature;
+        columnResizingFeature: import("@tanstack/react-table").TableFeature;
+        columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+        columnPinningFeature: import("@tanstack/react-table").TableFeature;
+        columnSizingFeature: import("@tanstack/react-table").TableFeature;
+        columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+        columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+        columnFacetingFeature: import("@tanstack/react-table").TableFeature;
+        globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+        rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+        rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+        rowSortingFeature: import("@tanstack/react-table").TableFeature;
+        filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+        sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+        paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+        facetedRowModel: (table: import("@tanstack/react-table").Table<any, any>, columnId: string) => () => import("@tanstack/react-table").RowModel<any, any>;
+        facetedUniqueValues: (table: import("@tanstack/react-table").Table<import("@tanstack/react-table").TableFeatures, any>, columnId: string) => () => Map<any, number>;
+        filterFns: {
+            includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+            weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        };
+        sortFns: {
+            alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+            basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+            datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+            text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        };
+    }, T, unknown>[];
+    totalWidth: number;
+    pinningActive: boolean;
+    cellStyle: (column: Column<DataTableFeatures, T>) => CSSProperties;
+};

package/dist/table/table-layout.js

@@ -0,0 +1,51 @@
+/** Keep headers, skeletons, and loaded cells on the same column geometry. */
+export function tableLayout(table, viewportWidth, rowHeight) {
+    const columns = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ];
+    const totalWidth = columns.reduce((sum, column) => sum + column.getSize(), 0);
+    const pinnedWidth = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ].reduce((sum, column) => sum + column.getSize(), 0);
+    // Preserve stored pins, but leave room to reach the middle columns on narrow screens.
+    const pinningActive = (viewportWidth ?? Infinity) >= Math.min(totalWidth, pinnedWidth + 120);
+    const positions = new Map();
+    let offset = 0;
+    for (const column of table.getStartVisibleLeafColumns()) {
+        positions.set(column.id, { side: "left", offset });
+        offset += column.getSize();
+    }
+    offset = 0;
+    for (const column of [...table.getEndVisibleLeafColumns()].reverse()) {
+        positions.set(column.id, { side: "right", offset });
+        offset += column.getSize();
+    }
+    function cellStyle(column) {
+        const pin = pinningActive ? positions.get(column.id) : undefined;
+        return {
+            width: column.getSize(),
+            minWidth: column.getSize(),
+            height: rowHeight,
+            ...(column.id === table.getEndVisibleLeafColumns()[0]?.id
+                ? { marginInlineStart: "auto" }
+                : {}),
+            ...(pin
+                ? {
+                    position: "sticky",
+                    [pin.side]: pin.offset,
+                    zIndex: 2,
+                    ...(column.id === table.getStartVisibleLeafColumns().at(-1)?.id
+                        ? { borderRightWidth: 4 }
+                        : {}),
+                    ...(column.id === table.getEndVisibleLeafColumns()[0]?.id
+                        ? { borderLeftWidth: 4 }
+                        : {}),
+                }
+                : {}),
+        };
+    }
+    return { columns, totalWidth, pinningActive, cellStyle };
+}

package/dist/table/table-loading.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from "react";
+import type { Column } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+/** Loading shares the live column geometry and its single scroll container. */
+export declare function TableLoadingRows<T extends object>({ columns, count, width, rowHeight, cellStyle, }: {
+    columns: Column<DataTableFeatures, T>[];
+    count: number;
+    width: number;
+    rowHeight: number;
+    cellStyle: (column: Column<DataTableFeatures, T>) => CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-loading.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Loading shares the live column geometry and its single scroll container. */
+export function TableLoadingRows({ columns, count, width, rowHeight, cellStyle, }) {
+    return (_jsx("div", { role: "status", "aria-label": "Loading rows", className: "mui-2bf6510f1330", style: { width }, children: Array.from({ length: count }, (_, index) => (_jsx("div", { "aria-hidden": "true", "data-slot": "table-loading-row", className: "mui-222f930b8752 mui-2bf6510f1330", style: { height: rowHeight }, children: columns.map((column) => (_jsx("div", { "data-slot": "table-loading-cell", "data-column-id": column.id, className: "mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a", style: cellStyle(column), children: _jsx("div", { className: "mui-2edce89ef182 mui-56bb14cbd1fe mui-7b3cd77eb999 mui-02e603944040 mui-87ecb59f2d2d mui-237747164b60" }) }, column.id))) }, index))) }));
+}

package/dist/table/table-parts.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { Column, Header, Row } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+import type { DataTableInstance } from "./use-data-table.js";
+export declare function TableHeaderCell<T extends object>({ table, header, index, style, renderHeader, contentClassName, }: {
+    table: DataTableInstance<T>;
+    header: Header<DataTableFeatures, T, unknown>;
+    index: number;
+    style: CSSProperties;
+    renderHeader?: (header: Header<DataTableFeatures, T, unknown>) => ReactNode;
+    contentClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TableBodyRow<T extends object>({ row, rowIndex, start, rowHeight, cellStyle, focusedId, copied, contentClassName, onRowActivate, isRowHighlighted, }: {
+    row: Row<DataTableFeatures, T>;
+    rowIndex: number;
+    start: number;
+    rowHeight: number;
+    cellStyle: (column: Column<DataTableFeatures, T>) => CSSProperties;
+    focusedId?: string;
+    copied: boolean;
+    contentClassName?: string;
+    onRowActivate?: (row: T) => void;
+    isRowHighlighted?: (row: T) => boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-parts.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Button } from "../primitives/button.js";
+import { cn } from "../utils.js";
+import { interactiveSelector } from "./clipboard.js";
+export function TableHeaderCell({ table, header, index, style, renderHeader, contentClassName, }) {
+    const column = header.column;
+    const definition = column.columnDef;
+    const title = definition.label ?? (typeof definition.header === "string" ? definition.header : column.id);
+    const sorted = column.getIsSorted();
+    return (_jsxs("div", { role: "columnheader", "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134 mui-beeef6663906", children: [_jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && _jsx(TableResizeHandle, { table: table, header: header, title: title })] }, column.id));
+}
+export function TableBodyRow({ row, rowIndex, start, rowHeight, cellStyle, focusedId, copied, contentClassName, onRowActivate, isRowHighlighted, }) {
+    const cells = [
+        ...row.getStartVisibleCells(),
+        ...row.getCenterVisibleCells(),
+        ...row.getEndVisibleCells(),
+    ];
+    return (_jsx("div", { role: "row", "aria-rowindex": rowIndex + 2, "aria-selected": row.getIsSelected(), "data-highlighted": isRowHighlighted?.(row.original), "data-index": rowIndex, className: "mui-ad936fcbed63 mui-747355bdc2a2 mui-635702706586 mui-98599e4ee250 mui-222f930b8752 mui-2bf6510f1330 mui-63b29dace366 mui-9d7d1760cd8e", style: { height: rowHeight, transform: `translateY(${start}px)` }, children: cells.map((cell, index) => {
+            const selected = cell.getIsSelected();
+            const definition = cell.column.columnDef;
+            const edge = selected ? cell.getSelectionEdges() : null;
+            return (_jsx("div", { role: "gridcell", "aria-colindex": index + 1, "aria-selected": selected, "data-row-id": row.id, "data-column-id": cell.column.id, tabIndex: focusedId ? (focusedId === cell.id ? 0 : -1) : rowIndex === 0 && index === 0 ? 0 : -1, style: {
+                    ...cellStyle(cell.column),
+                    ...(selected
+                        ? {
+                            boxShadow: `${edge?.top ? "inset 0 2px var(--primary)," : ""}${edge?.bottom ? "inset 0 -2px var(--primary)," : ""}${edge?.left ? "inset 2px 0 var(--primary)," : ""}${edge?.right ? "inset -2px 0 var(--primary)," : ""} inset 0 0 0 0 transparent`,
+                        }
+                        : {}),
+                }, className: cn("mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-d5111d0e9f48 mui-bbe39cfb5cc6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-97b1c00ff005 mui-e6020023567a mui-a47d391255f3 mui-a8719ed8b095 mui-2b1c7d88acff", definition.align === "end" && "mui-307644c34db6 mui-10558dbb3a24", definition.align === "center" && "mui-a503dd374cca mui-05ab12448317", selected && "mui-292affc1f780", selected && copied && "mui-047624ec0c39 mui-d254c96aea74"), onMouseDown: (event) => {
+                    if (event.button !== 0 ||
+                        event.detail > 1 ||
+                        !cell.getCanSelect() ||
+                        event.target.closest(interactiveSelector) ||
+                        window.getSelection()?.toString())
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.currentTarget.focus({ preventScroll: true });
+                    cell.getSelectionStartHandler()(event);
+                }, onMouseEnter: cell.getSelectionExtendHandler(), onDoubleClick: (event) => {
+                    if (!event.target.closest(interactiveSelector))
+                        onRowActivate?.(row.original);
+                }, children: _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84 mui-5a3a4ee420c2", contentClassName), children: flexRender(cell.column.columnDef.cell ?? (() => String(cell.getValue() ?? "")), cell.getContext()) }) }, cell.id));
+        }) }, row.id));
+}
+function TableResizeHandle({ table, header, title, }) {
+    const column = header.column;
+    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": `Resize ${title}`, "aria-orientation": "vertical", "aria-valuenow": Math.round(column.getSize()), "aria-valuemin": column.columnDef.minSize ?? 48, "aria-valuemax": column.columnDef.maxSize ?? 1200, onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: (event) => {
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                event.preventDefault();
+                event.stopPropagation();
+                table.setColumnSizing((sizes) => ({
+                    ...sizes,
+                    [column.id]: Math.min(column.columnDef.maxSize ?? 1200, Math.max(column.columnDef.minSize ?? 48, column.getSize() + (event.key === "ArrowLeft" ? -10 : 10))),
+                }));
+            }
+        }, className: "mui-747355bdc2a2 mui-eb9e48c5dda9 mui-a74c4477017c mui-418e44ad4f9e mui-d4ea834145ae mui-2194d094b585 mui-739a9a000791 mui-4273133a876a mui-2f669cfad5aa mui-2e357972fc10" }));
+}
+function TableHeaderContent({ header, renderHeader, title, }) {
+    const column = header.column;
+    const definition = column.columnDef;
+    const sorted = column.getIsSorted();
+    return renderHeader ? (renderHeader(header)) : typeof definition.header === "function" ? (flexRender(definition.header, header.getContext())) : !column.getCanSort() ? (_jsx("span", { className: "mui-496aca80e4d8 mui-5a3a4ee420c2", title: title, children: title })) : (_jsxs(Button, { variant: "ghost", size: "sm", className: "mui-1fb07b38c63b mui-81b198a2db84 mui-c62ec162662e mui-19e97f3f40e6 mui-16e909e6f01d mui-daaac3fbf55e", onClick: column.getToggleSortingHandler(), title: title, children: [_jsx("span", { className: "mui-5a3a4ee420c2", children: title }), sorted === "asc" ? (_jsx(ArrowUp, { className: "mui-5e34f5313859 mui-27ead27a81df" })) : sorted === "desc" ? (_jsx(ArrowDown, { className: "mui-5e34f5313859 mui-27ead27a81df" })) : null] }));
+}

package/dist/table/table-view.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode, Ref } from "react";
+import type { Header } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+import type { DataTableInstance } from "./use-data-table.js";
+export interface TableDataState {
+    status?: "loading" | "ready" | "error";
+    error?: ReactNode;
+    retry?: () => void;
+    refreshing?: boolean;
+    loadMore?: {
+        available: boolean;
+        loading: boolean;
+        load: () => unknown;
+        error?: ReactNode;
+    };
+}
+export interface TableViewProps<T extends object> extends TableDataState {
+    table: DataTableInstance<T>;
+    label?: string;
+    height?: number | string;
+    rowHeight?: number;
+    className?: string;
+    /** Theme adapter for application-owned renderers, not package controls. */
+    contentClassName?: string;
+    emptyState?: ReactNode;
+    loadingState?: ReactNode;
+    scrollRef?: Ref<HTMLDivElement>;
+    /** Change when the result set changes, not when another page is appended. */
+    queryKey?: string;
+    renderHeader?: (header: Header<DataTableFeatures, T, unknown>) => ReactNode;
+    onRowActivate?: (row: T) => void;
+    isRowHighlighted?: (row: T) => boolean;
+    onCopyError?: (error: unknown) => void;
+}
+export declare function TableView<T extends object>({ table, label, height, rowHeight, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, renderHeader, onRowActivate, isRowHighlighted, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/table/table-view.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { TableHeaderCell, TableBodyRow } from "./table-parts.js";
+import { Button } from "../primitives/button.js";
+import { cn } from "../utils.js";
+import { useViewportWidth } from "./use-viewport-width.js";
+import { tableLayout } from "./table-layout.js";
+import { TableLoadingRows } from "./table-loading.js";
+import { TableInitialState } from "./table-feedback.js";
+import { useTableInteraction } from "./use-table-interaction.js";
+export function TableView({ table, label = "Data table", height = "min(65dvh, 640px)", rowHeight = 44, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, renderHeader, onRowActivate, isRowHighlighted, onCopyError, }) {
+    const container = useRef(null);
+    const setContainer = useCallback((node) => {
+        container.current = node;
+        if (typeof scrollRef === "function")
+            scrollRef(node);
+        else if (scrollRef)
+            scrollRef.current = node;
+    }, [scrollRef]);
+    const rows = table.getRowModel().rows;
+    const virtual = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => container.current,
+        estimateSize: () => rowHeight,
+        getItemKey: (index) => rows[index]?.id ?? index,
+        overscan: 8,
+    });
+    const viewportWidth = useViewportWidth(container);
+    const { columns, totalWidth, pinningActive, cellStyle } = tableLayout(table, viewportWidth, rowHeight);
+    const { announcement, copied, onKeyDown } = useTableInteraction({
+        table,
+        pinningActive,
+        container,
+        queryKey,
+        onRowActivate,
+        onCopyError,
+        scrollToIndex: (index) => virtual.scrollToIndex(index, { align: "auto" }),
+    });
+    const items = virtual.getVirtualItems();
+    const last = items.at(-1)?.index ?? -1;
+    const requested = useRef(null);
+    const load = useRef(loadMore);
+    useLayoutEffect(() => {
+        load.current = loadMore;
+    }, [loadMore]);
+    useEffect(() => {
+        const data = load.current;
+        const requestKey = `${queryKey}:${rows.length}`;
+        if (!data?.available ||
+            data.loading ||
+            data.error ||
+            last < rows.length - 10 ||
+            requested.current === requestKey)
+            return;
+        requested.current = requestKey;
+        Promise.resolve()
+            .then(() => data.load())
+            .catch(() => {
+            requested.current = null;
+        });
+    }, [last, rows.length, queryKey, loadMore?.available, loadMore?.loading, loadMore?.error]);
+    const focused = table.getFocusedCell();
+    const headersById = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
+    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-184ddc11e5f9", children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", "aria-label": label, "aria-rowcount": rows.length + 1, "aria-colcount": columns.length, "aria-busy": status === "loading" || refreshing, style: { height }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", className), onKeyDown: onKeyDown, children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "mui-964a9431ff49 mui-98599e4ee250 mui-4e8f0a87a0dc mui-222f930b8752 mui-2bf6510f1330 mui-bbe39cfb5cc6 mui-5b272f3c5076", style: { width: totalWidth }, children: columns.map((column, index) => (_jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: index, style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName }, column.id))) }), _jsx(TableInitialState, { status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, error: error, retry: retry }), _jsx("div", { role: "rowgroup", className: "mui-d2d9e1f13413 mui-2bf6510f1330", style: { height: virtual.getTotalSize(), width: totalWidth }, children: items.map((item) => (_jsx(TableBodyRow, { row: rows[item.index], rowIndex: item.index, start: item.start, rowHeight: rowHeight, cellStyle: cellStyle, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted }, item.key))) }), rows.length > 0 && status === "error" && (_jsxs("div", { role: "alert", className: "mui-964a9431ff49 mui-30150dd033ab mui-5b272f3c5076 mui-094f5333853b", children: [error ?? "Could not refresh rows.", retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: "Retry" }))] })), loadMore?.available && (_jsxs("div", { className: "mui-964a9431ff49 mui-635702706586 mui-222f930b8752 mui-a503dd374cca mui-b97db4a9f432", children: [_jsx(Button, { size: "sm", variant: "ghost", disabled: loadMore.loading, onClick: () => {
+                                    requested.current = null;
+                                    void Promise.resolve()
+                                        .then(() => loadMore.load())
+                                        .catch(() => {
+                                        requested.current = null;
+                                    });
+                                }, children: loadMore.loading
+                                    ? "Loading more…"
+                                    : loadMore.error
+                                        ? "Retry loading more"
+                                        : "Load more" }), loadMore.error && _jsx("span", { role: "alert", children: loadMore.error })] }))] })] }));
+}

package/dist/table/use-data-table.d.ts

@@ -0,0 +1,24 @@
+import type { TableOptions, ReactTable } from "@tanstack/react-table";
+import type { TableColumn } from "./columns.js";
+import type { DataTableFeatures } from "./features.js";
+import type { PreferenceStorage, TablePreferences } from "./state.js";
+export type DataTableInstance<T extends object> = ReactTable<DataTableFeatures, T>;
+export interface UseDataTableOptions<T extends object> extends Omit<TableOptions<DataTableFeatures, T>, "features" | "data" | "columns" | "manualFiltering" | "manualSorting" | "manualPagination"> {
+    rows: T[];
+    columns: TableColumn<T>[];
+    getRowId: (row: T, index: number) => string;
+    processing?: {
+        filtering?: "client" | "external";
+        sorting?: "client" | "external";
+        pagination?: "client" | "external" | "off";
+    };
+    preferences?: {
+        key: string;
+        scope: string;
+        storage?: PreferenceStorage;
+        onError?: (error: unknown) => void;
+    };
+}
+export declare function captureTablePreferences<T extends object>(table: DataTableInstance<T>): TablePreferences;
+export declare function applyTablePreferences<T extends object>(table: DataTableInstance<T>, input: unknown): void;
+export declare function useDataTable<T extends object>({ rows, columns, processing, preferences, ...options }: UseDataTableOptions<T>): DataTableInstance<T>;