@ackplus/react-tanstack-data-table 1.1.20 → 1.1.21

package/src/lib/components/rows/loading-rows.tsx

@@ -1,164 +0,0 @@
-import React, { ReactElement } from 'react';
-import { TableCell, TableRow, Skeleton, TableRowProps, TableCellProps, SxProps } from '@mui/material';
-
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { getPinnedColumnStyle } from '../../utils';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-
-export interface LoadingRowsProps {
-    rowCount?: number;
-    // Enhanced customization props
-    rowProps?: TableRowProps;
-    cellProps?: TableCellProps;
-    skeletonProps?: any;
-    containerSx?: SxProps;
-    slots?: Record<string, any>;
-    slotProps?: Record<string, any>;
-    [key: string]: any;
-}
-
-export function LoadingRows(props: LoadingRowsProps): ReactElement {
-    const {
-        rowCount = 5,
-        rowProps,
-        cellProps,
-        skeletonProps,
-        containerSx,
-        slots,
-        slotProps,
-    } = props;
-
-    const { table } = useDataTableContext();
-    const visibleColumns = table.getVisibleLeafColumns();
-    
-    // Extract slot-specific props with enhanced merging
-    const cellSlotProps = extractSlotProps(slotProps, 'cell');
-    const rowSlotProps = extractSlotProps(slotProps, 'row');
-    
-    const CellSlot = getSlotComponent(slots, 'cell', TableCell);
-    const TableRowSlot = getSlotComponent(slots, 'row', TableRow);
-
-    // Merge all props for maximum flexibility
-    const mergedRowProps = mergeSlotProps(
-        {
-            sx: containerSx,
-        },
-        rowSlotProps,
-        rowProps || {}
-    );
-
-    return (
-        <>
-            {Array.from({ length: rowCount }, (_, rowIndex) => (
-                <TableRowSlot
-                    key={`skeleton-row-${rowIndex}`}
-                    {...mergedRowProps}
-                >
-                    {visibleColumns.map((column: any, colIndex: number) => {
-                        const isPinned = column.getIsPinned();
-                        const pinnedPosition = isPinned ? column.getStart('left') : undefined;
-                        const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
-                        const minSize = column.columnDef?.minSize;
-                        const maxSize = column.columnDef?.maxSize;
-
-                        // Determine skeleton type based on column meta or content
-                        const columnMeta = column.columnDef?.meta;
-                        const isDateColumn = columnMeta?.type === 'date';
-                        const isBooleanColumn = columnMeta?.type === 'boolean';
-                        const isNumberColumn = columnMeta?.type === 'number';
-                        const isSelectionColumn = column.id === 'select';
-
-                        const mergedCellProps = mergeSlotProps(
-                            {
-                                sx: {
-                                    ...getPinnedColumnStyle({
-                                        width: column.getSize(),
-                                        minWidth: minSize !== undefined ? minSize : undefined,
-                                        maxWidth: maxSize !== undefined ? maxSize : undefined,
-                                        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 (
-                                    <Skeleton
-                                        variant="rectangular"
-                                        width={20}
-                                        height={20}
-                                        animation="wave"
-                                        {...skeletonProps}
-                                    />
-                                );
-                            }
-
-                            if (isBooleanColumn) {
-                                return (
-                                    <Skeleton
-                                        variant="circular"
-                                        width={16}
-                                        height={16}
-                                        animation="wave"
-                                        {...skeletonProps}
-                                    />
-                                );
-                            }
-
-                            if (isDateColumn) {
-                                return (
-                                    <Skeleton
-                                        variant="text"
-                                        width="80%"
-                                        height={20}
-                                        animation="wave"
-                                        {...skeletonProps}
-                                    />
-                                );
-                            }
-
-                            if (isNumberColumn) {
-                                return (
-                                    <Skeleton
-                                        variant="text"
-                                        width="60%"
-                                        height={20}
-                                        animation="wave"
-                                        {...skeletonProps}
-                                    />
-                                );
-                            }
-
-                            return (
-                                <Skeleton
-                                    variant="text"
-                                    width={`${Math.random() * 40 + 60}%`}
-                                    height={20}
-                                    animation="wave"
-                                    {...skeletonProps}
-                                />
-                            );
-                        };
-
-                        return (
-                            <CellSlot
-                                key={`skeleton-${column.id || colIndex}-${rowIndex}`}
-                                {...mergedCellProps}
-                            >
-                                {getSkeletonContent()}
-                            </CellSlot>
-                        );
-                    })}
-                </TableRowSlot>
-            ))}
-        </>
-    );
-}

package/src/lib/components/toolbar/bulk-actions-toolbar.tsx

@@ -1,125 +0,0 @@
-import {
-    Box,
-    Toolbar,
-    Typography,
-    Chip,
-    Fade,
-    alpha,
-    Theme,
-    ToolbarProps,
-    SxProps,
-} from '@mui/material';
-import { ReactNode, useMemo, ReactElement } from 'react';
-
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-import { SelectionState } from '../../features';
-
-export interface BulkActionsToolbarProps extends ToolbarProps {
-    selectionState: SelectionState;
-    selectedRowCount: number;
-    bulkActions?: (selectionState: SelectionState) => ReactNode;
-    // Enhanced customization props
-    chipProps?: any;
-    containerSx?: SxProps;
-    leftSectionSx?: SxProps;
-    rightSectionSx?: SxProps;
-    fadeProps?: any;
-    [key: string]: any;
-}
-
-export function BulkActionsToolbar(props: BulkActionsToolbarProps): ReactElement {
-    const {
-        selectionState,
-        selectedRowCount,
-        bulkActions,
-        chipProps,
-        containerSx,
-        leftSectionSx,
-        rightSectionSx,
-        fadeProps,
-        sx,
-        ...otherProps
-    } = props;
-
-    const { slots, slotProps } = useDataTableContext();
-
-    // Extract slot-specific props with enhanced merging
-    const toolbarSlotProps = extractSlotProps(slotProps, 'bulkActionsToolbar');
-    const ToolbarSlot = getSlotComponent(slots, 'bulkActionsToolbar', Toolbar);
-
-    // Memoize the bulk actions rendering to prevent infinite re-renders
-    const renderedBulkActions = useMemo(() => {
-        if (!bulkActions) return null;
-        return bulkActions(selectionState) as any;
-    }, [bulkActions, selectionState]);
-
-    // Merge all props for maximum flexibility
-    const mergedToolbarProps = mergeSlotProps(
-        {
-            sx: {
-                pl: { sm: 2 },
-                pr: { xs: 1, sm: 1 },
-                bgcolor: (theme: Theme) => alpha(theme.palette.primary.main, 0.05),
-                mb: 1,
-                position: 'relative',
-                zIndex: 1,
-                ...sx,
-                ...containerSx,
-            },
-        },
-        toolbarSlotProps,
-        otherProps
-    );
-
-    const mergedChipProps = mergeSlotProps(
-        {
-            label: `${selectedRowCount} selected`,
-            size: 'small',
-            color: 'primary',
-            variant: 'outlined',
-        },
-        chipProps || {}
-    );
-
-    return (
-        <Fade
-            in={selectedRowCount > 0}
-            {...fadeProps}
-        >
-            <ToolbarSlot
-                {...mergedToolbarProps}
-            >
-                {/* Left section - Selection info */}
-                <Box
-                    sx={{
-                        flex: '1 1 100%',
-                        ...leftSectionSx,
-                    }}
-                >
-                    <Typography
-                        color="inherit"
-                        variant="subtitle1"
-                        component="div"
-                    >
-                        <Chip
-                            {...mergedChipProps}
-                        />
-                    </Typography>
-                </Box>
-
-                {/* Right section - Actions */}
-                <Box
-                    sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        ...rightSectionSx,
-                    }}
-                >
-                    {renderedBulkActions}
-                </Box>
-            </ToolbarSlot>
-        </Fade>
-    );
-}