@mendylanda/ui 0.3.0-alpha.0 → 0.3.0-alpha.10

package/dist/table/table-view.js

@@ -1,14 +1,24 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, 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 { useColumnWindow } from "./use-column-window.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, }) {
+import { useTableResults } from "./use-table-results.js";
+import { useInlineRowSelection } from "./use-inline-row-selection.js";
+import { TableFrame } from "./table-frame.js";
+export function TableView({ table, label = "Data table", height = "auto", layout: layoutMode = "content", footer, rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls = true, onCopyError, }) {
+    const fill = layoutMode === "fill";
+    const { resultKey, hasFilters, clearFilters } = useTableResults(table, queryKey, filters);
+    const autoRowHeight = rowHeightOption === "auto" || Boolean(renderRowDetail);
+    const rowHeight = rowHeightOption === "auto" ? 44 : rowHeightOption;
     const container = useRef(null);
     const setContainer = useCallback((node) => {
         container.current = node;
@@ -18,32 +28,33 @@ export function TableView({ table, label = "Data table", height = "min(65dvh, 64
             scrollRef.current = node;
     }, [scrollRef]);
     const rows = table.getRowModel().rows;
-    const columns = [
-        ...table.getStartVisibleLeafColumns(),
-        ...table.getCenterVisibleLeafColumns(),
-        ...table.getEndVisibleLeafColumns(),
-    ];
+    const getScrollElement = useCallback(() => container.current, []);
+    const estimateSize = useCallback(() => rowHeight, [rowHeight]);
+    const getItemKey = useCallback((index) => rows[index]?.id ?? index, [rows]);
     const virtual = useVirtualizer({
         count: rows.length,
-        getScrollElement: () => container.current,
-        estimateSize: () => rowHeight,
-        getItemKey: (index) => rows[index]?.id ?? index,
+        getScrollElement,
+        estimateSize,
+        getItemKey,
         overscan: 8,
     });
     const viewportWidth = useViewportWidth(container);
-    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 startColumns = table.getStartVisibleLeafColumns();
+    const centerColumns = table.getCenterVisibleLeafColumns();
+    const endColumns = table.getEndVisibleLeafColumns();
+    const sizing = table.state.columnSizing;
+    const layout = useMemo(() => tableLayout(table, viewportWidth, rowHeight), [table, startColumns, centerColumns, endColumns, sizing, viewportWidth, rowHeight]);
+    const { totalWidth, pinningActive } = layout;
+    const { inlineSelection, selectLoaded } = useInlineRowSelection(table, layout.columns, rowSelectionControls);
+    const focused = table.getFocusedCell();
+    const { columns, columnGaps, cellStyle } = useColumnWindow(layout, container, viewportWidth, focused?.column.id, !autoRowHeight);
+    const columnIndexes = useMemo(() => new Map(layout.columns.map((column, index) => [column.id, index])), [layout.columns]);
     const { announcement, copied, onKeyDown } = useTableInteraction({
         table,
         pinningActive,
         container,
-        queryKey,
-        onRowActivate,
+        queryKey: resultKey,
+        onRowActivate: onRowActivate ?? onRowClick,
         onCopyError,
         scrollToIndex: (index) => virtual.scrollToIndex(index, { align: "auto" }),
     });
@@ -54,57 +65,53 @@ export function TableView({ table, label = "Data table", height = "min(65dvh, 64
     useLayoutEffect(() => {
         load.current = loadMore;
     }, [loadMore]);
+    useEffect(() => {
+        requested.current = null;
+    }, [resultKey]);
     useEffect(() => {
         const data = load.current;
-        const requestKey = `${queryKey}:${rows.length}`;
         if (!data?.available ||
             data.loading ||
             data.error ||
             last < rows.length - 10 ||
-            requested.current === requestKey)
+            (requested.current?.key === resultKey && requested.current.count === rows.length))
             return;
-        requested.current = requestKey;
+        const element = container.current;
+        // Only measure near the end when another page can actually be requested.
+        // Reading clientHeight on every scroll otherwise forces layout needlessly.
+        const nearEnd = element &&
+            element.scrollTop + element.clientHeight + rowHeight * 10 >=
+                virtual.getTotalSize() + rowHeight;
+        if (!nearEnd)
+            return;
+        requested.current = { key: resultKey, count: rows.length };
         Promise.resolve()
             .then(() => data.load())
             .catch(() => {
             requested.current = null;
         });
-    }, [last, rows.length, queryKey, loadMore?.available, loadMore?.loading, loadMore?.error]);
-    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 } : {}),
-        };
-    }
-    const focused = table.getFocusedCell();
+    }, [
+        last,
+        rows.length,
+        rowHeight,
+        resultKey,
+        loadMore?.available,
+        loadMore?.loading,
+        loadMore?.error,
+        virtual,
+    ]);
     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, 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: () => {
+    return (_jsxs(TableFrame, { layout: layoutMode, stretch: height === "100%", footer: footer, children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
+                    height: fill || height === "auto" ? undefined : height,
+                    maxHeight: !fill && height === "auto" ? "65dvh" : undefined,
+                }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", fill && "mui-410da8dfa8ac mui-7bd5bab6d7f4", 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) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: columnIndexes.get(column.id), style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName, selectLoaded: selectLoaded }, column.id)] }, column.id))) }), _jsx(TableInitialState, { status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, columnGaps: columnGaps, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: !fill && height === "auto"
+                                ? 8
+                                : Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, hasFilters: hasFilters, pageIndex: table.state.pagination.pageIndex, clearFilters: clearFilters, firstPage: () => table.setPageIndex(0), 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, autoRowHeight: autoRowHeight, measureElement: autoRowHeight ? virtual.measureElement : undefined, rowClassName: rowClassName, renderRowDetail: renderRowDetail, detailWidth: viewportWidth ?? totalWidth, cellStyle: cellStyle, columns: columns, columnGaps: columnGaps, columnIndexes: columnIndexes, contentVersion: table.options, contentState: table.state, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowClick: onRowClick, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted, inlineSelection: inlineSelection }, 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-71556df3b421 mui-a503dd374cca mui-074569488cca mui-96b92a971c95 mui-c74ab393b96d mui-35f35c41d134", children: [loadMore.loading ? (_jsxs("div", { role: "status", className: "mui-222f930b8752 mui-71556df3b421 mui-074569488cca", children: [_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "mui-2bd43fb57913 mui-27ead27a81df mui-2c14b55d77e6 mui-237747164b60", children: _jsx("path", { d: "M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12" }) }), _jsx("span", { children: "Loading more\u2026" })] })) : (_jsx(Button, { size: "sm", variant: "ghost", 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 })] }))] })] }));
+                                }, children: loadMore.error ? "Retry loading more" : "Load more" })), loadMore.error && _jsx("span", { role: "alert", children: loadMore.error })] }))] })] }));
 }

package/dist/table/use-column-window.d.ts

@@ -0,0 +1,42 @@
+import type { RefObject } from "react";
+import type { Column } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+import type { tableLayout } from "./table-layout.js";
+/** Keep pinned and focused columns mounted, with two columns of overscan. */
+export declare function useColumnWindow<T extends object>(layout: ReturnType<typeof tableLayout<T>>, container: RefObject<HTMLDivElement | null>, viewportWidth: number | null, focusedColumn?: string, enabled?: boolean): {
+    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>[];
+    columnGaps: Map<string, number>;
+    cellStyle: (column: Column<DataTableFeatures, T>) => import("react").CSSProperties;
+};

package/dist/table/use-column-window.js

@@ -0,0 +1,65 @@
+"use client";
+import { useLayoutEffect, useMemo, useState } from "react";
+/** Keep pinned and focused columns mounted, with two columns of overscan. */
+export function useColumnWindow(layout, container, viewportWidth, focusedColumn, enabled = true) {
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [activeColumn, setActiveColumn] = useState();
+    useLayoutEffect(() => {
+        const element = container.current;
+        if (!element)
+            return;
+        const rememberFocus = (event) => {
+            setActiveColumn(event.target.closest("[data-column-id]")?.dataset.columnId);
+        };
+        element.addEventListener("focusin", rememberFocus);
+        return () => element.removeEventListener("focusin", rememberFocus);
+    }, [container]);
+    useLayoutEffect(() => {
+        const element = container.current;
+        if (!element)
+            return;
+        const measure = () => setScrollLeft(element.scrollLeft);
+        measure();
+        element.addEventListener("scroll", measure, { passive: true });
+        return () => element.removeEventListener("scroll", measure);
+    }, [container]);
+    const right = scrollLeft + (viewportWidth ?? 0);
+    let start = 0;
+    let end = layout.columns.length - 1;
+    while (start < end && layout.offsets[start + 1] < scrollLeft)
+        start++;
+    end = start;
+    while (end < layout.columns.length - 1 && layout.offsets[end] < right)
+        end++;
+    start = Math.max(0, start - 2);
+    end = Math.min(layout.columns.length - 1, end + 2);
+    return useMemo(() => {
+        const columns = [];
+        const columnGaps = new Map();
+        const styles = new Map();
+        let previousEnd = 0;
+        layout.columns.forEach((column, index) => {
+            if (!enabled ||
+                (index >= start && index <= end) ||
+                (layout.pinningActive && column.getIsPinned()) ||
+                column.id === focusedColumn ||
+                column.id === activeColumn) {
+                columns.push(column);
+                const gap = layout.offsets[index] - previousEnd;
+                const pinnedEnd = layout.pinningActive && column.getIsPinned() === "end";
+                if (gap > 0 && pinnedEnd)
+                    columnGaps.set(column.id, gap);
+                styles.set(column.id, {
+                    ...layout.cellStyle(column),
+                    ...(gap > 0 && !pinnedEnd ? { marginInlineStart: gap } : {}),
+                });
+                previousEnd = layout.offsets[index + 1];
+            }
+        });
+        return {
+            columns,
+            columnGaps,
+            cellStyle: (column) => styles.get(column.id),
+        };
+    }, [layout, start, end, focusedColumn, activeColumn, enabled]);
+}

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

@@ -4,7 +4,7 @@ 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[];
+    rows: readonly T[];
     columns: TableColumn<T>[];
     getRowId: (row: T, index: number) => string;
     processing?: {
@@ -21,4 +21,4 @@ export interface UseDataTableOptions<T extends object> extends Omit<TableOptions
 }
 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>;
+export declare function useDataTable<T extends object>({ rows: inputRows, columns: inputColumns, processing, preferences, ...options }: UseDataTableOptions<T>): DataTableInstance<T>;

package/dist/table/use-data-table.js

@@ -2,6 +2,7 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useTable } from "@tanstack/react-table";
 import { tableFeaturesDefault } from "./features.js";
+import { useStableArray } from "./use-stable-array.js";
 import { reconcilePreferences } from "./state.js";
 const browserStorage = {
     read: (key) => {
@@ -26,7 +27,9 @@ export function applyTablePreferences(table, input) {
     table.setColumnSizing(value.columnSizing);
     table.setColumnPinning(value.columnPinning);
 }
-export function useDataTable({ rows, columns, processing, preferences, ...options }) {
+export function useDataTable({ rows: inputRows, columns: inputColumns, processing, preferences, ...options }) {
+    const rows = useStableArray(inputRows);
+    const columns = useStableArray(inputColumns);
     const defaults = useMemo(() => reconcilePreferences(null, columns, options.initialState), [columns, options.initialState]);
     const table = useTable({
         features: tableFeaturesDefault,
@@ -36,6 +39,9 @@ export function useDataTable({ rows, columns, processing, preferences, ...option
         defaultColumn: { size: 180, minSize: 48, maxSize: 1200, ...options.defaultColumn },
         columnResizeMode: options.columnResizeMode ?? "onChange",
         enableCellSelection: options.enableCellSelection ?? true,
+        enableRowSelection: options.enableRowSelection ??
+            (Boolean(options.onRowSelectionChange) ||
+                columns.some((column) => column.id === "_selection")),
         enableColumnPinning: options.enableColumnPinning ?? true,
         autoResetCellSelection: options.autoResetCellSelection ?? false,
         manualFiltering: processing?.filtering === "external",
@@ -82,7 +88,14 @@ export function useDataTable({ rows, columns, processing, preferences, ...option
             active = false;
         };
     }, [key, storage]);
-    const serialized = JSON.stringify(captureTablePreferences(table));
+    const { columnOrder, columnPinning, columnSizing, columnVisibility } = table.state;
+    const serialized = useMemo(() => JSON.stringify({
+        version: 1,
+        columnOrder,
+        columnPinning,
+        columnSizing,
+        columnVisibility,
+    }), [columnOrder, columnPinning, columnSizing, columnVisibility]);
     useEffect(() => {
         if (!key || restoredKey !== key)
             return;

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

@@ -0,0 +1,2 @@
+/** Size the containing frame, not the grid, so controls share its available height. */
+export declare function useFillLayout(enabled: boolean): (node: HTMLDivElement | null) => void;

package/dist/table/use-fill-layout.js

@@ -0,0 +1,67 @@
+"use client";
+import { useCallback, useRef } from "react";
+/** Size the containing frame, not the grid, so controls share its available height. */
+export function useFillLayout(enabled) {
+    const dispose = useRef(undefined);
+    return useCallback((node) => {
+        dispose.current?.();
+        dispose.current = undefined;
+        if (!node || !enabled)
+            return;
+        let frame = 0;
+        let previous = -1;
+        const measure = () => {
+            frame = 0;
+            let inset = 0;
+            let ancestor = node.parentElement;
+            while (ancestor) {
+                const style = getComputedStyle(ancestor);
+                inset += parseFloat(style.paddingBottom) || 0;
+                inset += parseFloat(style.borderBottomWidth) || 0;
+                ancestor = ancestor.parentElement;
+            }
+            const height = Math.max(0, window.innerHeight - node.getBoundingClientRect().top - inset);
+            if (Math.abs(height - previous) < 0.5)
+                return;
+            previous = height;
+            node.style.height = `${height}px`;
+        };
+        const schedule = () => {
+            if (!frame)
+                frame = requestAnimationFrame(measure);
+        };
+        const observer = new ResizeObserver(schedule);
+        const observe = () => {
+            observer.disconnect();
+            let current = node;
+            while (current?.parentElement) {
+                observer.observe(current.parentElement);
+                let sibling = current.previousElementSibling;
+                while (sibling) {
+                    observer.observe(sibling);
+                    sibling = sibling.previousElementSibling;
+                }
+                current = current.parentElement;
+            }
+            schedule();
+        };
+        // Newly inserted preceding siblings can move a table inside a fixed-height parent.
+        const mutations = new MutationObserver(observe);
+        let parent = node.parentElement;
+        while (parent) {
+            mutations.observe(parent, { childList: true });
+            parent = parent.parentElement;
+        }
+        measure();
+        observe();
+        window.addEventListener("resize", schedule);
+        dispose.current = () => {
+            observer.disconnect();
+            mutations.disconnect();
+            window.removeEventListener("resize", schedule);
+            cancelAnimationFrame(frame);
+            if (node.style.height === `${previous}px`)
+                node.style.removeProperty("height");
+        };
+    }, [enabled]);
+}

package/dist/table/use-inline-row-selection.d.ts

@@ -0,0 +1,10 @@
+import type { Column } from "@tanstack/react-table";
+import type { DataTableFeatures } from "./features.js";
+import type { DataTableInstance } from "./use-data-table.js";
+export declare function useInlineRowSelection<T extends object>(table: DataTableInstance<T>, columns: Column<DataTableFeatures, T>[], controls: boolean): {
+    inlineSelection: boolean;
+    selectLoaded: {
+        checked: boolean | "indeterminate";
+        disabled: boolean;
+    } | undefined;
+};

package/dist/table/use-inline-row-selection.js

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+export function useInlineRowSelection(table, columns, controls) {
+    const rows = table.getRowModel().rows;
+    const inlineSelection = Boolean(controls &&
+        table.options.enableRowSelection &&
+        !columns.some((column) => column.id === "_selection"));
+    const rowSelection = table.state.rowSelection;
+    const enableRowSelection = table.options.enableRowSelection;
+    const enableMultiRowSelection = table.options.enableMultiRowSelection;
+    const selectLoadedAvailability = useMemo(() => {
+        if (!inlineSelection || enableMultiRowSelection === false)
+            return undefined;
+        let hasSelectableRow = false;
+        for (const row of rows) {
+            if (!row.getCanSelect())
+                continue;
+            hasSelectableRow = true;
+            if (!row.getCanMultiSelect())
+                return undefined;
+        }
+        return { disabled: !hasSelectableRow };
+    }, [rows, inlineSelection, enableRowSelection, enableMultiRowSelection]);
+    const selectLoaded = useMemo(() => {
+        if (!selectLoadedAvailability)
+            return undefined;
+        return {
+            checked: table.getIsAllPageRowsSelected() ||
+                (table.getIsSomePageRowsSelected() ? "indeterminate" : false),
+            disabled: selectLoadedAvailability.disabled,
+        };
+    }, [table, rowSelection, selectLoadedAvailability]);
+    return { inlineSelection, selectLoaded };
+}

package/dist/table/use-stable-array.d.ts

@@ -0,0 +1,3 @@
+/** Reuse equal array shells; never deep-compare records or ignore changed callbacks. */
+export declare function useStableArray<T>(input: T[]): T[];
+export declare function useStableArray<T>(input: readonly T[]): readonly T[];

package/dist/table/use-stable-array.js

@@ -0,0 +1,16 @@
+"use client";
+import { useLayoutEffect, useMemo, useRef } from "react";
+export function useStableArray(input) {
+    const committed = useRef(input);
+    const value = useMemo(() => {
+        const previous = committed.current;
+        return input.length === previous.length &&
+            input.every((item, index) => item === previous[index])
+            ? previous
+            : input;
+    }, [input]);
+    useLayoutEffect(() => {
+        committed.current = value;
+    }, [value]);
+    return value;
+}

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

@@ -4,7 +4,7 @@ export declare function useTableInteraction<T extends object>({ table, pinningAc
     table: DataTableInstance<T>;
     pinningActive: boolean;
     container: RefObject<HTMLDivElement | null>;
-    queryKey?: string;
+    queryKey?: unknown;
     onRowActivate?: (row: T) => void;
     onCopyError?: (error: unknown) => void;
     scrollToIndex: (index: number) => void;

package/dist/table/use-table-interaction.js

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { interactiveSelector, selectedCellsText } from "./clipboard.js";
 export function useTableInteraction({ table, pinningActive, container, queryKey, onRowActivate, onCopyError, scrollToIndex, }) {
     const rows = table.getRowModel().rows;
@@ -13,6 +13,32 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
     const [copied, setCopied] = useState(false);
     const copyTimer = useRef(undefined);
     const mounted = useRef(true);
+    const ownedFocus = useRef(null);
+    useEffect(() => {
+        const element = container.current;
+        if (!element)
+            return;
+        const remember = (event) => {
+            const target = event.target;
+            ownedFocus.current =
+                target.closest('[role="grid"]') === element && target.getAttribute("role") === "gridcell"
+                    ? target
+                    : null;
+        };
+        document.addEventListener("focusin", remember);
+        return () => document.removeEventListener("focusin", remember);
+    }, [container]);
+    useLayoutEffect(() => {
+        // A virtual row can unmount the focused cell without a blur event. Keep
+        // keyboard commands on the grid rather than silently returning them to body.
+        if (ownedFocus.current &&
+            !ownedFocus.current.isConnected &&
+            document.activeElement === document.body &&
+            table.getSelectedCellCount()) {
+            ownedFocus.current = null;
+            container.current?.focus({ preventScroll: true });
+        }
+    });
     useEffect(() => {
         mounted.current = true;
         return () => {
@@ -28,7 +54,8 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
     }, [queryKey, resetCellSelection, container]);
     useEffect(() => {
         const dismiss = (event) => {
-            if (container.current && !container.current.contains(event.target))
+            if (container.current &&
+                event.target.closest('[role="grid"]') !== container.current)
                 resetCellSelection(true);
         };
         document.addEventListener("pointerdown", dismiss);
@@ -78,7 +105,9 @@ export function useTableInteraction({ table, pinningActive, container, queryKey,
         });
     }
     const onKeyDown = (event) => {
-        if (event.target.closest(interactiveSelector))
+        if (event.defaultPrevented ||
+            event.target.closest('[role="grid"]') !== event.currentTarget ||
+            event.target.closest(interactiveSelector))
             return;
         if ((event.ctrlKey || event.metaKey) &&
             event.key.toLowerCase() === "c" &&

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

@@ -0,0 +1,8 @@
+import type { FilterController } from "../filters/use-filters.js";
+import type { DataTableInstance } from "./use-data-table.js";
+/** Only query state contributes to this key. Row appends and UI state never do. */
+export declare function useTableResults<T extends object>(table: DataTableInstance<T>, queryKey?: string, filters?: FilterController): {
+    resultKey: string | any[];
+    hasFilters: boolean;
+    clearFilters: (() => void) | undefined;
+};

package/dist/table/use-table-results.js

@@ -0,0 +1,63 @@
+"use client";
+import { useMemo } from "react";
+function hasValue(value) {
+    if (value == null || value === "")
+        return false;
+    if (Array.isArray(value))
+        return value.some((item) => item != null && item !== "");
+    return true;
+}
+/** Only query state contributes to this key. Row appends and UI state never do. */
+export function useTableResults(table, queryKey, filters) {
+    const { sorting, columnFilters, globalFilter, pagination } = table.state;
+    const entries = filters?.entries;
+    const search = filters?.search;
+    const resultKey = useMemo(() => {
+        const state = [
+            queryKey,
+            sorting,
+            columnFilters,
+            globalFilter,
+            pagination.pageIndex,
+            pagination.pageSize,
+            search,
+        ];
+        try {
+            return JSON.stringify([...state, entries?.map(({ id, field, value }) => [id, field.codec.serialize(value)])], (_key, value) => (typeof value === "bigint" ? { $bigint: String(value) } : value));
+        }
+        catch {
+            // Opaque application values may not be serializable. In that case their
+            // immutable references drive changes, without crashing table rendering.
+            return [...state, entries];
+        }
+    }, [
+        queryKey,
+        sorting,
+        columnFilters,
+        globalFilter,
+        pagination.pageIndex,
+        pagination.pageSize,
+        search,
+        entries,
+    ]);
+    const hasFilters = Boolean(columnFilters.some(({ value }) => hasValue(value)) ||
+        hasValue(globalFilter) ||
+        search?.trim() ||
+        filters?.active.length);
+    const clearFilters = () => {
+        if (filters)
+            filters.clear();
+        else {
+            if (columnFilters.length)
+                table.setColumnFilters([]);
+            if (hasValue(globalFilter))
+                table.setGlobalFilter(undefined);
+            if (pagination.pageIndex)
+                table.setPageIndex(0);
+        }
+    };
+    const canClear = !filters ||
+        Boolean(search?.trim()) ||
+        filters.entries.some(({ field, value }) => !field.hidden && !field.disabled && field.removable !== false && field.isActive(value));
+    return { resultKey, hasFilters, clearFilters: canClear ? clearFilters : undefined };
+}