@rovula/ui 0.1.38 → 0.1.40

package/dist/esm/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/esm/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/index.d.ts

@@ -958,6 +958,15 @@ interface DataTableProps<TData, TValue> extends DataTableEditingProps<TData> {
     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__default.ReactNode;
+    /** Text rendered in the empty-state placeholder (default: "There is no information yet."). */
+    emptyText?: React__default.ReactNode;
+    /**
+     * Fully replaces the empty-state cell content. When provided, `emptyIcon` and
+     * `emptyText` are ignored.
+     */
+    renderEmpty?: () => React__default.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
@@ -1103,7 +1112,7 @@ interface ColumnManagementOptions {
     /** Show "Show all" button. @default true */
     showAll?: boolean;
 }
-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>): react_jsx_runtime.JSX.Element;
+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>): react_jsx_runtime.JSX.Element;
 
 declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/confirm-dialog/ConfirmDialog.js

@@ -41,7 +41,10 @@ export const ConfirmDialog = ({ open, onOpenChange, title, description, children
     const handleSubmit = () => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
     };
-    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { className: contentClassName, "data-testid": testId, children: [_jsxs(AlertDialogHeader, { className: headerClassName, children: [_jsx(AlertDialogTitle, { className: titleClassName, "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { className: descriptionClassName, "data-testid": testId && `${testId}-description`, children: description }))] }), children, requiresInput && (_jsxs(FormRoot, { className: "flex flex-col gap-4 w-full", onSubmit: handleSubmit, children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
+    return (_jsxs(AlertDialog, { open: open, onOpenChange: handleOpenChange, children: [trigger && _jsx(AlertDialogTrigger, { asChild: true, children: trigger }), _jsxs(AlertDialogContent, { className: contentClassName, "data-testid": testId, onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    document.body.style.pointerEvents = "auto";
+                }, children: [_jsxs(AlertDialogHeader, { className: headerClassName, children: [_jsx(AlertDialogTitle, { className: titleClassName, "data-testid": testId && `${testId}-title`, children: title }), description && (_jsx(AlertDialogDescription, { className: descriptionClassName, "data-testid": testId && `${testId}-description`, children: description }))] }), children, requiresInput && (_jsxs(FormRoot, { className: "flex flex-col gap-4 w-full", onSubmit: handleSubmit, children: [_jsxs("p", { className: "typography-small1 text-text-contrast-max", children: ["Type \u201C", typeToConfirm, "\u201D to proceed."] }), _jsx(Field, { name: "confirmInput", component: TextInput, componentProps: {
                                     label: "Type to confirm",
                                     required: true,
                                     hasClearIcon: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/DataTable/DataTable.stories.tsx

@@ -814,6 +814,59 @@ export 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 const WithSelectionAndDelete: StoryObj = {
+  render: () => {
+    const [rows, setRows] = React.useState<Project[]>(projectData);
+    const [selected, setSelected] = React.useState<Record<string, boolean>>({});
+
+    const selectedIds = Object.keys(selected).filter((k) => selected[k]);
+
+    const handleDelete = () => {
+      setRows((prev) => prev.filter((r) => !selected[r.id]));
+    };
+
+    return (
+      <div className="flex flex-col gap-3 w-full h-full">
+        <div className="flex items-center gap-3 px-1">
+          <p className="typography-small2 text-text-g-contrast-high flex-1">
+            Selected IDs: {selectedIds.join(", ") || "–"}
+          </p>
+          <Button
+            size="sm"
+            variant="solid"
+            color="error"
+            disabled={selectedIds.length === 0}
+            onClick={handleDelete}
+            startIcon={<Trash2 className="size-4" />}
+          >
+            Delete selected ({selectedIds.length})
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => setRows(projectData)}
+          >
+            Reset
+          </Button>
+        </div>
+        <DataTable
+          columns={projectColumns}
+          data={rows}
+          getRowId={(r) => r.id}
+          selectable
+          onRowSelectionChange={setSelected}
+          striped
+          divided
+        />
+      </div>
+    );
+  },
+};
+
 /**
  * Row highlight + scroll — use `highlightRowId` to visually mark important rows
  * (uses the same token as selected rows) and automatically scroll them into view.

package/src/components/DataTable/DataTable.tsx

@@ -345,6 +345,15 @@ export interface DataTableProps<TData, TValue>
   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;
 
   // --- Virtualization (experimental) ---
   /**
@@ -1055,6 +1064,9 @@ export function DataTable<TData, TValue>({
   fetchingMoreLabel = "Loading more…",
   loading = false,
   loadingLabel = "Loading…",
+  emptyIcon,
+  emptyText = "There is no information yet.",
+  renderEmpty,
   highlightRowId,
   scrollToHighlightOnMouseLeave = false,
   selectable = false,
@@ -1380,6 +1392,23 @@ export function DataTable<TData, TValue>({
     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") return;
@@ -2282,8 +2311,18 @@ export function DataTable<TData, TValue>({
                     className="typography-body1 text-text-g-contrast-medium text-center h-full"
                   >
                     <div className="flex flex-1 h-full flex-col items-center justify-center gap-3 py-16">
-                      <ClipboardList className="w-8 text-secondary-120" />
-                      There is no information yet.
+                      {renderEmpty ? (
+                        renderEmpty()
+                      ) : (
+                        <>
+                          {emptyIcon !== undefined ? (
+                            emptyIcon
+                          ) : (
+                            <ClipboardList className="w-8 text-secondary-120" />
+                          )}
+                          {emptyText}
+                        </>
+                      )}
                     </div>
                   </TableCell>
                 </TableRow>

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -129,7 +129,14 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
       {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}
-      <AlertDialogContent className={contentClassName} data-testid={testId}>
+      <AlertDialogContent
+        className={contentClassName}
+        data-testid={testId}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          document.body.style.pointerEvents = "auto";
+        }}
+      >
         <AlertDialogHeader className={headerClassName}>
           <AlertDialogTitle
             className={titleClassName}

package/src/theme/main-preset.js

@@ -325,6 +325,10 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      boxShadow: {
+        card: "0 6px 12px 0 rgba(0, 0, 0, 0.08)",
+        modal: "0 12px 24px -4px rgba(0, 0, 0, 0.12)",
+      },
     },
   },
   presets: [require("./presets/colors"), require("tailwindcss-animate")],