@rufous/ui 0.3.22 → 0.3.24

package/dist/main.css

@@ -85,6 +85,9 @@
 .rf-table-toolbar {
   z-index: var(--rf-dialog-portal-z, 2100) !important;
 }
+.MuiSnackbar-root {
+  z-index: 9999 !important;
+}
 .dialog-container {
   background: var(--surface-color);
   color: var(--text-color);
@@ -334,6 +337,10 @@
   gap: 16px;
   flex-wrap: wrap;
 }
+.dg-header--custom .dg-header-actions {
+  width: 100%;
+  flex: 1;
+}
 .dg-header-info h2 {
   font-size: 1.1rem;
   font-weight: 700;
@@ -446,6 +453,12 @@
   flex: 1;
   position: relative;
 }
+.dg-table-wrap.rm-top-border {
+  border-top: none;
+}
+.dg-table-wrap.rm-bottom-border {
+  border-bottom: none;
+}
 .dg-table-wrap--empty {
   display: flex;
   flex-direction: column;
@@ -698,6 +711,9 @@
   gap: 12px;
   background: var(--hover-color);
 }
+.dg-pagination--custom {
+  justify-content: flex-start;
+}
 .dg-page-info {
   display: flex;
   align-items: center;
@@ -1072,6 +1088,142 @@
   color: var(--text-secondary);
   opacity: 0.65;
 }
+.dg-grouping-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--background-color);
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+.dg-grouping-bar-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  margin-right: 2px;
+  flex-shrink: 0;
+}
+.dg-group-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px 3px 7px;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+.dg-group-chip-remove {
+  background: none;
+  border: none;
+  padding: 1px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  border-radius: 50%;
+  line-height: 0;
+  margin-left: 2px;
+  transition: background 0.12s, color 0.12s;
+}
+.dg-group-chip-remove:hover {
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--text-color);
+}
+.dg-group-row {
+  background: var(--background-color);
+}
+.dg-group-row:hover {
+  background: var(--hover-color);
+}
+.dg-group-cell {
+  padding: 0 !important;
+  border-bottom: 1px solid var(--border-color);
+}
+.dg-group-cell-inner {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding-right: 16px;
+  cursor: pointer;
+  user-select: none;
+}
+.dg-group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: background 0.12s, color 0.12s;
+  margin-left: 10px;
+}
+button.dg-group-toggle {
+  padding: 0;
+}
+.dg-group-toggle:hover {
+  background: rgba(0, 0, 0, 0.07);
+  color: var(--text-color);
+}
+.dg-group-field-label {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.dg-group-key {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--text-color);
+}
+.dg-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 6px;
+  background: var(--hover-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.dg-group-leaf-cell {
+  padding: 0 12px;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dg-tree-cell {
+  padding: 0;
+  border-bottom: 1px solid var(--border-color);
+  vertical-align: middle;
+}
+.dg-tree-cell-inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 36px;
+  padding-right: 2px;
+}
 
 /* lib/style.css */
 :root {
@@ -5700,7 +5852,7 @@ pre {
 /* lib/styles/snackbar.css */
 .rf-snackbar-root {
   position: fixed;
-  z-index: 1400;
+  z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 8px;

package/dist/main.d.cts

@@ -881,6 +881,17 @@ interface Column<T> {
     hideable?: boolean;
     disableColumnMenu?: boolean;
     isExportable?: boolean;
+    /**
+     * When false, this column cannot be used as a grouping criterion via the
+     * column menu. Defaults to true.
+     */
+    groupable?: boolean;
+    /**
+     * Override the value used for grouping. Return a string/number so rows
+     * with the same derived value land in the same group. Falls back to
+     * valueGetter, then the raw field value.
+     */
+    groupingValueGetter?: (value: any, row: T) => string | number | null | undefined;
 }
 interface FilterState {
     column: string;
@@ -899,11 +910,67 @@ interface DataGridToolbarSlot {
     content: React__default.ReactNode;
     align?: 'left' | 'center' | 'right';
 }
+/**
+ * Granular visibility control for the built-in toolbar.
+ * Each flag hides the corresponding built-in element.
+ */
+interface ToolbarOptions {
+    /** Hide the global search input. */
+    hideSearch?: boolean;
+    /** Hide the advanced filter button. */
+    hideFilter?: boolean;
+    /** Hide the "Manage Columns" button. */
+    hideColumns?: boolean;
+    /** Hide the "Export CSV" button. */
+    hideExport?: boolean;
+    /** Hide the title text on the left side. */
+    hideTitle?: boolean;
+    /** Hide the record count below the title. */
+    hideRecordCount?: boolean;
+    /** Hide the entire top header bar (title, search, filter, columns, export). */
+    hideHeader?: boolean;
+    /** Hide the pagination footer bar entirely. */
+    hideFooter?: boolean;
+}
 interface PaginationModel {
     /** 0-indexed current page */
     page: number;
     pageSize: number;
 }
+/** Shape of a single group node, passed to isGroupExpandedByDefault. */
+interface GroupNode {
+    /** Unique ID for this group, built from its field+key ancestry path. */
+    id: string;
+    /** The column field this group is keyed by. */
+    field: string;
+    /** The group value (display string). */
+    key: string;
+    /** Nesting depth: 0 = top-level group. */
+    depth: number;
+    /** Total leaf (data) row count under this group. */
+    count: number;
+}
+/** Customise the auto-generated grouping column. */
+interface GroupingColDef {
+    /** Override the column header text. */
+    headerName?: string;
+    /** Override the column width (px). Defaults to 200. */
+    width?: number;
+    /** Hide the descendant row count shown in parentheses. */
+    hideDescendantCount?: boolean;
+    /**
+     * When set, leaf cells in the grouping column display the value of this
+     * column field instead of being blank.
+     */
+    leafField?: string;
+    /** Custom cell renderer for group header cells. */
+    renderCell?: (params: {
+        groupKey: string;
+        field: string;
+        depth: number;
+        leafCount: number;
+    }) => React__default.ReactNode;
+}
 interface DataGridProps<T> {
     columns: Column<T>[];
     data: T[];
@@ -957,13 +1024,88 @@ interface DataGridProps<T> {
     onSearchChange?: (query: string) => void;
     /** Called whenever the applied advanced filters change. */
     onFiltersChange?: (filters: FilterState[]) => void;
-    /** Hide the "Export CSV" button in the header toolbar. */
+    /**
+     * Seed the advanced filter panel with pre-set filters on mount.
+     * These are used as the initial state; the user can still modify them.
+     */
+    initialFilters?: FilterState[];
+    /**
+     * Granular show/hide control for each built-in toolbar element.
+     * Ignored when `customToolbar` is provided.
+     */
+    toolbarOptions?: ToolbarOptions;
+    /**
+     * Fully custom toolbar node. When provided, replaces the built-in
+     * header action bar (search, filter, columns, export) entirely.
+     * The title/record-count block on the left is still controlled by
+     * `toolbarOptions.hideTitle` / `toolbarOptions.hideRecordCount`.
+     */
+    customToolbar?: React__default.ReactNode;
+    /**
+     * Fully custom footer node. When provided, replaces the built-in
+     * pagination bar entirely. Use `toolbarOptions.hideFooter` to hide
+     * the footer without replacing it.
+     */
+    customFooter?: React__default.ReactNode;
+    /** Hide the "Export CSV" button in the header toolbar. @deprecated Use toolbarOptions.hideExport instead. */
     hideTopExport?: boolean;
+    /**
+     * Controlled grouping model — an ordered array of column field names to
+     * group by. Provide together with onRowGroupingModelChange.
+     */
+    rowGroupingModel?: string[];
+    /**
+     * Initial grouping model for uncontrolled mode.
+     * Ignored if rowGroupingModel is provided.
+     */
+    defaultRowGroupingModel?: string[];
+    /** Called when the user adds or removes a grouping criterion via the UI. */
+    onRowGroupingModelChange?: (model: string[]) => void;
+    /**
+     * 'single' (default) — all grouped columns share one auto-generated column.
+     * 'multiple' — each criterion gets its own dedicated column.
+     */
+    rowGroupingColumnMode?: 'single' | 'multiple';
+    /**
+     * Customise the auto-generated grouping column.
+     * Pass a callback `(field: string) => GroupingColDef` for per-field
+     * overrides when rowGroupingColumnMode='multiple'.
+     */
+    groupingColDef?: GroupingColDef | ((field: string) => GroupingColDef);
+    /**
+     * Depth to which groups are expanded on initial render (and whenever the
+     * grouping model changes). 0 = all collapsed (default), -1 = all expanded.
+     */
+    defaultGroupingExpansionDepth?: number;
+    /**
+     * Return true for a group that should be expanded on initial render.
+     * Takes precedence over defaultGroupingExpansionDepth.
+     */
+    isGroupExpandedByDefault?: (group: GroupNode) => boolean;
+    /**
+     * Disables the "Group by / Ungroup" column menu items and the grouping
+     * chips bar. If a rowGroupingModel is also provided the grid renders in
+     * read-only grouped mode.
+     */
+    disableRowGrouping?: boolean;
+    /**
+     * Enable tree-data mode. Each row in `data` is a top-level node;
+     * children are retrieved via `getChildRows` (or the row's `children`
+     * field by default). Parent rows render all their own column values
+     * plus a toggle button — unlike field grouping which generates a
+     * separate header row.
+     */
+    treeData?: boolean;
+    /**
+     * Return the child rows for a given parent row.
+     * Defaults to `(row) => (row as any).children ?? null`.
+     */
+    getChildRows?: <T>(row: T) => T[] | null | undefined;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, hideTopExport, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, initialFilters, toolbarOptions, customToolbar, customFooter, hideTopExport, rowGroupingModel, defaultRowGroupingModel, onRowGroupingModelChange, rowGroupingColumnMode, groupingColDef, defaultGroupingExpansionDepth, isGroupExpandedByDefault, disableRowGrouping, treeData, getChildRows, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;

package/dist/main.d.ts

@@ -881,6 +881,17 @@ interface Column<T> {
     hideable?: boolean;
     disableColumnMenu?: boolean;
     isExportable?: boolean;
+    /**
+     * When false, this column cannot be used as a grouping criterion via the
+     * column menu. Defaults to true.
+     */
+    groupable?: boolean;
+    /**
+     * Override the value used for grouping. Return a string/number so rows
+     * with the same derived value land in the same group. Falls back to
+     * valueGetter, then the raw field value.
+     */
+    groupingValueGetter?: (value: any, row: T) => string | number | null | undefined;
 }
 interface FilterState {
     column: string;
@@ -899,11 +910,67 @@ interface DataGridToolbarSlot {
     content: React__default.ReactNode;
     align?: 'left' | 'center' | 'right';
 }
+/**
+ * Granular visibility control for the built-in toolbar.
+ * Each flag hides the corresponding built-in element.
+ */
+interface ToolbarOptions {
+    /** Hide the global search input. */
+    hideSearch?: boolean;
+    /** Hide the advanced filter button. */
+    hideFilter?: boolean;
+    /** Hide the "Manage Columns" button. */
+    hideColumns?: boolean;
+    /** Hide the "Export CSV" button. */
+    hideExport?: boolean;
+    /** Hide the title text on the left side. */
+    hideTitle?: boolean;
+    /** Hide the record count below the title. */
+    hideRecordCount?: boolean;
+    /** Hide the entire top header bar (title, search, filter, columns, export). */
+    hideHeader?: boolean;
+    /** Hide the pagination footer bar entirely. */
+    hideFooter?: boolean;
+}
 interface PaginationModel {
     /** 0-indexed current page */
     page: number;
     pageSize: number;
 }
+/** Shape of a single group node, passed to isGroupExpandedByDefault. */
+interface GroupNode {
+    /** Unique ID for this group, built from its field+key ancestry path. */
+    id: string;
+    /** The column field this group is keyed by. */
+    field: string;
+    /** The group value (display string). */
+    key: string;
+    /** Nesting depth: 0 = top-level group. */
+    depth: number;
+    /** Total leaf (data) row count under this group. */
+    count: number;
+}
+/** Customise the auto-generated grouping column. */
+interface GroupingColDef {
+    /** Override the column header text. */
+    headerName?: string;
+    /** Override the column width (px). Defaults to 200. */
+    width?: number;
+    /** Hide the descendant row count shown in parentheses. */
+    hideDescendantCount?: boolean;
+    /**
+     * When set, leaf cells in the grouping column display the value of this
+     * column field instead of being blank.
+     */
+    leafField?: string;
+    /** Custom cell renderer for group header cells. */
+    renderCell?: (params: {
+        groupKey: string;
+        field: string;
+        depth: number;
+        leafCount: number;
+    }) => React__default.ReactNode;
+}
 interface DataGridProps<T> {
     columns: Column<T>[];
     data: T[];
@@ -957,13 +1024,88 @@ interface DataGridProps<T> {
     onSearchChange?: (query: string) => void;
     /** Called whenever the applied advanced filters change. */
     onFiltersChange?: (filters: FilterState[]) => void;
-    /** Hide the "Export CSV" button in the header toolbar. */
+    /**
+     * Seed the advanced filter panel with pre-set filters on mount.
+     * These are used as the initial state; the user can still modify them.
+     */
+    initialFilters?: FilterState[];
+    /**
+     * Granular show/hide control for each built-in toolbar element.
+     * Ignored when `customToolbar` is provided.
+     */
+    toolbarOptions?: ToolbarOptions;
+    /**
+     * Fully custom toolbar node. When provided, replaces the built-in
+     * header action bar (search, filter, columns, export) entirely.
+     * The title/record-count block on the left is still controlled by
+     * `toolbarOptions.hideTitle` / `toolbarOptions.hideRecordCount`.
+     */
+    customToolbar?: React__default.ReactNode;
+    /**
+     * Fully custom footer node. When provided, replaces the built-in
+     * pagination bar entirely. Use `toolbarOptions.hideFooter` to hide
+     * the footer without replacing it.
+     */
+    customFooter?: React__default.ReactNode;
+    /** Hide the "Export CSV" button in the header toolbar. @deprecated Use toolbarOptions.hideExport instead. */
     hideTopExport?: boolean;
+    /**
+     * Controlled grouping model — an ordered array of column field names to
+     * group by. Provide together with onRowGroupingModelChange.
+     */
+    rowGroupingModel?: string[];
+    /**
+     * Initial grouping model for uncontrolled mode.
+     * Ignored if rowGroupingModel is provided.
+     */
+    defaultRowGroupingModel?: string[];
+    /** Called when the user adds or removes a grouping criterion via the UI. */
+    onRowGroupingModelChange?: (model: string[]) => void;
+    /**
+     * 'single' (default) — all grouped columns share one auto-generated column.
+     * 'multiple' — each criterion gets its own dedicated column.
+     */
+    rowGroupingColumnMode?: 'single' | 'multiple';
+    /**
+     * Customise the auto-generated grouping column.
+     * Pass a callback `(field: string) => GroupingColDef` for per-field
+     * overrides when rowGroupingColumnMode='multiple'.
+     */
+    groupingColDef?: GroupingColDef | ((field: string) => GroupingColDef);
+    /**
+     * Depth to which groups are expanded on initial render (and whenever the
+     * grouping model changes). 0 = all collapsed (default), -1 = all expanded.
+     */
+    defaultGroupingExpansionDepth?: number;
+    /**
+     * Return true for a group that should be expanded on initial render.
+     * Takes precedence over defaultGroupingExpansionDepth.
+     */
+    isGroupExpandedByDefault?: (group: GroupNode) => boolean;
+    /**
+     * Disables the "Group by / Ungroup" column menu items and the grouping
+     * chips bar. If a rowGroupingModel is also provided the grid renders in
+     * read-only grouped mode.
+     */
+    disableRowGrouping?: boolean;
+    /**
+     * Enable tree-data mode. Each row in `data` is a top-level node;
+     * children are retrieved via `getChildRows` (or the row's `children`
+     * field by default). Parent rows render all their own column values
+     * plus a toggle button — unlike field grouping which generates a
+     * separate header row.
+     */
+    treeData?: boolean;
+    /**
+     * Return the child rows for a given parent row.
+     * Defaults to `(row) => (row as any).children ?? null`.
+     */
+    getChildRows?: <T>(row: T) => T[] | null | undefined;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, hideTopExport, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, initialFilters, toolbarOptions, customToolbar, customFooter, hideTopExport, rowGroupingModel, defaultRowGroupingModel, onRowGroupingModelChange, rowGroupingColumnMode, groupingColDef, defaultGroupingExpansionDepth, isGroupExpandedByDefault, disableRowGrouping, treeData, getChildRows, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;