@rovula/ui 0.1.39 → 0.1.40

package/dist/cjs/types/components/DataTable/DataTable.d.ts

@@ -52,6 +52,15 @@ export interface DataTableProps<TData, TValue> extends DataTableEditingProps<TDa
     loading?: boolean;
     /** Label for the initial-loading state (default: "Loading…"). */
     loadingLabel?: string;
+    /** Icon rendered in the empty-state placeholder. Replaces the default `ClipboardList` icon. */
+    emptyIcon?: React.ReactNode;
+    /** Text rendered in the empty-state placeholder (default: "There is no information yet."). */
+    emptyText?: React.ReactNode;
+    /**
+     * Fully replaces the empty-state cell content. When provided, `emptyIcon` and
+     * `emptyText` are ignored.
+     */
+    renderEmpty?: () => React.ReactNode;
     /**
      * When true, DataTable will only render a vertical window of rows based on
      * the scroll position of its internal scroll container. This is a basic
@@ -197,4 +206,4 @@ export interface ColumnManagementOptions {
     /** Show "Show all" button. @default true */
     showAll?: boolean;
 }
-export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, paginationMode, totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore, fetchingMoreLabel, loading, loadingLabel, highlightRowId, scrollToHighlightOnMouseLeave, selectable, onRowSelectionChange, rowActions, reorderable, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered, surface, striped, divided, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility, tableLayout, columnManagement: columnManagementProp, resizable, columnMinSize, columnMaxSize, virtualized, virtualRowEstimate, className, enableEditing, editDisplayMode, editTrigger, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, paginationMode, totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore, fetchingMoreLabel, loading, loadingLabel, emptyIcon, emptyText, renderEmpty, highlightRowId, scrollToHighlightOnMouseLeave, selectable, onRowSelectionChange, rowActions, reorderable, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered, surface, striped, divided, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility, tableLayout, columnManagement: columnManagementProp, resizable, columnMinSize, columnMaxSize, virtualized, virtualRowEstimate, className, enableEditing, editDisplayMode, editTrigger, onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/DataTable/DataTable.stories.d.ts

@@ -48,6 +48,9 @@ declare const meta: {
         fetchingMoreLabel?: string | undefined;
         loading?: boolean | undefined;
         loadingLabel?: string | undefined;
+        emptyIcon?: React.ReactNode;
+        emptyText?: React.ReactNode;
+        renderEmpty?: (() => React.ReactNode) | undefined;
         virtualized?: boolean | undefined;
         virtualRowEstimate?: number | undefined;
         highlightRowId?: string | string[] | undefined;
@@ -165,6 +168,11 @@ export declare const PerformanceLargeDataset: StoryObj;
 export declare const WithVirtualizedRows: StoryObj;
 /** Checkbox selection — header checkbox selects all; row checkboxes select individually. */
 export declare const WithSelection: StoryObj;
+/**
+ * Select rows then hit "Delete selected" — the header checkbox should clear
+ * automatically once the rows are gone (regression test for stale selection state).
+ */
+export declare const WithSelectionAndDelete: StoryObj;
 /**
  * Row highlight + scroll — use `highlightRowId` to visually mark important rows
  * (uses the same token as selected rows) and automatically scroll them into view.

package/dist/components/DataTable/DataTable.js

@@ -336,7 +336,7 @@ function ManageColumnPanel({ table, onClose, maxListHeight = 400, options = {},
 // ---------------------------------------------------------------------------
 // DataTable
 // ---------------------------------------------------------------------------
-export function DataTable({ data, columns, manualSorting = false, onSorting, paginationMode = "infinite", totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore = false, fetchingMoreLabel = "Loading more…", loading = false, loadingLabel = "Loading…", highlightRowId, scrollToHighlightOnMouseLeave = false, selectable = false, onRowSelectionChange, rowActions, reorderable = false, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered = true, surface = "default", striped = false, divided = true, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility = "hover", tableLayout = "auto", columnManagement: columnManagementProp = false, resizable = false, columnMinSize = 60, columnMaxSize = Number.MAX_SAFE_INTEGER, virtualized = false, virtualRowEstimate, className, enableEditing = false, editDisplayMode = "cell", editTrigger = "click", onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }) {
+export function DataTable({ data, columns, manualSorting = false, onSorting, paginationMode = "infinite", totalCount, pageIndex: controlledPageIndex, pageSize: controlledPageSize, onPaginationChange, pageSizeOptions, fetchMoreData, fetchMoreOffset, fetchingMore = false, fetchingMoreLabel = "Loading more…", loading = false, loadingLabel = "Loading…", emptyIcon, emptyText = "There is no information yet.", renderEmpty, highlightRowId, scrollToHighlightOnMouseLeave = false, selectable = false, onRowSelectionChange, rowActions, reorderable = false, getRowId: getRowIdProp, onRowReorder, isRowReorderLocked, onRowClick, onCellClick, getSubRows, defaultExpanded, expanded: controlledExpanded, onExpandedChange, bordered = true, surface = "default", striped = false, divided = true, rowClassName, cellClassName, headerCellClassName, headerClassName, headerRowClassName, sortIndicatorVisibility = "hover", tableLayout = "auto", columnManagement: columnManagementProp = false, resizable = false, columnMinSize = 60, columnMaxSize = Number.MAX_SAFE_INTEGER, virtualized = false, virtualRowEstimate, className, enableEditing = false, editDisplayMode = "cell", editTrigger = "click", onCellCommit, alwaysEditing, enableCellTabTraversal, editableColumnIds: editableColumnIdsProp, testId, }) {
     var _a;
     // scrollable container ref — lives on the wrapper div, not tbody
     const scrollRef = useRef(null);
@@ -538,6 +538,20 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, pag
     useEffect(() => {
         onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(rowSelection);
     }, [rowSelection, onRowSelectionChange]);
+    // Prune stale selection keys when rows are removed (e.g. after deleting selected rows).
+    useEffect(() => {
+        if (!selectable)
+            return;
+        const currentIds = new Set(table.getRowModel().rows.map((r) => r.id));
+        setRowSelection((prev) => {
+            const pruned = Object.fromEntries(Object.entries(prev).filter(([id]) => currentIds.has(id)));
+            // Avoid re-render if nothing changed.
+            if (Object.keys(pruned).length === Object.keys(prev).length)
+                return prev;
+            return pruned;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, selectable]);
     // Infinite scroll — listener on the wrapper div
     useEffect(() => {
         if (paginationMode !== "infinite")
@@ -1003,7 +1017,7 @@ export function DataTable({ data, columns, manualSorting = false, onSorting, pag
                                             cellClassName,
                                             onCellClick,
                                         }) }, row.id));
-                                }))) : loading ? (_jsx(TableRow, { className: "h-full hover:bg-transparent", divided: false, children: _jsx(TableCell, { colSpan: finalColumns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full min-h-[200px]", children: _jsxs("div", { className: "flex flex-1 min-h-[200px] h-full flex-col items-center justify-center gap-3 py-16", role: "status", "aria-live": "polite", "aria-busy": "true", children: [_jsx(Loader2, { className: "size-8 shrink-0 animate-spin text-secondary-120", "aria-hidden": true }), loadingLabel] }) }) })) : (_jsx(TableRow, { className: "h-full hover:bg-transparent", divided: false, children: _jsx(TableCell, { colSpan: finalColumns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3 py-16", children: [_jsx(ClipboardList, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) }), paginationMode === "infinite" &&
+                                }))) : loading ? (_jsx(TableRow, { className: "h-full hover:bg-transparent", divided: false, children: _jsx(TableCell, { colSpan: finalColumns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full min-h-[200px]", children: _jsxs("div", { className: "flex flex-1 min-h-[200px] h-full flex-col items-center justify-center gap-3 py-16", role: "status", "aria-live": "polite", "aria-busy": "true", children: [_jsx(Loader2, { className: "size-8 shrink-0 animate-spin text-secondary-120", "aria-hidden": true }), loadingLabel] }) }) })) : (_jsx(TableRow, { className: "h-full hover:bg-transparent", divided: false, children: _jsx(TableCell, { colSpan: finalColumns.length, className: "typography-body1 text-text-g-contrast-medium text-center h-full", children: _jsx("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3 py-16", children: renderEmpty ? (renderEmpty()) : (_jsxs(_Fragment, { children: [emptyIcon !== undefined ? (emptyIcon) : (_jsx(ClipboardList, { className: "w-8 text-secondary-120" })), emptyText] })) }) }) })) }), paginationMode === "infinite" &&
                                 fetchingMore &&
                                 !isEmpty &&
                                 table.getVisibleLeafColumns().length > 0 && (_jsx("tfoot", { className: "[&_tr]:bg-table-c-row-bg", children: _jsx(TableRow, { divided: false, className: "hover:!bg-table-c-row-bg border-t border-t-table-c-row-line", children: _jsx(TableCell, { colSpan: table.getVisibleLeafColumns().length, className: "py-3 text-center typography-body3 text-text-g-contrast-medium bg-inherit", children: _jsxs("span", { role: "status", "aria-live": "polite", className: "inline-flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": true }), fetchingMoreLabel] }) }) }) }))] }) }), isPaginated && _jsx(TablePagination, Object.assign({}, paginationBarProps)), columnManagement && manageOpen && (_jsxs(Portal.Root, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setManageOpen(false) }), _jsx("div", { className: "fixed z-50 w-[460px] rounded-lg bg-modal-surface shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] overflow-hidden", style: {

package/dist/components/DataTable/DataTable.stories.js

@@ -417,6 +417,21 @@ export const WithSelection = {
                             .join(", ") || "–"] }), _jsx(DataTable, { columns: projectColumns, data: projectData, selectable: true, onRowSelectionChange: setSelected, striped: true, divided: true })] }));
     },
 };
+/**
+ * Select rows then hit "Delete selected" — the header checkbox should clear
+ * automatically once the rows are gone (regression test for stale selection state).
+ */
+export const WithSelectionAndDelete = {
+    render: () => {
+        const [rows, setRows] = React.useState(projectData);
+        const [selected, setSelected] = React.useState({});
+        const selectedIds = Object.keys(selected).filter((k) => selected[k]);
+        const handleDelete = () => {
+            setRows((prev) => prev.filter((r) => !selected[r.id]));
+        };
+        return (_jsxs("div", { className: "flex flex-col gap-3 w-full h-full", children: [_jsxs("div", { className: "flex items-center gap-3 px-1", children: [_jsxs("p", { className: "typography-small2 text-text-g-contrast-high flex-1", children: ["Selected IDs: ", selectedIds.join(", ") || "–"] }), _jsxs(Button, { size: "sm", variant: "solid", color: "error", disabled: selectedIds.length === 0, onClick: handleDelete, startIcon: _jsx(Trash2, { className: "size-4" }), children: ["Delete selected (", selectedIds.length, ")"] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => setRows(projectData), children: "Reset" })] }), _jsx(DataTable, { columns: projectColumns, data: rows, getRowId: (r) => r.id, selectable: true, onRowSelectionChange: setSelected, striped: true, divided: true })] }));
+    },
+};
 /**
  * Row highlight + scroll — use `highlightRowId` to visually mark important rows
  * (uses the same token as selected rows) and automatically scroll them into view.