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

package/src/lib/components/toolbar/data-table-toolbar.tsx

@@ -1,257 +0,0 @@
-import {
-    Stack,
-    Toolbar,
-    Typography,
-    Box,
-    ToolbarProps,
-    SxProps,
-} from '@mui/material';
-import React, { ReactNode, ReactElement } from 'react';
-
-import { ColumnFilterControl } from './column-filter-control';
-import { ColumnPinningControl } from './column-pinning-control';
-import { ColumnResetControl } from './column-reset-control';
-import { ColumnVisibilityControl } from './column-visibility-control';
-import { TableExportControl } from './table-export-control';
-import { TableSearchControl } from './table-search-control';
-import { TableSizeControl } from './table-size-control';
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { TableRefreshControl } from './table-refresh-control';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-
-export interface DataTableToolbarProps extends ToolbarProps {
-    extraFilter?: ReactNode;
-    enableGlobalFilter?: boolean;
-    title?: string;
-    subtitle?: string;
-    enableColumnVisibility?: boolean;
-    enableExport?: boolean;
-    enableReset?: boolean;
-    enableColumnFilter?: boolean;
-    enableTableSizeControl?: boolean;
-    enableColumnPinning?: boolean;
-    // Enhanced styling props
-    titleSx?: SxProps;
-    subtitleSx?: SxProps;
-    containerSx?: SxProps;
-    leftSectionSx?: SxProps;
-    rightSectionSx?: SxProps;
-    // Allow full customization of any prop
-    [key: string]: any;
-}
-
-export function DataTableToolbar(props: DataTableToolbarProps = {}): ReactElement {
-    const {
-        extraFilter = null,
-        enableGlobalFilter = true,
-        title,
-        subtitle,
-        enableColumnVisibility = true,
-        enableExport = true,
-        enableReset = true,
-        enableRefresh = false,
-        enableColumnFilter = true,
-        enableTableSizeControl = true,
-        enableColumnPinning = true,
-        titleSx,
-        subtitleSx,
-        containerSx,
-        leftSectionSx,
-        rightSectionSx,
-        ...otherProps
-    } = props;
-
-    const { table, slots, slotProps = {} } = useDataTableContext();
-    
-    // Extract slot-specific props with enhanced merging
-    const toolbarSlotProps = extractSlotProps(slotProps, 'toolbar');
-    const searchInputSlotProps = extractSlotProps(slotProps, 'searchInput');
-    const tableSizeControlSlotProps = extractSlotProps(slotProps, 'tableSizeControl');
-    const columnCustomFilterControlSlotProps = extractSlotProps(slotProps, 'columnCustomFilterControl');
-    const columnPinningControlSlotProps = extractSlotProps(slotProps, 'columnPinningControl');
-    const columnVisibilityControlSlotProps = extractSlotProps(slotProps, 'columnVisibilityControl');
-    const resetButtonSlotProps = extractSlotProps(slotProps, 'resetButton');
-    const exportButtonSlotProps = extractSlotProps(slotProps, 'exportButton');
-    const refreshButtonSlotProps = extractSlotProps(slotProps, 'refreshButton');
-
-    const ToolbarSlot = getSlotComponent(slots, 'toolbar', Toolbar);
-    const TableSearchControlSlot = getSlotComponent(slots, 'searchInput', TableSearchControl);
-    const TableSizeControlSlot = getSlotComponent(slots, 'tableSizeControl', TableSizeControl);
-    const ColumnCustomFilterControlSlot = getSlotComponent(slots, 'columnCustomFilterControl', ColumnFilterControl);
-    const ColumnPinningControlSlot = getSlotComponent(slots, 'columnPinningControl', ColumnPinningControl);
-    const ColumnVisibilityControlSlot = getSlotComponent(slots, 'columnVisibilityControl', ColumnVisibilityControl);
-    const ColumnResetControlSlot = getSlotComponent(slots, 'resetButton', ColumnResetControl);
-    const TableExportControlSlot = getSlotComponent(slots, 'exportButton', TableExportControl);
-    const TableRefreshControlSlot = getSlotComponent(slots, 'refreshButton', TableRefreshControl);
-
-    // Merge all props for maximum flexibility
-    const mergedToolbarProps = mergeSlotProps(
-        {
-            // Default toolbar props
-            table,
-            ...otherProps,
-        },
-        toolbarSlotProps
-    );
-
-    // Omit child-slot props so they are not spread onto the Toolbar DOM element (React warning)
-    const TOOLBAR_CHILD_SLOT_KEYS = [
-        'refreshButtonProps',
-        'searchInputProps',
-        'tableSizeControlProps',
-        'columnFilterProps',
-        'columnPinningProps',
-        'columnVisibilityProps',
-        'resetButtonProps',
-        'exportButtonProps',
-    ] as const;
-    const toolbarDomProps = { ...mergedToolbarProps };
-    TOOLBAR_CHILD_SLOT_KEYS.forEach((key) => delete toolbarDomProps[key]);
-
-    return (
-        <ToolbarSlot
-            {...toolbarDomProps}
-        >
-            <Box 
-                sx={{ 
-                    width: '100%',
-                    ...containerSx,
-                }}
-            >
-                {(title || subtitle) ? (
-                    <Box sx={{ mb: 2 }}>
-                        {title ? (
-                            <Typography
-                                variant="h6"
-                                component="div"
-                                sx={titleSx}
-                            >
-                                {title}
-                            </Typography>
-                        ) : null}
-                        {subtitle ? (
-                            <Typography
-                                variant="body2"
-                                color="text.secondary"
-                                sx={subtitleSx}
-                            >
-                                {subtitle}
-                            </Typography>
-                        ) : null}
-                    </Box>
-                ) : null}
-
-                <Stack
-                    direction="row"
-                    spacing={2}
-                    justifyContent="space-between"
-                    alignItems="center"
-                >
-                    {/* Left Section - Search, Filters, Actions, and Status */}
-                    <Stack
-                        direction="row"
-                        spacing={0.5}
-                        alignItems="center"
-                        sx={{ 
-                            flex: 1,
-                            ...leftSectionSx,
-                        }}
-                    >
-                        {/* Table Actions and Filters */}
-                        {enableTableSizeControl ? (
-                            <TableSizeControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    tableSizeControlSlotProps,
-                                    props.tableSizeControlProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {enableColumnFilter ? (
-                            <ColumnCustomFilterControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    columnCustomFilterControlSlotProps,
-                                    props.columnFilterProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {enableColumnPinning ? (
-                            <ColumnPinningControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    columnPinningControlSlotProps,
-                                    props.columnPinningProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {enableColumnVisibility ? (
-                            <ColumnVisibilityControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    columnVisibilityControlSlotProps,
-                                    props.columnVisibilityProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {enableReset ? (
-                            <ColumnResetControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    resetButtonSlotProps,
-                                    props.resetButtonProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {enableExport ? (
-                            <TableExportControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    exportButtonSlotProps,
-                                    props.exportButtonProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {/* Search */}
-                        {enableGlobalFilter ? (
-                            <TableSearchControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    searchInputSlotProps,
-                                    props.searchInputProps || {}
-                                )}
-                            />
-                        ) : null}
-
-                        {enableRefresh ? (
-                            <TableRefreshControlSlot 
-                                {...mergeSlotProps(
-                                    {},
-                                    refreshButtonSlotProps,
-                                    props.refreshButtonProps || {}
-                                )}
-                            />
-                        ) : null}
-                    </Stack>
-
-                    {/* Right Section - Extra Filter and More Menu */}
-                    <Stack
-                        direction="row"
-                        spacing={1}
-                        alignItems="center"
-                        sx={rightSectionSx}
-                    >
-                        {/* Extra Filter */}
-                        {extraFilter as any}
-                    </Stack>
-                </Stack>
-            </Box>
-        </ToolbarSlot>
-    );
-}

package/src/lib/components/toolbar/index.ts

@@ -1,17 +0,0 @@
-/**
- * Toolbar components for DataTable
- */
-
-// Main toolbar component
-export { DataTableToolbar } from './data-table-toolbar';
-
-// Individual toolbar building blocks - export for custom toolbars
-export { ColumnVisibilityControl } from './column-visibility-control';
-export { ColumnPinningControl } from './column-pinning-control';
-export { ColumnResetControl } from './column-reset-control';
-export { TableExportControl } from './table-export-control';
-export { TableSizeControl } from './table-size-control';
-export { ColumnFilterControl } from './column-filter-control';
-// Bulk actions
-export { BulkActionsToolbar } from './bulk-actions-toolbar';
-export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';

package/src/lib/components/toolbar/table-export-control.tsx

@@ -1,233 +0,0 @@
-import { CloudDownloadOutlined } from '@mui/icons-material';
-import React from 'react';
-import {
-    IconButton,
-    Tooltip,
-    MenuItem,
-    ListItemIcon,
-    ListItemText,
-    Typography,
-    Box,
-    IconButtonProps,
-    SxProps,
-    Divider,
-    LinearProgress,
-} from '@mui/material';
-
-import { MenuDropdown } from '../droupdown/menu-dropdown';
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { ExcelIcon, CsvIcon } from '../../icons';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-
-interface TableExportControlProps {
-    // Optional props to override context defaults
-    exportFilename?: string;
-    // onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{ data: any[]; total: number }>;
-    // onExportProgress?: (progress: { processedRows?: number; totalRows?: number; percentage?: number }) => void;
-    // onExportComplete?: (result: { success: boolean; filename: string; totalRows: number }) => void;
-    // onExportError?: (error: { message: string; code: string }) => void;
-    // Enhanced customization props
-    iconButtonProps?: IconButtonProps;
-    tooltipProps?: any;
-    menuSx?: SxProps;
-    menuItemProps?: any;
-    [key: string]: any;
-}
-
-export function TableExportControl(props: TableExportControlProps = {}) {
-    const {
-        exportFilename: propsExportFilename,
-        iconButtonProps,
-        tooltipProps,
-        menuSx,
-        menuItemProps,
-    } = props;
-
-    const {
-        apiRef,
-        slots,
-        slotProps,
-        isExporting,
-        exportPhase,
-        exportProgress,
-        onCancelExport,
-        // Export callbacks from context (DataTable props)
-        exportFilename: contextExportFilename,
-    } = useDataTableContext();
-
-    // Use props if provided, otherwise fall back to context values
-    const exportFilename = propsExportFilename || contextExportFilename || 'export';
-
-    // Extract slot-specific props with enhanced merging
-    const exportIconSlotProps = extractSlotProps(slotProps, 'exportIcon');
-    const csvIconSlotProps = extractSlotProps(slotProps, 'csvIcon');
-    const excelIconSlotProps = extractSlotProps(slotProps, 'excelIcon');
-
-    const ExportIconSlot = getSlotComponent(slots, 'exportIcon', CloudDownloadOutlined);
-    const CsvIconSlot = getSlotComponent(slots, 'csvIcon', CsvIcon);
-    const ExcelIconSlot = getSlotComponent(slots, 'excelIcon', ExcelIcon);
-
-    const handleExport = async (format: 'csv' | 'excel') => {
-        if (!apiRef?.current) return;
-
-        try {
-            if (format === 'csv') {
-                await apiRef.current.export.exportCSV({
-                    filename: exportFilename,
-                });
-            } else {
-                await apiRef.current.export.exportExcel({
-                    filename: exportFilename,
-                });
-            }
-        } catch (error) {
-            console.error('Export failed:', error);
-        }
-    };
-
-    const handleCancelExport = () => {
-        if (onCancelExport) {
-            onCancelExport();
-            return;
-        }
-        apiRef?.current?.export.cancelExport();
-    };
-
-    // Merge all props for maximum flexibility
-    const mergedIconButtonProps = mergeSlotProps(
-        {
-            size: 'small',
-            sx: { flexShrink: 0 },
-        },
-        exportIconSlotProps,
-        iconButtonProps || {}
-    );
-
-    const mergedMenuItemProps = mergeSlotProps(
-        {
-            sx: { minWidth: 150 },
-        },
-        menuItemProps || {}
-    );
-
-    const progressPercentage = typeof exportProgress?.percentage === 'number'
-        ? Math.max(0, Math.min(100, exportProgress.percentage))
-        : undefined;
-
-    const getPhaseLabel = () => {
-        switch (exportPhase) {
-            case 'fetching':
-                return 'Fetching rows from server...';
-            case 'processing':
-                return 'Preparing export file...';
-            case 'downloading':
-                return 'Downloading file...';
-            case 'starting':
-                return 'Starting export...';
-            default:
-                return 'Export in progress...';
-        }
-    };
-
-    return (
-        <MenuDropdown
-            anchor={(
-                <Tooltip 
-                    title={isExporting ? 'Export in progress...' : 'Export data'}
-                    {...tooltipProps}
-                >
-                    <IconButton
-                        {...mergedIconButtonProps}
-                    >
-                        <ExportIconSlot {...exportIconSlotProps} />
-                    </IconButton>
-                </Tooltip>
-            )}
-        >
-            {({ handleClose }: { handleClose: () => void }) => (
-                <Box
-                    sx={{
-                        minWidth: 200,
-                        ...menuSx,
-                    }}
-                >
-                    <Typography
-                        variant="subtitle2"
-                        sx={{ p: 2, pb: 1 }}
-                    >
-                        Export Format
-                    </Typography>
-                    
-                    <MenuItem
-                        onClick={() => {
-                            handleExport('csv');
-                        }}
-                        disabled={isExporting}
-                        {...mergedMenuItemProps}
-                    >
-                        <ListItemIcon>
-                            <CsvIconSlot {...csvIconSlotProps} />
-                        </ListItemIcon>
-                        <ListItemText
-                            primary="CSV"
-                            secondary="Comma-separated values"
-                        />
-                    </MenuItem>
-
-                    <MenuItem
-                        onClick={() => {
-                            handleExport('excel');
-                        }}
-                        disabled={isExporting}
-                        {...mergedMenuItemProps}
-                    >
-                        <ListItemIcon>
-                            <ExcelIconSlot {...excelIconSlotProps} />
-                        </ListItemIcon>
-                        <ListItemText
-                            primary="Excel"
-                            secondary="Microsoft Excel format"
-                        />
-                    </MenuItem>
-
-                    {isExporting && (
-                        <>
-                            <Box sx={{ px: 2, pb: 1 }}>
-                                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.75 }}>
-                                    {getPhaseLabel()}
-                                </Typography>
-                                <LinearProgress
-                                    variant={progressPercentage !== undefined ? 'determinate' : 'indeterminate'}
-                                    value={progressPercentage !== undefined ? progressPercentage : 0}
-                                />
-                                {(exportProgress?.processedRows !== undefined || exportProgress?.totalRows !== undefined) && (
-                                    <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.75 }}>
-                                        {`${exportProgress?.processedRows ?? 0}${exportProgress?.totalRows !== undefined ? ` / ${exportProgress.totalRows}` : ''}${progressPercentage !== undefined ? ` (${progressPercentage}%)` : ''}`}
-                                    </Typography>
-                                )}
-                            </Box>
-                            <Divider sx={{ my: 1 }} />
-                            <MenuItem
-                                onClick={() => {
-                                    handleCancelExport();
-                                    handleClose();
-                                }}
-                                {...mergedMenuItemProps}
-                            >
-                                <ListItemText
-                                    primary="Cancel Export"
-                                    secondary="Stop current export job"
-                                    slotProps={{
-                                        primary: {
-                                            color: 'error.main',
-                                        },
-                                    }}
-                                />
-                            </MenuItem>
-                        </>
-                    )}
-                </Box>
-            )}
-        </MenuDropdown>
-    );
-}

package/src/lib/components/toolbar/table-refresh-control.tsx

@@ -1,62 +0,0 @@
-import React, { ReactElement, useCallback } from 'react';
-import { Refresh } from '@mui/icons-material';
-import { IconButton, Tooltip, IconButtonProps, CircularProgress } from '@mui/material';
-
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { extractSlotProps, getSlotComponent, mergeSlotProps } from '../../utils/slot-helpers';
-
-export interface TableRefreshControlProps {
-    iconButtonProps?: IconButtonProps;
-    tooltipProps?: any;
-
-    /** optional override */
-    onRefresh?: () => void | Promise<void>;
-
-    /** disable + show spinner if true */
-    loading?: boolean;
-
-    /** use spinner instead of icon while loading */
-    showSpinnerWhileLoading?: boolean;
-
-    [key: string]: any;
-}
-
-export function TableRefreshControl(props: TableRefreshControlProps = {}): ReactElement {
-    const { apiRef, slots, slotProps } = useDataTableContext();
-
-    const refreshIconSlotProps = extractSlotProps(slotProps, 'refreshIcon');
-    const RefreshIconSlot = getSlotComponent(slots, 'refreshIcon', Refresh);
-
-    const handleRefresh = useCallback(() => {
-        if (props.onRefresh) return props.onRefresh();
-        // Default: use internal api
-        apiRef?.current?.data?.reload?.();
-    }, [props, apiRef]);
-
-    const mergedIconButtonProps = mergeSlotProps(
-        {
-            size: 'small',
-            onClick: handleRefresh,
-            disabled: !!props.loading,
-            sx: { flexShrink: 0 },
-        },
-        refreshIconSlotProps,
-        props.iconButtonProps || {}
-    );
-
-    // Wrap in span so when IconButton is disabled (loading), the tooltip still
-    // receives pointer events and closes on mouse leave (disabled elements don't fire them).
-    return (
-        <Tooltip title="Refresh data" {...props.tooltipProps}>
-            <span style={{ display: 'inline-flex' }}>
-                <IconButton {...mergedIconButtonProps}>
-                    {props.loading && props.showSpinnerWhileLoading ? (
-                        <CircularProgress size={16} />
-                    ) : (
-                        <RefreshIconSlot {...refreshIconSlotProps} />
-                    )}
-                </IconButton>
-            </span>
-        </Tooltip>
-    );
-}