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

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

@@ -1,155 +0,0 @@
-import { Clear, Search } from '@mui/icons-material';
-import { Box, Tooltip, IconButton, Collapse, OutlinedInput, InputAdornment, IconButtonProps, OutlinedInputProps, SxProps } from '@mui/material';
-import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
-
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-
-export interface TableSearchControlProps {
-    // Allow full customization of any prop
-    placeholder?: string;
-    autoFocus?: boolean;
-    searchIconProps?: IconButtonProps;
-    clearIconProps?: IconButtonProps;
-    inputProps?: OutlinedInputProps;
-    containerSx?: SxProps;
-    tooltipProps?: any;
-    [key: string]: any;
-}
-
-export function TableSearchControl(props: TableSearchControlProps = {}): ReactElement {
-    const { table, slots, slotProps } = useDataTableContext();
-    const [searchVisible, setSearchVisible] = useState(false);
-    const searchInputRef = useRef<HTMLInputElement>(null);
-    const globalFilter = table.getState().globalFilter || '';
-    const hasSearch = globalFilter.length > 0;
-
-    // Extract slot-specific props with enhanced merging
-    const searchIconSlotProps = extractSlotProps(slotProps, 'searchIcon');
-    const clearIconSlotProps = extractSlotProps(slotProps, 'clearIcon');
-    
-    const SearchIconSlot = getSlotComponent(slots, 'searchIcon', Search);
-    const ClearIconSlot = getSlotComponent(slots, 'clearIcon', Clear);
-    
-    const handleChange = useCallback(
-        (e: any) => {
-            table.setGlobalFilter(e.target.value);
-        },
-        [table],
-    );
-
-    const handleSearchToggle = () => {
-        if (searchVisible || hasSearch) {
-            // If search is visible or has text, hide it and clear
-            setSearchVisible(false);
-            table.setGlobalFilter('');
-        } else {
-            // Show search input
-            setSearchVisible(true);
-        }
-    };
-
-    const handleSearchClear = () => {
-        table.setGlobalFilter('');
-        if (searchInputRef.current) {
-            searchInputRef.current.focus();
-        }
-    };
-
-    const handleSearchBlur = () => {
-        // Only auto-hide if search is empty
-        if (searchVisible && !hasSearch) {
-            setSearchVisible(false);
-        }
-    };
-
-    useEffect(() => {
-        if (searchVisible && searchInputRef.current) {
-            // Add a delay to ensure the Collapse animation completes
-            const timer = setTimeout(() => {
-                searchInputRef.current?.focus();
-            }, 200);
-            return () => clearTimeout(timer);
-        }
-        return undefined;
-    }, [searchVisible]);
-
-    // Merge all props for maximum flexibility
-    const mergedSearchIconProps = mergeSlotProps(
-        {
-            size: 'small',
-            onClick: handleSearchToggle,
-            color: hasSearch ? 'primary' : 'default',
-            sx: { flexShrink: 0 },
-        },
-        searchIconSlotProps,
-        props.searchIconProps || {}
-    );
-
-    const mergedClearIconProps = mergeSlotProps(
-        {
-            size: 'small',
-            onClick: handleSearchClear,
-        },
-        clearIconSlotProps,
-        props.clearIconProps || {}
-    );
-
-    const mergedInputProps = mergeSlotProps(
-        {
-            inputRef: searchInputRef,
-            size: 'small',
-            placeholder: props.placeholder || 'Search...',
-            value: globalFilter,
-            onChange: handleChange,
-            onBlur: handleSearchBlur,
-            autoFocus: props.autoFocus,
-            sx: { minWidth: 200 },
-        },
-        props.inputProps || {}
-    );
-
-    return (
-        <Box
-            sx={{
-                display: 'flex',
-                alignItems: 'center',
-                ...props.containerSx,
-            }}
-        >
-            {!(searchVisible || hasSearch) && (
-                <Tooltip 
-                    title="Search"
-                    {...props.tooltipProps}
-                >
-                    <IconButton
-                        {...mergedSearchIconProps}
-                    >
-                        <SearchIconSlot {...searchIconSlotProps} />
-                    </IconButton>
-                </Tooltip>
-            )}
-
-            <Collapse
-                in={searchVisible || hasSearch}
-                orientation="horizontal"
-                timeout={200}
-            >
-                <OutlinedInput
-                    {...mergedInputProps}
-                    endAdornment={
-                        hasSearch ? (
-                            <InputAdornment position="end">
-                                <IconButton
-                                    {...mergedClearIconProps}
-                                >
-                                    <ClearIconSlot {...clearIconSlotProps} />
-                                </IconButton>
-                            </InputAdornment>
-                        ) : null
-                    }
-                />
-            </Collapse>
-        </Box>
-    );
-}

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

@@ -1,102 +0,0 @@
-import React, { ReactElement } from 'react';
-import { LineWeightOutlined } from '@mui/icons-material';
-import { MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton, IconButtonProps, SxProps } from '@mui/material';
-
-import { MenuDropdown } from '../droupdown/menu-dropdown';
-import { useDataTableContext } from '../../contexts/data-table-context';
-import { ViewComfortableIcon, ViewCompactIcon } from '../../icons';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-
-export interface TableSizeControlProps {
-    // Allow full customization of any prop
-    iconButtonProps?: IconButtonProps;
-    menuProps?: any;
-    tooltipProps?: any;
-    containerSx?: SxProps;
-    [key: string]: any;
-}
-
-export function TableSizeControl(props: TableSizeControlProps = {}): ReactElement {
-    const { tableSize, onTableSizeChange, slotProps, slots } = useDataTableContext();
-    
-    // Extract slot-specific props with enhanced merging
-    const tableSizeIconSlotProps = extractSlotProps(slotProps, 'tableSizeIcon');
-    const tableSizeSmallIconSlotProps = extractSlotProps(slotProps, 'tableSizeSmallIcon');
-    const tableSizeMediumIconSlotProps = extractSlotProps(slotProps, 'tableSizeMediumIcon');
-    
-    const TableSizeIconSlot = getSlotComponent(slots, 'tableSizeIcon', LineWeightOutlined);
-    const TableSizeSmallIconSlot = getSlotComponent(slots, 'tableSizeSmallIcon', ViewCompactIcon);
-    const TableSizeMediumIconSlot = getSlotComponent(slots, 'tableSizeMediumIcon', ViewComfortableIcon);
-
-    const SIZE_OPTIONS = [
-        {
-            value: 'small' as const,
-            label: 'Compact',
-            description: 'Small padding, compact rows',
-            icon: <TableSizeSmallIconSlot {...tableSizeSmallIconSlotProps} />,
-        },
-        {
-            value: 'medium' as const,
-            label: 'Standard',
-            description: 'Default padding and spacing',
-            icon: <TableSizeMediumIconSlot {...tableSizeMediumIconSlotProps} />,
-        },
-    ];
-
-    // Merge all props for maximum flexibility
-    const mergedIconButtonProps = mergeSlotProps(
-        {
-            size: 'small',
-            sx: { flexShrink: 0 },
-        },
-        tableSizeIconSlotProps,
-        props.iconButtonProps || {}
-    );
-
-    return (
-        <MenuDropdown
-            anchor={(
-                <Tooltip 
-                    title="Table size"
-                    {...props.tooltipProps}
-                >
-                    <IconButton
-                        {...mergedIconButtonProps}
-                    >
-                        <TableSizeIconSlot {...tableSizeIconSlotProps} />
-                    </IconButton>
-                </Tooltip>
-            )}
-        >
-            {SIZE_OPTIONS.map((option) => (
-                <MenuItem
-                    key={option.value}
-                    selected={tableSize === option.value}
-                    onClick={() => onTableSizeChange(option.value)}
-                    sx={{
-                        minWidth: 200,
-                        ...props.containerSx,
-                    }}
-                >
-                    <ListItemIcon sx={{ minWidth: 36 }}>
-                        {option.icon}
-                    </ListItemIcon>
-                    <ListItemText
-                        primary={option.label}
-                        secondary={option.description}
-                        slotProps={{
-                            primary: {
-                                variant: 'body2',
-                                fontWeight: tableSize === option.value ? 600 : 400,
-                            },
-                            secondary: {
-                                variant: 'caption',
-                                color: 'text.secondary',
-                            },
-                        }}
-                    />
-                </MenuItem>
-            ))}
-        </MenuDropdown>
-    );
-}

package/src/lib/contexts/data-table-context.tsx

@@ -1,126 +0,0 @@
-import { Table } from '@tanstack/react-table';
-import React, { createContext, useContext, ReactNode, useMemo, RefObject, ReactElement } from 'react';
-
-import { ColumnFilterState, TableSize } from '../types';
-import { SelectionState } from '../features';
-import { DataTableApi } from '../types/data-table-api';
-import { ExportPhase, ExportProgressPayload, ServerExportResult } from '../types/export.types';
-
-
-/**
- * Context value for the DataTable
- */
-interface DataTableContextValue<T = any> {
-    table?: Table<T>;
-    apiRef?: RefObject<DataTableApi<T> | null>;
-    dataMode?: 'client' | 'server';
-    tableSize?: TableSize;
-    onTableSizeChange?: (size: TableSize) => void;
-    columnFilter?: ColumnFilterState;
-    onChangeColumnFilter?: (filter: ColumnFilterState) => void;
-    slots?: Record<string, any>;
-    slotProps?: Record<string, any>;
-
-    // Export state - managed by the DataTable component
-    isExporting?: boolean;
-    exportController?: AbortController | null;
-    exportPhase?: ExportPhase | null;
-    exportProgress?: ExportProgressPayload;
-    onCancelExport?: () => void;
-
-    // Export callbacks - passed from DataTable props
-    exportFilename?: string;
-    onExportProgress?: (progress: ExportProgressPayload) => void;
-    onExportComplete?: (result: { success: boolean; filename: string; totalRows: number }) => void;
-    onExportError?: (error: { message: string; code: string }) => void;
-    onServerExport?: (
-        filters?: Partial<any>,
-        selection?: SelectionState,
-        signal?: AbortSignal
-    ) => Promise<ServerExportResult<any>>;
-}
-
-const DataTableContext = createContext<DataTableContextValue | null>(null);
-
-interface DataTableProviderProps<T = any> extends DataTableContextValue<T> {
-    children: ReactNode;
-}
-
-export function DataTableProvider<T = any>({
-    children,
-    table,
-    apiRef,
-    dataMode,
-    tableSize,
-    onTableSizeChange,
-    columnFilter,
-    onChangeColumnFilter,
-    slots = {},
-    slotProps = {},
-    isExporting,
-    exportController,
-    exportPhase,
-    exportProgress,
-    onCancelExport,
-    exportFilename,
-    onExportProgress,
-    onExportComplete,
-    onExportError,
-    onServerExport,
-}: DataTableProviderProps<T>): ReactElement {
-    const value = useMemo(() => ({
-        table,
-        apiRef,
-        dataMode,
-        tableSize,
-        onTableSizeChange,
-        columnFilter,
-        onChangeColumnFilter,
-        slots,
-        slotProps,
-        isExporting,
-        exportController,
-        exportPhase,
-        exportProgress,
-        onCancelExport,
-        exportFilename,
-        onExportProgress,
-        onExportComplete,
-        onExportError,
-        onServerExport,
-    }), [
-        table,
-        apiRef,
-        dataMode,
-        tableSize,
-        onTableSizeChange,
-        columnFilter,
-        onChangeColumnFilter,
-        slots,
-        slotProps,
-        isExporting,
-        exportController,
-        exportPhase,
-        exportProgress,
-        onCancelExport,
-        exportFilename,
-        onExportProgress,
-        onExportComplete,
-        onExportError,
-        onServerExport,
-    ]);
-
-    return (
-        <DataTableContext.Provider value={value}>
-            {children}
-        </DataTableContext.Provider>
-    );
-}
-
-export function useDataTableContext<T = any>(): DataTableContextValue<T> {
-    const context = useContext(DataTableContext);
-    if (!context) {
-        throw new Error('useDataTableContext must be used within a DataTableProvider');
-    }
-    return context;
-}

package/src/lib/data-table.tsx

@@ -1,29 +0,0 @@
-/**
- * Main DataTable Component (thin wrapper)
- *
- * Composes useDataTableEngine + DataTableProvider + DataTableView.
- * Preserves forwardRef API and DataTableApi surface.
- */
-import React, { forwardRef, useImperativeHandle } from 'react';
-
-import { DataTableProvider } from './contexts/data-table-context';
-import { useDataTableEngine } from './hooks/use-data-table-engine';
-import { DataTableView } from './components/data-table-view';
-import type { DataTableProps } from './types/data-table.types';
-import type { DataTableApi } from './types/data-table-api';
-
-
-export const DataTable = forwardRef(function DataTable<T extends Record<string, any>>(
-    props: DataTableProps<T>,
-    ref: React.Ref<DataTableApi<T>>,
-) {
-    const engine = useDataTableEngine<T>(props);
-
-    useImperativeHandle(ref, () => engine.refs.apiRef.current!, []);
-
-    return (
-        <DataTableProvider {...engine.providerProps}>
-            <DataTableView<T> engine={engine} {...props} />
-        </DataTableProvider>
-    );
-});

package/src/lib/features/README.md

@@ -1,161 +0,0 @@
-# Custom TanStack Table Features
-
-This directory contains custom features that extend TanStack Table functionality following the official custom features pattern introduced in v8.14.0.
-
-## Custom Column Filter Feature
-
-The Custom Column Filter Feature adds advanced column filtering capabilities to TanStack Table, providing a more sophisticated filtering UI with AND/OR logic and multiple operators.
-
-### Features
-
-- **Multiple Filter Conditions**: Add multiple filter rules for different columns
-- **Logic Operators**: Choose between AND/OR logic for combining filters
-- **Various Operators**: Support for equals, contains, greater than, less than, empty checks, etc.
-- **Type-Aware Filtering**: Different operators available based on column type
-- **Integrated State Management**: Filters are managed within TanStack Table's state system
-
-### Usage
-
-#### 1. Import the Feature
-
-```typescript
-import { CustomColumnFilterFeature } from '@your-package/features';
-```
-
-#### 2. Add to Table Options
-
-```typescript
-const table = useReactTable({
-    _features: [CustomColumnFilterFeature], // Add the custom feature
-    data,
-    columns,
-    // ... other options
-});
-```
-
-#### 3. Use the Feature Methods
-
-The feature adds several methods to your table instance:
-
-```typescript
-// Add a new filter
-table.addColumnFilter('columnId', 'contains', 'search value');
-
-// Update an existing filter
-table.updateColumnFilter('filterId', { value: 'new value' });
-
-// Remove a filter
-table.removeColumnFilter('filterId');
-
-// Clear all filters
-table.clearAllColumnFilters();
-
-// Get active filters
-const activeFilters = table.getActiveColumnFilters();
-
-// Set filter logic (AND/OR)
-table.setFilterLogic('OR');
-
-// Get current filter state
-const filterState = table.getColumnFilterState();
-```
-
-#### 4. Handle State Changes
-
-```typescript
-const table = useReactTable({
-    _features: [CustomColumnFilterFeature],
-    // ... other options
-    onCustomColumnFilterChange: (updater) => {
-        // Handle filter state changes
-        const newState = typeof updater === 'function' 
-            ? updater(currentState)
-            : updater;
-        
-        // Update your local state or trigger server requests
-        handleFilterChange(newState);
-    },
-});
-```
-
-### Available Filter Operators
-
-| Operator | Description | Types |
-|----------|-------------|-------|
-| `equals` | Exact match | All |
-| `notEquals` | Not equal to | All |
-| `contains` | Contains substring | Text |
-| `notContains` | Does not contain | Text |
-| `startsWith` | Starts with | Text |
-| `endsWith` | Ends with | Text |
-| `isEmpty` | Is empty/null | All |
-| `isNotEmpty` | Is not empty/null | All |
-| `greaterThan` | Greater than | Number, Date |
-| `greaterThanOrEqual` | Greater than or equal | Number, Date |
-| `lessThan` | Less than | Number, Date |
-| `lessThanOrEqual` | Less than or equal | Number, Date |
-| `between` | Between two values | Number, Date |
-| `in` | In array of values | All |
-| `notIn` | Not in array of values | All |
-
-### Client-Side Filtering
-
-For client-side filtering, you can use the provided utility function:
-
-```typescript
-import { matchesCustomColumnFilters } from '@your-package/features';
-
-const filteredRows = rows.filter(row => 
-    matchesCustomColumnFilters(row, filters, logic)
-);
-```
-
-### Server-Side Filtering
-
-For server-side filtering, listen to filter changes and send the filter state to your backend:
-
-```typescript
-const handleFilterChange = (filterState) => {
-    // Send to server
-    fetchData({
-        filters: filterState.filters,
-        logic: filterState.logic,
-        // ... other params
-    });
-};
-```
-
-### TypeScript Integration
-
-The feature includes full TypeScript support with declaration merging that extends TanStack Table's types:
-
-```typescript
-// These types are automatically available after importing the feature
-interface CustomColumnFilterState {
-    filters: ColumnFilterRule[];
-    logic: 'AND' | 'OR';
-}
-
-interface ColumnFilterRule {
-    id: string;
-    columnId: string;
-    operator: string;
-    value: any;
-    columnType?: string;
-}
-```
-
-### Example
-
-See `custom-column-filter-example.tsx` for a complete working example.
-
-## Creating Additional Custom Features
-
-To create additional custom features, follow the TanStack Table custom features pattern:
-
-1. Define TypeScript types
-2. Use declaration merging to extend TanStack Table types
-3. Create the feature object with `getInitialState`, `getDefaultOptions`, and `createTable`
-4. Add the feature to your table's `_features` array
-
-Refer to the TanStack Table documentation for more details on creating custom features.