@ackplus/react-tanstack-data-table 1.0.35 → 1.1.3

package/{src → dist}/lib/components/rows/data-table-row.js

@@ -1,78 +1,111 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableRow = DataTableRow;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DataTableRow Component
+ *
+ * Renders individual table rows with support for:
+ * - Column pinning
+ * - Row expansion
+ * - Hover effects
+ * - Striped styling
+ */
 const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const utils_1 = require("../../utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 const data_table_context_1 = require("../../contexts/data-table-context");
+/**
+ * Individual table row component with cell rendering and expansion support
+ */
 function DataTableRow(props) {
     var _a;
-    const { row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, onRowClick, selectOnRowClick = false, cellProps, expandedRowProps, expandedCellProps, containerSx, expandedContainerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["row", "enableHover", "enableStripes", "isOdd", "renderSubComponent", "disableStickyHeader", "onRowClick", "selectOnRowClick", "cellProps", "expandedRowProps", "expandedCellProps", "containerSx", "expandedContainerSx", "slots", "slotProps"]);
+    const { row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, onRowClick, selectOnRowClick = false, cellProps, expandedRowProps, expandedCellProps, containerSx, expandedContainerSx, slots, slotProps, ...otherProps } = props;
     const { table } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
     const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
     const expandedRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'expandedRow');
     const rowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'row');
     const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
     const ExpandedRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'expandedRow', material_1.TableRow);
     const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    // Handle row click
     const handleRowClick = (event) => {
+        // Check if click target is a checkbox, button, or interactive element
         const target = event.target;
         const isCheckboxClick = target.closest('input[type="checkbox"]') !== null;
         const isButtonClick = target.closest('button') !== null;
         const isLinkClick = target.closest('a') !== null;
+        // If selectOnRowClick is enabled and it's not a checkbox/interactive element click, toggle selection
         if (selectOnRowClick && !isCheckboxClick && !isButtonClick && !isLinkClick && (table === null || table === void 0 ? void 0 : table.toggleRowSelected)) {
             table.toggleRowSelected(row.id);
         }
+        // Always call onRowClick if provided
         if (onRowClick) {
             onRowClick(event, row);
         }
     };
+    // Merge all props for maximum flexibility
     const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         hover: enableHover,
         selected: !!((_a = table === null || table === void 0 ? void 0 : table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, row.id)),
         onClick: (onRowClick || selectOnRowClick) ? handleRowClick : undefined,
-        sx: (theme) => (Object.assign(Object.assign(Object.assign(Object.assign({ '--row-bg': enableStripes && isOdd
+        sx: (theme) => ({
+            // set the row background as a variable
+            '--row-bg': enableStripes && isOdd
                 ? theme.palette.action.hover
-                : theme.palette.background.paper, backgroundColor: 'var(--row-bg)' }, (enableHover && {
-            '&:hover': { '--row-bg': theme.palette.action.hover },
-        })), { [`&.${material_1.tableRowClasses.selected}`]: {
+                : theme.palette.background.paper,
+            backgroundColor: 'var(--row-bg)',
+            // keep the variable in sync for hover/selected
+            ...(enableHover && {
+                '&:hover': { '--row-bg': theme.palette.action.hover },
+            }),
+            [`&.${material_1.tableRowClasses.selected}`]: {
                 '--row-bg': theme.palette.action.selected,
                 backgroundColor: 'var(--row-bg)',
-            } }), ((onRowClick || selectOnRowClick) && {
-            cursor: 'pointer',
-        })), containerSx)),
+            },
+            // Add cursor pointer if row is clickable
+            ...((onRowClick || selectOnRowClick) && {
+                cursor: 'pointer',
+            }),
+            ...containerSx,
+        }),
     }, rowSlotProps, otherProps);
     const mergedExpandedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: expandedContainerSx,
     }, expandedRowSlotProps, expandedRowProps || {});
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, mergedRowProps, { children: row.getVisibleCells().map(cell => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, { ...mergedRowProps, children: row.getVisibleCells().map(cell => {
                     var _a, _b;
                     const isPinned = cell.column.getIsPinned();
                     const pinnedPosition = isPinned ? cell.column.getStart('left') : undefined;
                     const pinnedRightPosition = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
                     const alignment = (0, utils_1.getColumnAlignment)(cell.column.columnDef);
+                    // Get minSize and maxSize from column definition
                     const minSize = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.minSize;
                     const maxSize = cell.column.columnDef.maxSize;
                     const wrapText = (_b = cell.column.columnDef.wrapText) !== null && _b !== void 0 ? _b : false;
                     const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
                         align: alignment,
-                        sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
-                            width: cell.column.getSize() || 'auto',
-                            minWidth: minSize !== undefined ? minSize : undefined,
-                            maxWidth: maxSize !== undefined ? maxSize : undefined,
-                            isPinned,
-                            pinnedPosition,
-                            pinnedRightPosition,
-                            zIndex: isPinned ? 9 : 1,
-                            disableStickyHeader,
-                            isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
-                            isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
-                            wrapText,
-                        })),
+                        sx: {
+                            ...(0, utils_1.getPinnedColumnStyle)({
+                                width: cell.column.getSize() || 'auto',
+                                minWidth: minSize !== undefined ? minSize : undefined,
+                                maxWidth: maxSize !== undefined ? maxSize : undefined,
+                                isPinned,
+                                pinnedPosition,
+                                pinnedRightPosition,
+                                zIndex: isPinned ? 9 : 1,
+                                disableStickyHeader,
+                                isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
+                                isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
+                                wrapText,
+                            }),
+                        },
                     }, cellSlotProps, cellProps || {});
-                    return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({}, mergedCellProps, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));
-                }) })), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, Object.assign({}, mergedExpandedRowProps, { children: (0, jsx_runtime_1.jsx)(CellSlot, Object.assign({ colSpan: row.getVisibleCells().length + 1, sx: Object.assign({ py: 0 }, expandedCellProps === null || expandedCellProps === void 0 ? void 0 : expandedCellProps.sx) }, (0, slot_helpers_1.mergeSlotProps)({}, cellSlotProps, expandedCellProps || {}), { children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) })) }))) : null] }));
+                    return ((0, jsx_runtime_1.jsx)(CellSlot, { ...mergedCellProps, children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                }) }), row.getIsExpanded() && renderSubComponent ? ((0, jsx_runtime_1.jsx)(ExpandedRowSlot, { ...mergedExpandedRowProps, children: (0, jsx_runtime_1.jsx)(CellSlot, { colSpan: row.getVisibleCells().length, sx: {
+                        py: 0,
+                        ...expandedCellProps === null || expandedCellProps === void 0 ? void 0 : expandedCellProps.sx,
+                    }, ...(0, slot_helpers_1.mergeSlotProps)({}, cellSlotProps, expandedCellProps || {}), children: (0, jsx_runtime_1.jsx)(material_1.Collapse, { in: row.getIsExpanded(), timeout: "auto", unmountOnExit: true, children: renderSubComponent(row) }) }) })) : null] }));
 }

package/{src → dist}/lib/components/rows/empty-data-row.d.ts

@@ -1,5 +1,5 @@
 import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export interface EmptyDataRowProps {
     colSpan: number;
     message: string | ReactNode;
@@ -9,6 +9,6 @@ export interface EmptyDataRowProps {
     messageSx?: SxProps;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
-    [key: string]: any;
 }
-export declare function EmptyDataRow(props: EmptyDataRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyDataRow(props: EmptyDataRowProps): ReactElement;
+//# sourceMappingURL=empty-data-row.d.ts.map

package/dist/lib/components/rows/empty-data-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-data-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/empty-data-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,iBAAiB;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAoDnE"}

package/{src → dist}/lib/components/rows/empty-data-row.js

@@ -1,23 +1,31 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyDataRow = EmptyDataRow;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function EmptyDataRow(props) {
-    const { colSpan, message, rowProps, cellProps, containerSx, messageSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["colSpan", "message", "rowProps", "cellProps", "containerSx", "messageSx", "slots", "slotProps"]);
+    const { colSpan, message, rowProps, cellProps, containerSx, messageSx, slots, slotProps, } = props;
+    // Extract slot-specific props with enhanced merging
     const emptyRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'emptyRow');
     const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
     const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', material_1.TableRow);
     const EmptyCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
+    // Merge all props for maximum flexibility
     const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: containerSx,
     }, emptyRowSlotProps, rowProps || {});
     const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
         colSpan,
         align: 'center',
-        sx: Object.assign({ py: 4 }, messageSx),
+        sx: {
+            py: 4,
+            ...messageSx,
+        },
     }, cellSlotProps, cellProps || {});
-    return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, Object.assign({}, mergedRowProps, { children: (0, jsx_runtime_1.jsx)(EmptyCellSlot, Object.assign({}, mergedCellProps, { children: message })) })));
+    return ((0, jsx_runtime_1.jsx)(EmptyRowSlot, { ...mergedRowProps, children: (0, jsx_runtime_1.jsx)(EmptyCellSlot, { ...mergedCellProps, children: message }) }));
 }

package/dist/lib/components/rows/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Row components for DataTable
+ */
+export * from './data-table-row';
+export * from './empty-data-row';
+export * from './loading-rows';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/dist/lib/components/rows/index.js

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * Row components for DataTable
+ */
+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-row"), exports);
+__exportStar(require("./empty-data-row"), exports);
+__exportStar(require("./loading-rows"), exports);

package/{src → dist}/lib/components/rows/loading-rows.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
 export interface LoadingRowsProps {
     rowCount?: number;
@@ -9,4 +10,5 @@ export interface LoadingRowsProps {
     slotProps?: Record<string, any>;
     [key: string]: any;
 }
-export declare function LoadingRows(props: LoadingRowsProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingRows(props: LoadingRowsProps): ReactElement;
+//# sourceMappingURL=loading-rows.d.ts.map

package/dist/lib/components/rows/loading-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-rows.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/loading-rows.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAiC,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAMtG,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA4IjE"}

package/{src → dist}/lib/components/rows/loading-rows.js

@@ -1,59 +1,67 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingRows = LoadingRows;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const utils_1 = require("../../utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function LoadingRows(props) {
-    const { rowCount = 5, rowProps, cellProps, skeletonProps, containerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["rowCount", "rowProps", "cellProps", "skeletonProps", "containerSx", "slots", "slotProps"]);
+    const { rowCount = 5, rowProps, cellProps, skeletonProps, containerSx, slots, slotProps, } = props;
     const { table } = (0, data_table_context_1.useDataTableContext)();
     const visibleColumns = table.getVisibleLeafColumns();
+    // Extract slot-specific props with enhanced merging
     const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
     const rowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'row');
     const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
     const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    // Merge all props for maximum flexibility
     const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: containerSx,
     }, rowSlotProps, rowProps || {});
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, mergedRowProps, { children: visibleColumns.map((column, colIndex) => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, { ...mergedRowProps, children: visibleColumns.map((column, colIndex) => {
                 var _a;
                 const isPinned = column.getIsPinned();
                 const pinnedPosition = isPinned ? column.getStart('left') : undefined;
                 const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
+                // Determine skeleton type based on column meta or content
                 const columnMeta = (_a = column.columnDef) === null || _a === void 0 ? void 0 : _a.meta;
                 const isDateColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'date';
                 const isBooleanColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'boolean';
                 const isNumberColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'number';
                 const isSelectionColumn = column.id === 'select';
                 const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
-                    sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
-                        width: column.getSize() || 'auto',
-                        isPinned,
-                        pinnedPosition,
-                        pinnedRightPosition,
-                        zIndex: isPinned ? 9 : 1,
-                        isLastLeftPinnedColumn: isPinned === 'left' && column.getIsLastColumn('left'),
-                        isFirstRightPinnedColumn: isPinned === 'right' && column.getIsFirstColumn('right'),
-                    })),
+                    sx: {
+                        ...(0, utils_1.getPinnedColumnStyle)({
+                            width: column.getSize() || 'auto',
+                            isPinned,
+                            pinnedPosition,
+                            pinnedRightPosition,
+                            zIndex: isPinned ? 9 : 1,
+                            isLastLeftPinnedColumn: isPinned === 'left' && column.getIsLastColumn('left'),
+                            isFirstRightPinnedColumn: isPinned === 'right' && column.getIsFirstColumn('right'),
+                        }),
+                    },
                 }, cellSlotProps, cellProps || {});
                 const getSkeletonContent = () => {
                     if (isSelectionColumn) {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "rectangular", width: 20, height: 20, animation: "wave" }, skeletonProps)));
+                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 20, height: 20, animation: "wave", ...skeletonProps }));
                     }
                     if (isBooleanColumn) {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "circular", width: 16, height: 16, animation: "wave" }, skeletonProps)));
+                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 16, height: 16, animation: "wave", ...skeletonProps }));
                     }
                     if (isDateColumn) {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "text", width: "80%", height: 20, animation: "wave" }, skeletonProps)));
+                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: "80%", height: 20, animation: "wave", ...skeletonProps }));
                     }
                     if (isNumberColumn) {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "text", width: "60%", height: 20, animation: "wave" }, skeletonProps)));
+                        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: "60%", height: 20, animation: "wave", ...skeletonProps }));
                     }
-                    return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, Object.assign({ variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave" }, skeletonProps)));
+                    return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: `${Math.random() * 40 + 60}%`, height: 20, animation: "wave", ...skeletonProps }));
                 };
-                return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({}, mergedCellProps, { children: getSkeletonContent() }), `skeleton-${column.id || colIndex}-${rowIndex}`));
-            }) }), `skeleton-row-${rowIndex}`))) }));
+                return ((0, jsx_runtime_1.jsx)(CellSlot, { ...mergedCellProps, children: getSkeletonContent() }, `skeleton-${column.id || colIndex}-${rowIndex}`));
+            }) }, `skeleton-row-${rowIndex}`))) }));
 }

package/{src → dist}/lib/components/toolbar/bulk-actions-toolbar.d.ts

@@ -1,7 +1,7 @@
 import { ToolbarProps, SxProps } from '@mui/material';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 import { SelectionState } from '../../features';
-export interface BulkActionsToolbarProps<T = any> extends ToolbarProps {
+export interface BulkActionsToolbarProps extends ToolbarProps {
     selectionState: SelectionState;
     selectedRowCount: number;
     bulkActions?: (selectionState: SelectionState) => ReactNode;
@@ -12,4 +12,5 @@ export interface BulkActionsToolbarProps<T = any> extends ToolbarProps {
     fadeProps?: any;
     [key: string]: any;
 }
-export declare function BulkActionsToolbar<T = any>(props: BulkActionsToolbarProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function BulkActionsToolbar(props: BulkActionsToolbarProps): ReactElement;
+//# sourceMappingURL=bulk-actions-toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-actions-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/bulk-actions-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQH,YAAY,EACZ,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAW,YAAY,EAAE,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,MAAM,WAAW,uBAAwB,SAAQ,YAAY;IACzD,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,SAAS,CAAC;IAE5D,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CA8F/E"}

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsToolbar = BulkActionsToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function BulkActionsToolbar(props) {
+    const { selectionState, selectedRowCount, bulkActions, chipProps, containerSx, leftSectionSx, rightSectionSx, fadeProps, sx, ...otherProps } = props;
+    const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
+    const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'bulkActionsToolbar');
+    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', material_1.Toolbar);
+    // Memoize the bulk actions rendering to prevent infinite re-renders
+    const renderedBulkActions = (0, react_1.useMemo)(() => {
+        if (!bulkActions)
+            return null;
+        return bulkActions(selectionState);
+    }, [bulkActions, selectionState]);
+    // Merge all props for maximum flexibility
+    const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
+        sx: {
+            pl: { sm: 2 },
+            pr: { xs: 1, sm: 1 },
+            bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.main, 0.05),
+            mb: 1,
+            position: 'relative',
+            zIndex: 1,
+            ...sx,
+            ...containerSx,
+        },
+    }, toolbarSlotProps, otherProps);
+    const mergedChipProps = (0, slot_helpers_1.mergeSlotProps)({
+        label: `${selectedRowCount} selected`,
+        size: 'small',
+        color: 'primary',
+        variant: 'outlined',
+    }, chipProps || {});
+    return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: selectedRowCount > 0, ...fadeProps, children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, { ...mergedToolbarProps, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        flex: '1 1 100%',
+                        ...leftSectionSx,
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, { ...mergedChipProps }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                        ...rightSectionSx,
+                    }, children: renderedBulkActions })] }) }));
+}

package/{src → dist}/lib/components/toolbar/column-filter-control.d.ts

@@ -1,4 +1,5 @@
 import { IconButtonProps, SxProps } from '@mui/material';
+import { ReactElement } from 'react';
 export interface ColumnFilterControlProps {
     title?: string;
     titleSx?: SxProps;
@@ -11,4 +12,5 @@ export interface ColumnFilterControlProps {
     logicSelectProps?: any;
     [key: string]: any;
 }
-export declare function ColumnFilterControl(props?: ColumnFilterControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnFilterControl(props?: ColumnFilterControlProps): ReactElement;
+//# sourceMappingURL=column-filter-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-filter-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-filter-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAYH,eAAe,EACf,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAc,EAAmC,YAAY,EAAE,MAAM,OAAO,CAAC;AAc7E,MAAM,WAAW,wBAAwB;IAErC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,GAAG,YAAY,CAyUtF"}