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

package/src/lib/utils/index.ts

@@ -1,27 +0,0 @@
-/**
- * Utility functions for DataTable components
- */
-
-// Styling utilities
-export * from './styling-helpers';
-
-// Table utilities
-export * from './table-helpers';
-
-// Column utilities
-export * from './column-helpers';
-
-// Export utilities
-export * from './export-utils';
-
-// Special columns utilities
-export * from './special-columns.utils';
-
-// Debounced fetch utilities
-export * from './debounced-fetch.utils';
-
-// Slot helper utilities
-export * from './slot-helpers';
-
-// Logging utilities
-export * from './logger';

package/src/lib/utils/logger.ts

@@ -1,203 +0,0 @@
-/**
- * Logging utilities for the DataTable package.
- *
- * Provides a lightweight wrapper around `console` that can be configured globally
- * or per-instance to help troubleshoot behaviour in consuming applications.
- */
-
-export type LogLevel = 'silent' | 'error' | 'warn' | 'info' | 'debug';
-
-interface ConsoleLike {
-    debug?: (...args: unknown[]) => void;
-    info?: (...args: unknown[]) => void;
-    warn?: (...args: unknown[]) => void;
-    error?: (...args: unknown[]) => void;
-    log?: (...args: unknown[]) => void;
-}
-
-export interface DataTableLoggingOptions {
-    /**
-     * Whether logging should be enabled.
-     */
-    enabled?: boolean;
-    /**
-     * Minimum level that will be emitted. Defaults to `warn`.
-     */
-    level?: LogLevel;
-    /**
-     * Prefix prepended to every log message. Defaults to `DataTable`.
-     */
-    prefix?: string;
-    /**
-     * Optional scope that will be appended after the prefix when present.
-     */
-    scope?: string;
-    /**
-     * Include an ISO timestamp ahead of each log line.
-     */
-    includeTimestamp?: boolean;
-    /**
-     * A custom logger implementation. Defaults to `console`.
-     */
-    logger?: ConsoleLike;
-}
-
-type LoggerInput = boolean | DataTableLoggingOptions;
-
-type ResolvedLoggerConfig = Required<Omit<DataTableLoggingOptions, 'logger'>> & {
-    logger: ConsoleLike;
-};
-
-type LogMethodLevel = Exclude<LogLevel, 'silent'>;
-
-const LOG_LEVEL_ORDER: Record<LogLevel, number> = {
-    silent: 0,
-    error: 1,
-    warn: 2,
-    info: 3,
-    debug: 4,
-};
-
-const defaultConsole: ConsoleLike = typeof console !== 'undefined'
-    ? console
-    : {
-        log: () => undefined,
-        debug: () => undefined,
-        info: () => undefined,
-        warn: () => undefined,
-        error: () => undefined,
-    };
-
-let globalConfig: ResolvedLoggerConfig = {
-    enabled: false,
-    level: 'warn',
-    prefix: 'DataTable',
-    scope: '',
-    includeTimestamp: false,
-    logger: defaultConsole,
-};
-
-const isLevelEnabled = (level: LogMethodLevel, config: ResolvedLoggerConfig) => {
-    if (!config.enabled) {
-        return false;
-    }
-    return LOG_LEVEL_ORDER[level] <= LOG_LEVEL_ORDER[config.level];
-};
-
-const formatPrefix = (level: LogMethodLevel, config: ResolvedLoggerConfig) => {
-    const segments: string[] = [];
-    if (config.prefix) {
-        segments.push(config.prefix);
-    }
-    if (config.scope) {
-        segments.push(config.scope);
-    }
-    const prefix = segments.length > 0 ? `[${segments.join(':')}]` : '';
-    return config.includeTimestamp
-        ? `[${new Date().toISOString()}]${prefix ? ` ${prefix}` : ''} [${level.toUpperCase()}]`
-        : `${prefix ? `${prefix} ` : ''}[${level.toUpperCase()}]`;
-};
-
-const getConsoleMethod = (level: LogMethodLevel, logger: ConsoleLike) => {
-    const methodName = level === 'debug' ? 'debug' : level;
-    return logger[methodName] ?? logger.log ?? defaultConsole.log ?? (() => undefined);
-};
-
-const normaliseInput = (input?: LoggerInput): DataTableLoggingOptions => {
-    if (typeof input === 'boolean') {
-        return { enabled: input };
-    }
-    return input ?? {};
-};
-
-const resolveConfig = (
-    scope: string | undefined,
-    input?: LoggerInput,
-    parent?: ResolvedLoggerConfig,
-): ResolvedLoggerConfig => {
-    const overrides = normaliseInput(input);
-    const base = parent ?? globalConfig;
-
-    return {
-        enabled: overrides.enabled ?? base.enabled,
-        level: overrides.level ?? base.level,
-        prefix: overrides.prefix ?? base.prefix,
-        scope: overrides.scope ?? scope ?? base.scope ?? '',
-        includeTimestamp: overrides.includeTimestamp ?? base.includeTimestamp,
-        logger: overrides.logger ?? base.logger ?? defaultConsole,
-    };
-};
-
-export interface LoggerInstance {
-    debug: (...args: unknown[]) => void;
-    info: (...args: unknown[]) => void;
-    warn: (...args: unknown[]) => void;
-    error: (...args: unknown[]) => void;
-    /**
-     * Create a new logger that inherits configuration and extends the scope.
-     */
-    child: (scope: string, overrides?: LoggerInput) => LoggerInstance;
-    /**
-     * Check whether a level would emit given current configuration.
-     */
-    isLevelEnabled: (level: LogMethodLevel) => boolean;
-    /**
-     * Access the resolved configuration for inspection.
-     */
-    config: ResolvedLoggerConfig;
-}
-
-const createLoggerMethods = (config: ResolvedLoggerConfig): Omit<LoggerInstance, 'child' | 'isLevelEnabled' | 'config'> => {
-    const logWithLevel = (level: LogMethodLevel) => {
-        const consoleMethod = getConsoleMethod(level, config.logger);
-        return (...args: unknown[]) => {
-            if (!isLevelEnabled(level, config)) {
-                return;
-            }
-            const prefix = formatPrefix(level, config);
-            consoleMethod(prefix, ...args);
-        };
-    };
-
-    return {
-        debug: logWithLevel('debug'),
-        info: logWithLevel('info'),
-        warn: logWithLevel('warn'),
-        error: logWithLevel('error'),
-    };
-};
-
-/**
- * Create a new logger instance. Configuration cascades from the global config unless overridden.
- */
-export const createLogger = (scope?: string, input?: LoggerInput, parentConfig?: ResolvedLoggerConfig): LoggerInstance => {
-    const resolvedConfig = resolveConfig(scope, input, parentConfig);
-    const methods = createLoggerMethods(resolvedConfig);
-
-    const child = (childScope: string, overrides?: LoggerInput) => {
-        const combinedScope = childScope
-            ? (resolvedConfig.scope ? `${resolvedConfig.scope}.${childScope}` : childScope)
-            : resolvedConfig.scope;
-        return createLogger(combinedScope, overrides, resolvedConfig);
-    };
-
-    return {
-        ...methods,
-        child,
-        isLevelEnabled: (level: LogMethodLevel) => isLevelEnabled(level, resolvedConfig),
-        config: resolvedConfig,
-    };
-};
-
-/**
- * Configure the global logger defaults for every DataTable instance.
- */
-export const configureDataTableLogging = (options: DataTableLoggingOptions) => {
-    globalConfig = resolveConfig(options.scope, options, globalConfig);
-};
-
-/**
- * Read the current global logging configuration.
- */
-export const getDataTableLoggingConfig = (): ResolvedLoggerConfig => ({ ...globalConfig });
-

package/src/lib/utils/slot-helpers.tsx

@@ -1,194 +0,0 @@
-/**
- * Enhanced Slot Helper Utilities
- *
- * Utilities to help with rendering slotted components with enhanced prop merging,
- * type safety, and full customization support.
- */
-import { ComponentType, createElement } from 'react';
-import { DataTableSlots } from '../types/slots.types';
-
-/**
- * Enhanced slot component retrieval with better type safety
- */
-export function getSlotComponent<T, K extends keyof DataTableSlots<T>>(
-    slots: Partial<DataTableSlots<T>> | undefined,
-    slotName: K,
-    fallback: ComponentType<any>,
-): ComponentType<any> {
-    return (slots?.[slotName] as ComponentType<any>) || fallback;
-}
-
-/**
- * Merge slot props with default props and user overrides
- * Handles special cases for MUI sx prop, style prop, and className
- */
-export function mergeSlotProps(
-    defaultProps: Record<string, any> = {},
-    slotProps: Record<string, any> = {},
-    userProps: Record<string, any> = {}
-): Record<string, any> {
-    // Deep merge objects, giving priority to user props
-    const merged = { ...defaultProps };
-    
-    // Merge slot props
-    Object.keys(slotProps).forEach(key => {
-        const slotValue = slotProps[key];
-        const mergedValue = merged[key];
-        
-        if (key === 'sx' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
-            // Special handling for MUI sx prop
-            merged[key] = { ...mergedValue, ...slotValue };
-        } else if (key === 'style' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
-            // Special handling for style prop
-            merged[key] = { ...mergedValue, ...slotValue };
-        } else if (key === 'className' && typeof slotValue === 'string' && typeof mergedValue === 'string') {
-            // Special handling for className prop
-            merged[key] = `${mergedValue} ${slotValue}`.trim();
-        } else {
-            merged[key] = slotValue;
-        }
-    });
-    
-    // Merge user props (highest priority)
-    Object.keys(userProps).forEach(key => {
-        const userValue = userProps[key];
-        const mergedValue = merged[key];
-        
-        if (key === 'sx' && typeof userValue === 'object' && typeof mergedValue === 'object') {
-            // Special handling for MUI sx prop
-            merged[key] = { ...mergedValue, ...userValue };
-        } else if (key === 'style' && typeof userValue === 'object' && typeof mergedValue === 'object') {
-            // Special handling for style prop
-            merged[key] = { ...mergedValue, ...userValue };
-        } else if (key === 'className' && typeof userValue === 'string' && typeof mergedValue === 'string') {
-            // Special handling for className prop
-            merged[key] = `${mergedValue} ${userValue}`.trim();
-        } else {
-            merged[key] = userValue;
-        }
-    });
-    
-    return merged;
-}
-
-/**
- * Enhanced slot component retrieval with automatic prop merging
- */
-export function getSlotComponentWithProps<T, K extends keyof DataTableSlots<T>>(
-    slots: Partial<DataTableSlots<T>> | undefined,
-    slotProps: Record<string, any> = {},
-    slotName: K,
-    fallback: ComponentType<any>,
-    defaultProps: Record<string, any> = {}
-): {
-    component: ComponentType<any>;
-    props: Record<string, any>;
-} {
-    const component = getSlotComponent(slots, slotName, fallback);
-    const props = mergeSlotProps(
-        defaultProps,
-        slotProps[slotName as string] || {},
-        {}
-    );
-    
-    return { component, props };
-}
-
-/**
- * Utility to check if a slot is overridden by user
- */
-export function isSlotOverridden<T, K extends keyof DataTableSlots<T>>(
-    slots: Partial<DataTableSlots<T>> | undefined,
-    slotName: K
-): boolean {
-    return Boolean(slots?.[slotName]);
-}
-
-/**
- * Utility to get all overridden slots
- */
-export function getOverriddenSlots<T>(
-    slots: Partial<DataTableSlots<T>> | undefined
-): Array<keyof DataTableSlots<T>> {
-    if (!slots) return [];
-    return Object.keys(slots).filter(key => Boolean(slots[key as keyof DataTableSlots<T>])) as Array<keyof DataTableSlots<T>>;
-}
-
-/**
- * Type-safe slot prop extractor
- */
-export function extractSlotProps<T, K extends keyof DataTableSlots<T>>(
-    slotProps: Record<string, any> | undefined,
-    slotName: K
-): Record<string, any> {
-    return (slotProps?.[slotName as string] || {}) as Record<string, any>;
-}
-
-/**
- * Enhanced slot component with better prop handling
- */
-export function createEnhancedSlotComponent<T, K extends keyof DataTableSlots<T>>(
-    slots: Partial<DataTableSlots<T>> | undefined,
-    slotName: K,
-    fallback: ComponentType<any>,
-    baseProps: Record<string, any> = {}
-): ComponentType<any> {
-    const SlotComponent = getSlotComponent(slots, slotName, fallback);
-    
-    return function EnhancedSlot(props: any) {
-        const mergedProps = mergeSlotProps(baseProps, {}, props);
-        return createElement(SlotComponent, mergedProps);
-    };
-}
-
-/**
- * Utility to validate slot props at runtime (development only)
- */
-export function validateSlotProps<T, K extends keyof DataTableSlots<T>>(
-    slotName: K,
-    props: any,
-    requiredProps: string[] = []
-): boolean {
-    if (process.env.NODE_ENV === 'development') {
-        const missingProps = requiredProps.filter(prop => !(prop in props));
-        if (missingProps.length > 0) {
-            console.warn(`Missing required props for slot "${String(slotName)}": ${missingProps.join(', ')}`);
-            return false;
-        }
-    }
-    return true;
-}
-
-/**
- * Helper to create slot props with proper typing
- */
-export function createSlotProps(
-    table: any,
-    additionalProps: Record<string, any> = {}
-): Record<string, any> {
-    return {
-        table,
-        ...additionalProps,
-    };
-}
-
-/**
- * Enhanced slot component wrapper that handles all prop merging automatically
- */
-export function withSlotProps<T, K extends keyof DataTableSlots<T>>(
-    slots: Partial<DataTableSlots<T>> | undefined,
-    slotProps: Record<string, any> = {},
-    slotName: K,
-    fallback: ComponentType<any>
-) {
-    return function SlotWrapper(props: any) {
-        const SlotComponent = getSlotComponent(slots, slotName, fallback);
-        const mergedProps = mergeSlotProps(
-            {},
-            slotProps[slotName as string] || {},
-            props
-        );
-        
-        return createElement(SlotComponent, mergedProps);
-    };
-}

package/src/lib/utils/special-columns.utils.ts

@@ -1,101 +0,0 @@
-import { KeyboardArrowDownOutlined, KeyboardArrowUpOutlined } from '@mui/icons-material';
-import { Checkbox, IconButton } from '@mui/material';
-import { createElement } from 'react';
-
-import { DataTableColumn, DEFAULT_EXPANDING_COLUMN_NAME, DEFAULT_SELECTION_COLUMN_NAME } from '../types';
-
-/**
- * Enhanced configuration for selection column  
- */
-export interface SelectionColumnConfig<T> {
-    multiSelect?: boolean;
-    // Note: isRowSelectable is handled by table options via table.canSelectRow(), not column config
-}
-
-/**
- * Creates a default selection column using TanStack Table custom feature methods
- */
-export const createSelectionColumn = <T>(config: Partial<DataTableColumn<T>> & SelectionColumnConfig<T>): DataTableColumn<T, any> => ({
-    id: DEFAULT_SELECTION_COLUMN_NAME,
-    maxSize: 60,
-    minSize: 60,
-    align: 'center',
-    filterable: false,
-    enableResizing: false,
-    enableSorting: false,
-    enableHiding: false,
-    enablePinning: false,
-    hideInExport: true,
-    header: ({ table }) => {
-        if (!config.multiSelect) return null;
-
-        // Use TanStack Table custom feature methods (same pattern as TanStack documentation)
-        const allSelected = table.getIsAllRowsSelected?.() || false;
-        const someSelected = table.getIsSomeRowsSelected?.() || false;
-
-        return createElement(Checkbox, {
-            checked: allSelected,
-            indeterminate: someSelected && !allSelected,
-            disabled: false,
-            onChange: () => {
-                table.toggleAllRowsSelected?.();
-            },
-            size: 'small',
-            sx: { p: 0 },
-            role: 'checkbox',
-            'aria-checked': allSelected ? 'true' : (someSelected ? 'mixed' : 'false'),
-        });
-    },
-
-    cell: ({ row, table }) => {
-        const rowId = row.id as string;
-
-        // Use TanStack Table custom feature methods (same pattern as TanStack documentation)
-        const checked = table.getIsRowSelected?.(rowId) || false;
-        const canSelect = table.canSelectRow?.(rowId) ?? true;
-
-        return createElement(Checkbox, {
-            checked,
-            disabled: !canSelect,
-            onChange: () => {
-                if (canSelect) {
-                    table.toggleRowSelected?.(rowId);
-                }
-            },
-            size: 'small',
-            sx: { 
-                p: 0,
-                opacity: canSelect ? 1 : 0.5
-            },
-            role: 'checkbox',
-            'aria-checked': checked ? 'true' : 'false',
-        });
-    },
-    ...config,
-});
-
-/**
- * Creates a default expanding column
- */
-export const createExpandingColumn = <T>(config: Partial<DataTableColumn<T>>): DataTableColumn<T> => ({
-    id: DEFAULT_EXPANDING_COLUMN_NAME,
-    maxSize: 60,
-    minSize: 60,
-    align: 'center',
-    filterable: false,
-    enableResizing: false,
-    enableSorting: false,
-    enableHiding: false,
-    enablePinning: false,
-    hideInExport: true,
-    header: '',
-    cell: ({ row }) => createElement(IconButton, {
-        onClick: row.getToggleExpandedHandler(),
-        size: 'small',
-        sx: { p: 0 },
-        role: 'button',
-        'aria-label': row.getIsExpanded() ? 'Collapse row' : 'Expand row',
-        'aria-expanded': row.getIsExpanded(),
-    }, row.getIsExpanded() ? createElement(KeyboardArrowUpOutlined) : createElement(KeyboardArrowDownOutlined)),
-    ...config,
-});

package/src/lib/utils/styling-helpers.ts

@@ -1,126 +0,0 @@
-/**
- * Styling utilities for DataTable components
- */
-
-// Import types from centralized location
-import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
-
-/**
- * Generate consistent styling for pinned columns
- */
-export function getPinnedColumnStyle(options: PinnedColumnStyleOptions) {
-    const {
-        width = 'auto',
-        minWidth,
-        maxWidth,
-        isPinned,
-        pinnedPosition,
-        pinnedRightPosition,
-        isLastLeftPinnedColumn,
-        isFirstRightPinnedColumn,
-        zIndex = 1,
-        disableStickyHeader = false,
-        wrapText = false,
-    } = options;
-
-    // Pinned columns should ALWAYS be sticky, regardless of enableStickyHeader setting
-    const needsPinnedPositioning = isPinned;
-    const shouldBeSticky = isPinned; // Pinned columns are always sticky
-
-    // Position logic
-    let positionStyle = {};
-    if (shouldBeSticky) {
-        // Pinned columns must always be sticky - override any Table-level sticky positioning
-        positionStyle = { position: 'sticky' };
-    } else if (!disableStickyHeader) {
-        // Non-pinned columns: set relative when we're managing positioning
-        positionStyle = { position: 'relative' };
-    }
-    // When disableStickyHeader is true and column is not pinned, let Table handle stickiness
-
-    // Text wrapping styles - configurable per column
-    const textWrappingStyles = wrapText
-        ? {
-            whiteSpace: 'normal' as const,
-            wordBreak: 'break-word' as const,
-            overflow: 'hidden' as const,
-        }
-        : {
-            overflow: 'hidden' as const,
-            whiteSpace: 'nowrap' as const,
-            textOverflow: 'ellipsis' as const,
-        };
-
-    return {
-        // Width constraints - more strict for narrow columns
-        width,
-        ...(minWidth !== undefined && { minWidth }),
-        ...(maxWidth !== undefined && { maxWidth }),
-        boxSizing: 'border-box',
-        ...textWrappingStyles,
-        // Position handling
-        ...positionStyle,
-        // Pinned positioning (works with both sticky modes)
-        ...(needsPinnedPositioning ? {
-            left: isPinned === 'left' ? pinnedPosition : undefined,
-            right: isPinned === 'right' ? pinnedRightPosition : undefined,
-            zIndex,
-        } : {}),
-
-        boxShadow:
-            isPinned === 'left' && isLastLeftPinnedColumn
-                ? 'inset -1px 0 0 var(--palette-TableCell-border), 2px 0 2px -4px rgba(0,0,0,.18)'
-                : isPinned === 'right' && isFirstRightPinnedColumn
-                    ? 'inset 1px 0 0 var(--palette-TableCell-border), -1px 0 2px -4px rgba(0,0,0,.18)'
-                    : undefined,
-        // For pinned columns: use solid background + transparent overlay to prevent text bleeding through
-        ...(isPinned ? {
-            // Solid base background (opaque)
-            backgroundColor: (theme) => theme.palette.background.paper,
-            // Transparent overlay for hover/selected states
-            backgroundImage: (theme) => `linear-gradient(var(--row-bg, ${theme.palette.background.paper}), var(--row-bg, ${theme.palette.background.paper}))`,
-        } : {
-            // Non-pinned columns: use standard transparent background
-            backgroundColor: (theme) => `var(--row-bg, ${theme.palette.background.paper})`,
-        }),
-    };
-}
-
-/**
- * Common table cell styling
- */
-export const tableCellStyles = {
-    sticky: {
-        position: 'sticky',
-        zIndex: 10,
-        backgroundColor: 'background.paper',
-    },
-    pinned: {
-        borderRight: '1px solid',
-        borderColor: 'divider',
-    },
-} as const;
-
-/**
- * Common table row styling
- */
-export const tableRowStyles = {
-    hover: {
-        '&:hover': {
-            backgroundColor: 'action.hover',
-        },
-    },
-    striped: {
-        '&:nth-of-type(odd)': {
-            backgroundColor: 'action.selected',
-        },
-    },
-} as const;
-
-/**
- * Get text alignment style from column metadata
- */
-export function getColumnAlignment(column?: DataTableColumn<any>): 'left' | 'center' | 'right' {
-    if (!column) return 'left';
-    return column.align || 'left';
-}