@ackplus/mui-tanstack-data-grid 1.0.0

package/README.md

@@ -0,0 +1,22 @@
+# @ackplus/mui-tanstack-data-grid
+
+> Successor to **`@ackplus/react-tanstack-data-table`** (now deprecated). Same project & repo, new
+> package name to reflect the rebuilt architecture.
+
+A lightweight, fully-featured React **data grid** built on the headless **TanStack Table** engine and
+**MUI**:
+
+- **`<div>` / CSS-Grid rendering** — no HTML `<table>`, so column sizing, resize, and pinning are
+  reliable and pixel-accurate.
+- **Themeable like a MUI component** — inherits your MUI theme; override via `palette.tanstackDataGrid`,
+  `components.MuiTanstackDataGrid` (`defaultProps` / `styleOverrides`), `--dt-*` CSS variables, or `sx` —
+  exactly like MUI X DataGrid.
+- **All features free** — sorting, global + column filtering, pagination, selection + bulk actions,
+  pinning, reordering, resizing, row expansion, virtualization, CSV + (lazy) Excel export.
+- **Headless escape hatch** — `useDataTable()` for full control without the default UI.
+
+## Status
+
+In development (still private). Docs site and first publish to follow.
+
+Plan & parity tracking: see [`/rebuild`](../../rebuild/PLAN.md).

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

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+import type { DataTableProps } from '../types/data-table.types';
+export declare function DataTable<T extends Record<string, any>>(inProps: DataTableProps<T>): ReactNode;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,SAAS,CAS9F"}

package/dist/components/data-table.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = DataTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * <DataTable> — the public component.
+ *
+ * Merges theme `defaultProps`/`styleOverrides` via `useThemeProps` (so it themes
+ * like any MUI component), runs the headless `useDataTable` engine, and renders
+ * the div/CSS-Grid `GridView`. Pass `apiRef` to get the imperative handle.
+ */
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("react");
+const use_data_table_1 = require("../core/use-data-table");
+const grid_view_1 = require("./grid/grid-view");
+function DataTable(inProps) {
+    const props = (0, styles_1.useThemeProps)({ props: inProps, name: 'MuiTanstackDataGrid' });
+    const engine = (0, use_data_table_1.useDataTable)(props);
+    (0, react_1.useEffect)(() => {
+        if (props.apiRef)
+            props.apiRef.current = engine.api;
+    });
+    return (0, jsx_runtime_1.jsx)(grid_view_1.GridView, { engine: engine, ...props });
+}

package/dist/components/filters/filter-value-input.d.ts

@@ -0,0 +1,10 @@
+import type { Column } from '@tanstack/react-table';
+import type { ReactElement } from 'react';
+import type { ColumnFilterRule } from '../../types/filter.types';
+export interface FilterValueInputProps<T> {
+    filter: ColumnFilterRule;
+    column: Column<T, any>;
+    onValueChange: (value: any) => void;
+}
+export declare function FilterValueInput<T>({ filter, column, onValueChange }: FilterValueInputProps<T>): ReactElement;
+//# sourceMappingURL=filter-value-input.d.ts.map

package/dist/components/filters/filter-value-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-value-input.d.ts","sourceRoot":"","sources":["../../../src/components/filters/filter-value-input.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC;AAID,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAAG,YAAY,CAiF7G"}

package/dist/components/filters/filter-value-input.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterValueInput = FilterValueInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Per-column-type value input for the filter rule builder. Boolean → Any/True/
+ * False; select → single/multi; date → native date input (no heavy date-picker
+ * peer dep — the value is an ISO string `dayjs` parses); number/text → TextField.
+ */
+const material_1 = require("@mui/material");
+const column_helpers_1 = require("../../utils/column-helpers");
+const sx = { flex: 1, minWidth: 150 };
+function FilterValueInput({ filter, column, onValueChange }) {
+    var _a, _b, _c;
+    const columnType = (0, column_helpers_1.getColumnType)(column);
+    const Custom = (0, column_helpers_1.getCustomFilterComponent)(column);
+    const options = (0, column_helpers_1.getColumnOptions)(column);
+    const operator = filter.operator;
+    if (Custom) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: sx, children: (0, jsx_runtime_1.jsx)(Custom, { value: filter.value, onChange: onValueChange, filter: filter, column: column }) }));
+    }
+    if (columnType === 'boolean') {
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: sx, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "any", children: "Any" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "true", children: "True" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "false", children: "False" })] })] }));
+    }
+    if (options && options.length > 0) {
+        if (operator === 'in' || operator === 'notIn') {
+            const current = Array.isArray(filter.value) ? filter.value : [];
+            return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: sx, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Values" }), (0, jsx_runtime_1.jsx)(material_1.Select, { multiple: true, value: current, label: "Values", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.join(', '), children: options.map((o) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: o.value, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: current.includes(o.value), size: "small" }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: o.label })] }, String(o.value)))) })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: sx, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: (_a = filter.value) !== null && _a !== void 0 ? _a : '', label: "Value", onChange: (e) => onValueChange(e.target.value), children: options.map((o) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: o.value, children: o.label }, String(o.value)))) })] }));
+    }
+    if (columnType === 'date') {
+        return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", type: "date", label: "Value", InputLabelProps: { shrink: true }, value: filter.value ? String(filter.value).slice(0, 10) : '', onChange: (e) => onValueChange(e.target.value), sx: sx }));
+    }
+    if (columnType === 'number') {
+        return (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", type: "number", label: "Value", value: (_b = filter.value) !== null && _b !== void 0 ? _b : '', onChange: (e) => onValueChange(e.target.value), sx: sx });
+    }
+    return (0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: (_c = filter.value) !== null && _c !== void 0 ? _c : '', onChange: (e) => onValueChange(e.target.value), sx: sx });
+}

package/dist/components/filters/index.d.ts

@@ -0,0 +1,3 @@
+export * from './operators';
+export * from './filter-value-input';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/filters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/filters/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

package/dist/components/filters/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./operators"), exports);
+__exportStar(require("./filter-value-input"), exports);

package/dist/components/filters/operators.d.ts

@@ -0,0 +1,93 @@
+/** Operator lists per column type, surfaced in the column-filter UI. */
+export declare const FILTER_OPERATORS: {
+    readonly text: readonly [{
+        readonly value: "contains";
+        readonly label: "Contains";
+    }, {
+        readonly value: "startsWith";
+        readonly label: "Starts with";
+    }, {
+        readonly value: "endsWith";
+        readonly label: "Ends with";
+    }, {
+        readonly value: "equals";
+        readonly label: "Equals";
+    }, {
+        readonly value: "notEquals";
+        readonly label: "Not equals";
+    }, {
+        readonly value: "isEmpty";
+        readonly label: "Is empty";
+    }, {
+        readonly value: "isNotEmpty";
+        readonly label: "Is not empty";
+    }];
+    readonly boolean: readonly [{
+        readonly value: "is";
+        readonly label: "Is";
+    }];
+    readonly number: readonly [{
+        readonly value: "equals";
+        readonly label: "Equals";
+    }, {
+        readonly value: "notEquals";
+        readonly label: "Not equals";
+    }, {
+        readonly value: "greaterThan";
+        readonly label: "Greater than";
+    }, {
+        readonly value: "lessThan";
+        readonly label: "Less than";
+    }, {
+        readonly value: "greaterThanOrEqual";
+        readonly label: "Greater than or equal";
+    }, {
+        readonly value: "lessThanOrEqual";
+        readonly label: "Less than or equal";
+    }, {
+        readonly value: "isEmpty";
+        readonly label: "Is empty";
+    }, {
+        readonly value: "isNotEmpty";
+        readonly label: "Is not empty";
+    }];
+    readonly date: readonly [{
+        readonly value: "equals";
+        readonly label: "Equals";
+    }, {
+        readonly value: "notEquals";
+        readonly label: "Not equals";
+    }, {
+        readonly value: "after";
+        readonly label: "After";
+    }, {
+        readonly value: "before";
+        readonly label: "Before";
+    }, {
+        readonly value: "isEmpty";
+        readonly label: "Is empty";
+    }, {
+        readonly value: "isNotEmpty";
+        readonly label: "Is not empty";
+    }];
+    readonly select: readonly [{
+        readonly value: "equals";
+        readonly label: "Equals";
+    }, {
+        readonly value: "notEquals";
+        readonly label: "Not equals";
+    }, {
+        readonly value: "in";
+        readonly label: "In";
+    }, {
+        readonly value: "notIn";
+        readonly label: "Not in";
+    }, {
+        readonly value: "isEmpty";
+        readonly label: "Is empty";
+    }, {
+        readonly value: "isNotEmpty";
+        readonly label: "Is not empty";
+    }];
+};
+//# sourceMappingURL=operators.d.ts.map

package/dist/components/filters/operators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operators.d.ts","sourceRoot":"","sources":["../../../src/components/filters/operators.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCnB,CAAC"}

package/dist/components/filters/operators.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FILTER_OPERATORS = void 0;
+/** Operator lists per column type, surfaced in the column-filter UI. */
+exports.FILTER_OPERATORS = {
+    text: [
+        { value: 'contains', label: 'Contains' },
+        { value: 'startsWith', label: 'Starts with' },
+        { value: 'endsWith', label: 'Ends with' },
+        { value: 'equals', label: 'Equals' },
+        { value: 'notEquals', label: 'Not equals' },
+        { value: 'isEmpty', label: 'Is empty' },
+        { value: 'isNotEmpty', label: 'Is not empty' },
+    ],
+    boolean: [{ value: 'is', label: 'Is' }],
+    number: [
+        { value: 'equals', label: 'Equals' },
+        { value: 'notEquals', label: 'Not equals' },
+        { value: 'greaterThan', label: 'Greater than' },
+        { value: 'lessThan', label: 'Less than' },
+        { value: 'greaterThanOrEqual', label: 'Greater than or equal' },
+        { value: 'lessThanOrEqual', label: 'Less than or equal' },
+        { value: 'isEmpty', label: 'Is empty' },
+        { value: 'isNotEmpty', label: 'Is not empty' },
+    ],
+    date: [
+        { value: 'equals', label: 'Equals' },
+        { value: 'notEquals', label: 'Not equals' },
+        { value: 'after', label: 'After' },
+        { value: 'before', label: 'Before' },
+        { value: 'isEmpty', label: 'Is empty' },
+        { value: 'isNotEmpty', label: 'Is not empty' },
+    ],
+    select: [
+        { value: 'equals', label: 'Equals' },
+        { value: 'notEquals', label: 'Not equals' },
+        { value: 'in', label: 'In' },
+        { value: 'notIn', label: 'Not in' },
+        { value: 'isEmpty', label: 'Is empty' },
+        { value: 'isNotEmpty', label: 'Is not empty' },
+    ],
+};

package/dist/components/grid/grid-view.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import type { DataTableProps } from '../../types/data-table.types';
+import type { UseDataTableResult } from '../../core/use-data-table';
+export interface GridViewProps<T> extends DataTableProps<T> {
+    engine: UseDataTableResult<T>;
+}
+export declare function GridView<T extends Record<string, any>>(props: GridViewProps<T>): ReactNode;
+//# sourceMappingURL=grid-view.d.ts.map

package/dist/components/grid/grid-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-view.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-view.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAKpE,MAAM,WAAW,aAAa,CAAC,CAAC,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IACvD,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;CACjC;AA2BD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CA+P1F"}

package/dist/components/grid/grid-view.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridView = GridView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * GridView — the div/CSS-Grid presentation layer (no HTML <table>).
+ *
+ * Column widths are CSS variables (`--col-<id>-size`) so resize updates one
+ * variable instead of re-rendering every cell; pinned columns are sticky with
+ * offsets from the same numbers; rows are virtualized when enabled. Theming and
+ * density come from the `--dt-*` tokens applied to the root.
+ */
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = require("react");
+const use_data_table_tokens_1 = require("../../theme/use-data-table-tokens");
+const styled_1 = require("./styled");
+const data_table_toolbar_1 = require("../toolbar/data-table-toolbar");
+const bulk_actions_toolbar_1 = require("../toolbar/bulk-actions-toolbar");
+function getAlign(column) {
+    var _a;
+    return (_a = column.columnDef.align) !== null && _a !== void 0 ? _a : 'left';
+}
+function getPinnedStyle(column) {
+    const pinned = column.getIsPinned();
+    if (!pinned)
+        return {};
+    const isLastLeft = pinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRight = pinned === 'right' && column.getIsFirstColumn('right');
+    return {
+        position: 'sticky',
+        left: pinned === 'left' ? column.getStart('left') : undefined,
+        right: pinned === 'right' ? column.getAfter('right') : undefined,
+        zIndex: 'var(--dt-z-pinned)',
+        // Opaque base + row-tint overlay so scrolling content never bleeds through.
+        backgroundColor: 'var(--dt-pinned-bg)',
+        backgroundImage: 'linear-gradient(var(--dt-row-bg), var(--dt-row-bg))',
+        boxShadow: isLastLeft
+            ? '2px 0 4px -2px var(--dt-pinned-shadow)'
+            : isFirstRight
+                ? '-2px 0 4px -2px var(--dt-pinned-shadow)'
+                : undefined,
+    };
+}
+function GridView(props) {
+    var _a;
+    const { engine, enableColumnResizing = false, enableVirtualization = false, enablePagination = false, stickyHeader, hover = true, striped = false, fitToScreen, maxHeight = 480, onRowClick, loading, skeletonRows = 5, noRowsMessage, emptyMessage, enableGlobalFilter, enableColumnFilter, enableColumnVisibility, enableExport, enableDensitySelector, enableReset, enableRefresh, extraFilter, enableColumnReordering, renderBulkActions, } = props;
+    const showToolbar = !!(enableGlobalFilter || enableColumnFilter || enableColumnVisibility || enableExport || enableDensitySelector || enableReset || enableRefresh || extraFilter);
+    const theme = (0, styles_1.useTheme)();
+    const { table, refs, derived, state, actions } = engine;
+    const [draggingId, setDraggingId] = (0, react_1.useState)(null);
+    const [dragOverId, setDragOverId] = (0, react_1.useState)(null);
+    const density = derived.density;
+    const tokens = (0, use_data_table_tokens_1.useDataTableTokens)(density);
+    const rows = derived.rows;
+    const rowVirtualizer = actions.renderRowModel.rowVirtualizer;
+    const isVirtual = enableVirtualization && !enablePagination && rows.length > 0;
+    // Publish column widths as CSS variables (recomputed only when sizing changes).
+    const columnSizeVars = (0, react_1.useMemo)(() => {
+        const vars = {};
+        for (const header of table.getFlatHeaders()) {
+            vars[`--col-${header.column.id}-size`] = `${header.getSize()}px`;
+        }
+        return vars;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [table.getState().columnSizingInfo, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder]);
+    const totalSize = table.getTotalSize();
+    const flexFor = (column) => fitToScreen && !column.getIsPinned()
+        ? `1 1 var(--col-${column.id}-size)`
+        : `0 0 var(--col-${column.id}-size)`;
+    const scrollable = stickyHeader || enableVirtualization;
+    const emptyText = (_a = noRowsMessage !== null && noRowsMessage !== void 0 ? noRowsMessage : emptyMessage) !== null && _a !== void 0 ? _a : 'No rows';
+    const renderHeader = () => table.getHeaderGroups().map((hg) => ((0, jsx_runtime_1.jsx)(styled_1.GridHeaderRow, { role: "row", children: hg.headers.map((header) => {
+            const column = header.column;
+            const align = getAlign(column);
+            const canSort = column.getCanSort();
+            const canResize = enableColumnResizing && column.getCanResize();
+            const canDrag = !!enableColumnReordering && !column.getIsPinned();
+            const sorted = column.getIsSorted();
+            const isDropTarget = dragOverId === column.id && draggingId !== null && draggingId !== column.id;
+            return ((0, jsx_runtime_1.jsxs)(styled_1.GridHeaderCell, { role: "columnheader", "aria-sort": sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none', onClick: canSort ? column.getToggleSortingHandler() : undefined, onDragOver: canDrag ? (e) => { e.preventDefault(); if (dragOverId !== column.id)
+                    setDragOverId(column.id); } : undefined, onDragLeave: canDrag ? () => setDragOverId((cur) => (cur === column.id ? null : cur)) : undefined, onDrop: canDrag ? (e) => {
+                    e.preventDefault();
+                    const dragged = e.dataTransfer.getData('text/plain');
+                    if (dragged && dragged !== column.id)
+                        actions.handleColumnReorder(dragged, column.id);
+                    setDragOverId(null);
+                    setDraggingId(null);
+                } : undefined, style: {
+                    flex: flexFor(column),
+                    width: `var(--col-${column.id}-size)`,
+                    justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',
+                    cursor: canSort ? 'pointer' : 'default',
+                    gap: 4,
+                    ...getPinnedStyle(column),
+                    ...(column.getIsPinned() ? { backgroundColor: 'var(--dt-header-bg)', backgroundImage: 'none' } : {}),
+                    ...(isDropTarget ? { boxShadow: 'inset 2px 0 0 0 var(--dt-resize-handle)' } : {}),
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", draggable: canDrag || undefined, onDragStart: canDrag ? (e) => { e.dataTransfer.setData('text/plain', column.id); e.dataTransfer.effectAllowed = 'move'; setDraggingId(column.id); } : undefined, onDragEnd: canDrag ? () => { setDraggingId(null); setDragOverId(null); } : undefined, sx: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: canDrag ? 'grab' : undefined }, children: header.isPlaceholder ? null : (0, react_table_1.flexRender)(column.columnDef.header, header.getContext()) }), sorted === 'asc' ? (0, jsx_runtime_1.jsx)(icons_material_1.ArrowUpwardOutlined, { sx: { fontSize: 16 } }) : null, sorted === 'desc' ? (0, jsx_runtime_1.jsx)(icons_material_1.ArrowDownwardOutlined, { sx: { fontSize: 16 } }) : null, canResize ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onClick: (e) => e.stopPropagation(), sx: {
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            height: '100%',
+                            width: '6px',
+                            cursor: 'col-resize',
+                            userSelect: 'none',
+                            touchAction: 'none',
+                            '&:hover': { background: 'var(--dt-resize-handle)' },
+                            ...(column.getIsResizing() ? { background: 'var(--dt-resize-handle)' } : {}),
+                        } })) : null] }, header.id));
+        }) }, hg.id)));
+    const renderRow = (rowIndex) => {
+        var _a;
+        const row = rows[rowIndex];
+        if (!row)
+            return null;
+        const isOdd = rowIndex % 2 === 1;
+        return ((0, jsx_runtime_1.jsx)(styled_1.GridRow, { role: "row", "aria-selected": ((_a = table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, row.id)) || undefined, onClick: onRowClick ? (e) => onRowClick(e, row) : undefined, sx: {
+                '--dt-row-bg': striped && isOdd ? theme.palette.action.hover : 'var(--dt-pinned-bg)',
+                background: 'var(--dt-row-bg)',
+                cursor: onRowClick ? 'pointer' : 'default',
+                ...(hover ? { '&:hover': { '--dt-row-bg': 'var(--dt-row-bg-hover)' } } : {}),
+            }, children: row.getVisibleCells().map((cell) => {
+                const column = cell.column;
+                const align = getAlign(column);
+                return ((0, jsx_runtime_1.jsx)(styled_1.GridCell, { role: "cell", style: {
+                        flex: flexFor(column),
+                        width: `var(--col-${column.id}-size)`,
+                        justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',
+                        ...getPinnedStyle(column),
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: { minWidth: 0, width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: align }, children: (0, react_table_1.flexRender)(column.columnDef.cell, cell.getContext()) }) }, cell.id));
+            }) }, row.id));
+    };
+    const renderBody = () => {
+        if (loading) {
+            return Array.from({ length: skeletonRows }).map((_, i) => ((0, jsx_runtime_1.jsx)(styled_1.GridRow, { role: "row", children: table.getVisibleLeafColumns().map((column) => ((0, jsx_runtime_1.jsx)(styled_1.GridCell, { role: "cell", style: { flex: flexFor(column), width: `var(--col-${column.id}-size)`, ...getPinnedStyle(column) }, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "80%" }) }, column.id))) }, `sk-${i}`)));
+        }
+        if (rows.length === 0) {
+            return (0, jsx_runtime_1.jsx)(styled_1.GridOverlay, { role: "row", children: emptyText });
+        }
+        if (isVirtual) {
+            const virtualRows = rowVirtualizer.getVirtualItems();
+            const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
+            const paddingBottom = virtualRows.length ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [paddingTop > 0 ? (0, jsx_runtime_1.jsx)("div", { style: { height: paddingTop } }) : null, virtualRows.map((vr) => renderRow(vr.index)), paddingBottom > 0 ? (0, jsx_runtime_1.jsx)("div", { style: { height: paddingBottom } }) : null] }));
+        }
+        return rows.map((_, i) => renderRow(i));
+    };
+    return ((0, jsx_runtime_1.jsxs)(styled_1.GridRoot, { style: tokens, className: props.className, children: [showToolbar ? ((0, jsx_runtime_1.jsx)(data_table_toolbar_1.DataTableToolbar, { engine: engine, enableGlobalFilter: enableGlobalFilter, enableColumnFilter: enableColumnFilter, enableColumnVisibility: enableColumnVisibility, enableExport: enableExport, enableDensitySelector: enableDensitySelector, enableReset: enableReset, enableRefresh: enableRefresh, extraFilter: extraFilter })) : null, derived.isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(bulk_actions_toolbar_1.BulkActionsToolbar, { selectedCount: derived.selectedRowCount, selectionState: state.selectionState, onClear: () => engine.api.selection.deselectAll(), renderBulkActions: renderBulkActions })) : null, (0, jsx_runtime_1.jsx)(styled_1.GridScroller, { ref: refs.tableContainerRef, role: "table", "aria-rowcount": derived.tableTotalRow, "aria-colcount": table.getVisibleLeafColumns().length, style: scrollable ? { maxHeight } : undefined, children: (0, jsx_runtime_1.jsxs)("div", { style: { ...columnSizeVars, width: fitToScreen ? '100%' : totalSize, minWidth: totalSize }, children: [(0, jsx_runtime_1.jsx)(styled_1.GridHeader, { role: "rowgroup", children: renderHeader() }), (0, jsx_runtime_1.jsx)(styled_1.GridBody, { role: "rowgroup", children: renderBody() })] }) }), enablePagination ? ((0, jsx_runtime_1.jsx)(styled_1.GridFooter, { children: (0, jsx_runtime_1.jsx)(material_1.TablePagination, { component: "div", count: derived.tableTotalRow, page: state.pagination.pageIndex, rowsPerPage: state.pagination.pageSize, onPageChange: (_, page) => engine.api.pagination.goToPage(page), onRowsPerPageChange: (e) => engine.api.pagination.setPageSize(Number(e.target.value)), rowsPerPageOptions: [5, 10, 25, 50, 100] }) })) : null] }));
+}

package/dist/components/grid/styled.d.ts

@@ -0,0 +1,17 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
+type DivSlot = ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+} & RefAttributes<HTMLDivElement>>;
+export declare const GridRoot: DivSlot;
+export declare const GridScroller: DivSlot;
+export declare const GridHeader: DivSlot;
+export declare const GridHeaderRow: DivSlot;
+export declare const GridHeaderCell: DivSlot;
+export declare const GridBody: DivSlot;
+export declare const GridRow: DivSlot;
+export declare const GridCell: DivSlot;
+export declare const GridFooter: DivSlot;
+export declare const GridOverlay: DivSlot;
+export {};
+//# sourceMappingURL=styled.d.ts.map

package/dist/components/grid/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../src/components/grid/styled.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtF,KAAK,OAAO,GAAG,yBAAyB,CACpC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAAE,GAAG,aAAa,CAAC,cAAc,CAAC,CAC3F,CAAC;AAEF,eAAO,MAAM,QAAQ,EAIJ,OAAO,CAAC;AAEzB,eAAO,MAAM,YAAY,EAIR,OAAO,CAAC;AAEzB,eAAO,MAAM,UAAU,EAIN,OAAO,CAAC;AAEzB,eAAO,MAAM,aAAa,EAKT,OAAO,CAAC;AAEzB,eAAO,MAAM,cAAc,EASV,OAAO,CAAC;AAEzB,eAAO,MAAM,QAAQ,EAAkF,OAAO,CAAC;AAE/G,eAAO,MAAM,OAAO,EAKH,OAAO,CAAC;AAEzB,eAAO,MAAM,QAAQ,EAMJ,OAAO,CAAC;AAEzB,eAAO,MAAM,UAAU,EAEN,OAAO,CAAC;AAEzB,eAAO,MAAM,WAAW,EAMP,OAAO,CAAC"}

package/dist/components/grid/styled.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridOverlay = exports.GridFooter = exports.GridCell = exports.GridRow = exports.GridBody = exports.GridHeaderCell = exports.GridHeaderRow = exports.GridHeader = exports.GridScroller = exports.GridRoot = void 0;
+/**
+ * Styled slot primitives. Each uses MUI `styled(..., { name, slot })`, so the
+ * grid participates in MUI theming exactly like a built-in component:
+ * `components.MuiTanstackDataGrid.styleOverrides.{root,scroller,header,...}`.
+ * Visuals read from the `--dt-*` design tokens (which default from the MUI theme).
+ *
+ * Each export is annotated with `DivSlot` — without an explicit, nameable type the
+ * emitted `.d.ts` references pnpm-internal paths (TS2742) and the build fails.
+ */
+const styles_1 = require("@mui/material/styles");
+exports.GridRoot = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Root' })({
+    position: 'relative',
+    width: '100%',
+    fontSize: 'var(--dt-font-size)',
+});
+exports.GridScroller = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Scroller' })({
+    position: 'relative',
+    width: '100%',
+    overflow: 'auto',
+});
+exports.GridHeader = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Header' })({
+    position: 'sticky',
+    top: 0,
+    zIndex: 'var(--dt-z-header)',
+});
+exports.GridHeaderRow = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'HeaderRow' })({
+    display: 'flex',
+    minHeight: 'var(--dt-header-height)',
+    background: 'var(--dt-header-bg)',
+    borderBottom: '1px solid var(--dt-border-color)',
+});
+exports.GridHeaderCell = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'HeaderCell' })({
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    paddingInline: 'var(--dt-cell-padding-x)',
+    fontWeight: 600,
+    color: 'var(--dt-header-color)',
+    userSelect: 'none',
+});
+exports.GridBody = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Body' })({});
+exports.GridRow = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Row' })({
+    display: 'flex',
+    minHeight: 'var(--dt-row-height)',
+    background: 'var(--dt-row-bg)',
+    borderBottom: '1px solid var(--dt-border-color)',
+});
+exports.GridCell = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Cell' })({
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: 0,
+    paddingInline: 'var(--dt-cell-padding-x)',
+});
+exports.GridFooter = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Footer' })({
+    borderTop: '1px solid var(--dt-border-color)',
+});
+exports.GridOverlay = (0, styles_1.styled)('div', { name: 'MuiTanstackDataGrid', slot: 'Overlay' })({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 120,
+    color: 'var(--dt-header-color)',
+});

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+export * from './data-table';
+export * from './grid/grid-view';
+export * from './grid/styled';
+export * from './toolbar/data-table-toolbar';
+export * from './toolbar/bulk-actions-toolbar';
+export * from './toolbar/column-filter-control';
+export * from './filters';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,WAAW,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./data-table"), exports);
+__exportStar(require("./grid/grid-view"), exports);
+__exportStar(require("./grid/styled"), exports);
+__exportStar(require("./toolbar/data-table-toolbar"), exports);
+__exportStar(require("./toolbar/bulk-actions-toolbar"), exports);
+__exportStar(require("./toolbar/column-filter-control"), exports);
+__exportStar(require("./filters"), exports);

package/dist/components/toolbar/bulk-actions-toolbar.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { SelectionState } from '../../types/selection.types';
+export interface BulkActionsToolbarProps {
+    selectedCount: number;
+    selectionState: SelectionState;
+    onClear: () => void;
+    renderBulkActions?: (selectionState: SelectionState) => ReactNode;
+}
+export declare function BulkActionsToolbar({ selectedCount, selectionState, onClear, renderBulkActions }: BulkActionsToolbarProps): ReactNode;
+//# sourceMappingURL=bulk-actions-toolbar.d.ts.map

package/dist/components/toolbar/bulk-actions-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-actions-toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/bulk-actions-toolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,uBAAuB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,cAAc,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,SAAS,CAAC;CACrE;AAED,wBAAgB,kBAAkB,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,iBAAiB,EAAE,EAAE,uBAAuB,GAAG,SAAS,CAyBpI"}

package/dist/components/toolbar/bulk-actions-toolbar.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsToolbar = BulkActionsToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * BulkActionsToolbar — appears above the grid when rows are selected (and
+ * `enableBulkActions` is on). Shows the selected count, a Clear action, and any
+ * custom actions returned by the `renderBulkActions(selectionState)` prop.
+ */
+const material_1 = require("@mui/material");
+function BulkActionsToolbar({ selectedCount, selectionState, onClear, renderBulkActions }) {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 1.5, sx: {
+            m: 1,
+            px: 1.5,
+            py: 0.75,
+            borderRadius: 1,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: { fontWeight: 600 }, children: [selectedCount, " selected"] }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "text", onClick: onClear, sx: { color: 'inherit', textTransform: 'none' }, children: "Clear" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 } }), renderBulkActions === null || renderBulkActions === void 0 ? void 0 : renderBulkActions(selectionState)] }));
+}

package/dist/components/toolbar/column-filter-control.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+import type { UseDataTableResult } from '../../core/use-data-table';
+export interface ColumnFilterControlProps<T> {
+    engine: UseDataTableResult<T>;
+    title?: string;
+}
+export declare function ColumnFilterControl<T extends Record<string, any>>({ engine, title }: ColumnFilterControlProps<T>): ReactElement;
+//# sourceMappingURL=column-filter-control.d.ts.map

package/dist/components/toolbar/column-filter-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-filter-control.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar/column-filter-control.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAwC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAIpE,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACvC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,KAAwB,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,GAAG,YAAY,CA0JlJ"}