@ackplus/react-tanstack-data-table 1.0.19-beta-0.15 → 1.0.20

package/src/lib/types/slots.types.d.ts

@@ -1,83 +1,35 @@
-import { TableProps, TableContainerProps, BoxProps } from '@mui/material';
+import { TableProps, TableContainerProps, BoxProps, ToolbarProps, TableRowProps, TableCellProps, TableHeadProps, TableBodyProps } from '@mui/material';
 import { Table, Row, Column } from '@tanstack/react-table';
-import { ComponentType, ReactNode } from 'react';
+import { ComponentType, ReactNode, HTMLAttributes, ComponentProps } from 'react';
 import { DataTableColumn, TableFilters, ExportProgress, ExportResult, ExportError, ServerExportColumn } from './index';
 import { DataTableSize } from '../utils/table-helpers';
 import { DataTablePaginationProps } from "../components/pagination";
-export interface DataTableSlots<T = any> {
-    root?: ComponentType<DataTableSlotProps<T>['root']>;
-    tableContainer?: ComponentType<DataTableSlotProps<T>['tableContainer']>;
-    table?: ComponentType<DataTableSlotProps<T>['table']>;
-    toolbar?: ComponentType<DataTableSlotProps<T>['toolbar']>;
-    header?: ComponentType<DataTableSlotProps<T>['header']>;
-    headerRow?: ComponentType<DataTableSlotProps<T>['headerRow']>;
-    headerCell?: ComponentType<DataTableSlotProps<T>['headerCell']>;
-    sortIconAsc?: ComponentType<DataTableSlotProps<T>['sortIconAsc']>;
-    sortIconDesc?: ComponentType<DataTableSlotProps<T>['sortIconDesc']>;
-    body?: ComponentType<DataTableSlotProps<T>['body']>;
-    row?: ComponentType<DataTableSlotProps<T>['row']>;
-    cell?: ComponentType<DataTableSlotProps<T>['cell']>;
-    loadingRow?: ComponentType<DataTableSlotProps<T>['loadingRow']>;
-    emptyRow?: ComponentType<DataTableSlotProps<T>['emptyRow']>;
-    expandedRow?: ComponentType<DataTableSlotProps<T>['expandedRow']>;
-    footer?: ComponentType<DataTableSlotProps<T>['footer']>;
-    pagination?: ComponentType<DataTableSlotProps<T>['pagination']>;
-    searchInput?: ComponentType<DataTableSlotProps<T>['searchInput']>;
-    columnVisibilityControl?: ComponentType<DataTableSlotProps<T>['columnVisibilityControl']>;
-    columnCustomFilterControl?: ComponentType<DataTableSlotProps<T>['columnCustomFilterControl']>;
-    columnPinningControl?: ComponentType<DataTableSlotProps<T>['columnPinningControl']>;
-    exportButton?: ComponentType<DataTableSlotProps<T>['exportButton']>;
-    resetButton?: ComponentType<DataTableSlotProps<T>['resetButton']>;
-    tableSizeControl?: ComponentType<DataTableSlotProps<T>['tableSizeControl']>;
-    bulkActionsToolbar?: ComponentType<DataTableSlotProps<T>['bulkActionsToolbar']>;
-    searchIcon?: ComponentType<DataTableSlotProps<T>['searchIcon']>;
-    clearIcon?: ComponentType<DataTableSlotProps<T>['clearIcon']>;
-    exportIcon?: ComponentType<DataTableSlotProps<T>['exportIcon']>;
-    columnIcon?: ComponentType<DataTableSlotProps<T>['columnIcon']>;
-    resetIcon?: ComponentType<DataTableSlotProps<T>['resetIcon']>;
-    moreIcon?: ComponentType<DataTableSlotProps<T>['moreIcon']>;
-    filterIcon?: ComponentType<DataTableSlotProps<T>['filterIcon']>;
-    pinIcon?: ComponentType<DataTableSlotProps<T>['pinIcon']>;
-    unpinIcon?: ComponentType<DataTableSlotProps<T>['unpinIcon']>;
-    leftIcon?: ComponentType<DataTableSlotProps<T>['leftIcon']>;
-    rightIcon?: ComponentType<DataTableSlotProps<T>['rightIcon']>;
-    csvIcon?: ComponentType<DataTableSlotProps<T>['csvIcon']>;
-    excelIcon?: ComponentType<DataTableSlotProps<T>['excelIcon']>;
-    selectAllIcon?: ComponentType<DataTableSlotProps<T>['selectAllIcon']>;
-    deselectIcon?: ComponentType<DataTableSlotProps<T>['deselectIcon']>;
-    tableSizeIcon?: ComponentType<DataTableSlotProps<T>['tableSizeIcon']>;
-    tableSizeSmallIcon?: ComponentType<DataTableSlotProps<T>['tableSizeSmallIcon']>;
-    tableSizeMediumIcon?: ComponentType<DataTableSlotProps<T>['tableSizeMediumIcon']>;
-    checkboxSelection?: ComponentType<DataTableSlotProps<T>['checkboxSelection']>;
-    expandIcon?: ComponentType<DataTableSlotProps<T>['expandIcon']>;
-    collapseIcon?: ComponentType<DataTableSlotProps<T>['collapseIcon']>;
-    loadingSkeleton?: ComponentType<DataTableSlotProps<T>['loadingSkeleton']>;
-    noDataOverlay?: ComponentType<DataTableSlotProps<T>['noDataOverlay']>;
-    exportProgressDialog?: ComponentType<DataTableSlotProps<T>['exportProgressDialog']>;
-}
+import { DataTableToolbarProps } from '../components/toolbar/data-table-toolbar';
+export type SlotComponent<TProps = any> = ComponentType<TProps>;
 export interface BaseSlotProps<T = any> {
     table: Table<T>;
-    data: T[];
-    columns: DataTableColumn<T>[];
 }
-export interface DataTableSlotProps<T = any> {
-    root: BaseSlotProps<T> & BoxProps & {
+export type EnhancedSlotProps<TBase, TComponent = {}> = TBase & TComponent & {
+    [key: string]: any;
+};
+export interface DataTableSlots<T = any> {
+    root?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, BoxProps & {
         children: ReactNode;
-    };
-    tableContainer: BaseSlotProps<T> & TableContainerProps & {
+    }>>;
+    tableContainer?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableContainerProps & {
         children: ReactNode;
         enableStickyHeader?: boolean;
         maxHeight?: string | number;
         enableVirtualization?: boolean;
-    };
-    table: BaseSlotProps<T> & TableProps & {
+    }>>;
+    table?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableProps & {
         children: ReactNode;
         tableSize?: DataTableSize;
         enableStickyHeader?: boolean;
         fitToScreen?: boolean;
         tableStyle?: React.CSSProperties;
-    };
-    toolbar: BaseSlotProps<T> & {
+    }>>;
+    toolbar?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ToolbarProps & DataTableToolbarProps & {
         title?: string;
         subtitle?: string;
         enableGlobalFilter?: boolean;
@@ -106,19 +58,19 @@ export interface DataTableSlotProps<T = any> {
         onExportComplete?: (result: ExportResult) => void;
         onExportError?: (error: ExportError) => void;
         onExportCancel?: () => void;
-    };
-    header: BaseSlotProps<T> & {
+    }>>;
+    header?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableHeadProps & {
         enableSorting?: boolean;
         draggable?: boolean;
         enableColumnResizing?: boolean;
         enableStickyHeader?: boolean;
         fitToScreen?: boolean;
         onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
-    };
-    headerRow: BaseSlotProps<T> & {
+    }>>;
+    headerRow?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableRowProps & {
         headerGroups: any[];
-    };
-    headerCell: BaseSlotProps<T> & {
+    }>>;
+    headerCell?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableCellProps & {
         header: any;
         column: Column<T>;
         enableSorting?: boolean;
@@ -128,18 +80,22 @@ export interface DataTableSlotProps<T = any> {
         isPinned?: boolean | 'left' | 'right';
         pinnedPosition?: number;
         pinnedRightPosition?: number;
-    };
-    sortIconAsc: Record<string, any>;
-    sortIconDesc: Record<string, any>;
-    body: BaseSlotProps<T> & {
+    }>>;
+    sortIconAsc?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    sortIconDesc?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    body?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableBodyProps & {
         children: ReactNode;
         rows: Row<T>[];
         loading?: boolean;
         emptyMessage?: string;
         enableVirtualization?: boolean;
         enablePagination?: boolean;
-    };
-    row: BaseSlotProps<T> & {
+    }>>;
+    row?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableRowProps & {
         row: Row<T>;
         index: number;
         enableHover?: boolean;
@@ -147,8 +103,8 @@ export interface DataTableSlotProps<T = any> {
         isOdd?: boolean;
         renderSubComponent?: (row: Row<T>) => ReactNode;
         disableStickyHeader?: boolean;
-    };
-    cell: BaseSlotProps<T> & {
+    }>>;
+    cell?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableCellProps & {
         row: Row<T>;
         cell: any;
         column: Column<T>;
@@ -157,41 +113,37 @@ export interface DataTableSlotProps<T = any> {
         pinnedPosition?: number;
         pinnedRightPosition?: number;
         alignment?: 'left' | 'center' | 'right';
-    };
-    loadingRow: BaseSlotProps<T> & {
+    }>>;
+    loadingRow?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableRowProps & {
         rowCount: number;
         colSpan: number;
-    };
-    emptyRow: BaseSlotProps<T> & {
+    }>>;
+    emptyRow?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableRowProps & {
         colSpan: number;
         message: string;
-    };
-    expandedRow: BaseSlotProps<T> & {
+    }>>;
+    expandedRow?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableRowProps & {
         row: Row<T>;
         colSpan: number;
         children: ReactNode;
-    };
-    footer: BaseSlotProps<T> & {
+    }>>;
+    footer?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, BoxProps & {
         children: ReactNode;
         enableStickyFooter?: boolean;
-    };
-    pagination: BaseSlotProps<T> & DataTablePaginationProps;
-    searchInput: BaseSlotProps<T> & {
+    }>>;
+    pagination?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, DataTablePaginationProps>>;
+    searchInput?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ComponentProps<'input'> & {
         value: string;
         onChange: (value: string) => void;
         placeholder?: string;
         autoFocus?: boolean;
-    };
-    columnsPanel: BaseSlotProps<T> & {
-        getTogglableColumns: (columns: DataTableColumn<T>[]) => DataTableColumn<T>[];
-        getPinnableColumns: (columns: DataTableColumn<T>[]) => DataTableColumn<T>[];
-    };
-    columnVisibilityControl: BaseSlotProps<T>;
-    columnCustomFilterControl: BaseSlotProps<T>;
-    columnPinningControl: BaseSlotProps<T>;
-    resetButton: BaseSlotProps<T>;
-    tableSizeControl: BaseSlotProps<T>;
-    bulkActionsToolbar: BaseSlotProps<T> & {
+    }>>;
+    columnVisibilityControl?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, HTMLAttributes<HTMLDivElement>>>;
+    columnCustomFilterControl?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, HTMLAttributes<HTMLDivElement>>>;
+    columnPinningControl?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, HTMLAttributes<HTMLDivElement>>>;
+    resetButton?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ComponentProps<'button'>>>;
+    tableSizeControl?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, HTMLAttributes<HTMLDivElement>>>;
+    bulkActionsToolbar?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ToolbarProps & {
         selectionState: any;
         selectedRowCount: number;
         bulkActions?: (selectionState: any) => ReactNode;
@@ -199,8 +151,8 @@ export interface DataTableSlotProps<T = any> {
         enableSelectAll?: boolean;
         onSelectAll?: () => void;
         onDeselectAll?: () => void;
-    };
-    exportButton: BaseSlotProps<T> & {
+    }>>;
+    exportButton?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ComponentProps<'button'> & {
         filename?: string;
         dataMode?: 'client' | 'server';
         serverExport?: {
@@ -221,52 +173,105 @@ export interface DataTableSlotProps<T = any> {
         onExportComplete?: (result: ExportResult) => void;
         onExportError?: (error: ExportError) => void;
         onExportCancel?: () => void;
-    };
-    searchIcon: Record<string, any>;
-    clearIcon: Record<string, any>;
-    exportIcon: Record<string, any>;
-    columnIcon: Record<string, any>;
-    resetIcon: Record<string, any>;
-    moreIcon: Record<string, any>;
-    filterIcon: Record<string, any>;
-    pinIcon: Record<string, any>;
-    unpinIcon: Record<string, any>;
-    leftIcon: Record<string, any>;
-    rightIcon: Record<string, any>;
-    expandIcon: Record<string, any>;
-    collapseIcon: Record<string, any>;
-    csvIcon: Record<string, any>;
-    excelIcon: Record<string, any>;
-    selectAllIcon: Record<string, any>;
-    deselectIcon: Record<string, any>;
-    tableSizeIcon: Record<string, any>;
-    tableSizeSmallIcon: Record<string, any>;
-    tableSizeMediumIcon: Record<string, any>;
-    checkboxSelection: BaseSlotProps<T> & {
+    }>>;
+    searchIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    clearIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    exportIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    columnIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    resetIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    moreIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    filterIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    pinIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    unpinIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    leftIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    rightIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    csvIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    excelIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    selectAllIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    deselectIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    tableSizeIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    tableSizeSmallIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    tableSizeMediumIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    checkboxSelection?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ComponentProps<'input'> & {
         row?: Row<T>;
         checked: boolean;
         indeterminate?: boolean;
         onChange: (checked: boolean) => void;
         disabled?: boolean;
-    };
-    selectionColumn: DataTableColumn<T>;
-    expandColumn: DataTableColumn<T>;
-    loadingSkeleton: BaseSlotProps<T> & {
+    }>>;
+    expandIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    collapseIcon?: SlotComponent<ComponentProps<'svg'> & {
+        [key: string]: any;
+    }>;
+    loadingSkeleton?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, HTMLAttributes<HTMLDivElement> & {
         rows: number;
         columns: number;
-    };
-    noDataOverlay: BaseSlotProps<T> & {
+    }>>;
+    noDataOverlay?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, HTMLAttributes<HTMLDivElement> & {
         message: string;
-    };
-    exportProgressDialog: BaseSlotProps<T> & {
-        open: boolean;
-        progress: ExportProgress;
-        onCancel: () => void;
-    };
+    }>>;
+    selectionColumn?: DataTableColumn<T>;
+    expandColumn?: DataTableColumn<T>;
 }
-export interface DefaultSlots<T = any> extends DataTableSlots<T> {
+export type DataTableSlotProps<T = any> = {
+    [K in keyof DataTableSlots<T>]?: Record<string, any>;
+};
+export interface ColumnsPanelSlotProps<T = any> {
+    getTogglableColumns?: (columns: DataTableColumn<T>[]) => DataTableColumn<T>[];
+    getPinnableColumns?: (columns: DataTableColumn<T>[]) => DataTableColumn<T>[];
 }
 export type PartialSlotProps<T = any> = {
     [K in keyof DataTableSlotProps<T>]?: Partial<DataTableSlotProps<T>[K]>;
+} & {
+    columnsPanel?: ColumnsPanelSlotProps<T>;
 };
-export type SlotComponentProps<TSlot extends keyof DataTableSlots<T>, T = any> = DataTableSlotProps<T>[TSlot];
+export type SlotComponentProps<TSlot extends keyof DataTableSlots<T>, T = any> = DataTableSlots<T>[TSlot] extends SlotComponent<infer TProps> ? TProps : never;
+export type ExtractSlotProps<TSlot> = TSlot extends SlotComponent<infer TProps> ? TProps : never;
+export interface DefaultSlots<T = any> extends DataTableSlots<T> {
+}
+export interface SlotConfiguration<T = any> {
+    slots?: Partial<DataTableSlots<T>>;
+    slotProps?: PartialSlotProps<T>;
+}
+export interface SlotOverrideConfig<T = any> {
+    overrideSlot?: <K extends keyof DataTableSlots<T>>(slotName: K, component: DataTableSlots<T>[K], props?: Partial<SlotComponentProps<K, T>>) => void;
+    mergeSlotProps?: <K extends keyof DataTableSlots<T>>(slotName: K, props: Partial<SlotComponentProps<K, T>>) => Partial<SlotComponentProps<K, T>>;
+}

package/src/lib/utils/slot-helpers.d.ts

@@ -1,9 +1,15 @@
 import { ComponentType } from 'react';
 import { DataTableSlots } from '../types/slots.types';
 export declare function getSlotComponent<T, K extends keyof DataTableSlots<T>>(slots: Partial<DataTableSlots<T>> | undefined, slotName: K, fallback: ComponentType<any>): ComponentType<any>;
-export declare function renderSlot(slotComponent: ComponentType<any>, defaultProps: any, slotProps?: any): import("react/jsx-runtime").JSX.Element;
-export declare function createSlottableComponent<T, K extends keyof DataTableSlots<T>>(slotName: K, defaultComponent: ComponentType<any>): (props: {
-    slots?: Partial<DataTableSlots<T>>;
-    slotProps?: any;
-    componentProps: any;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare function mergeSlotProps(defaultProps?: Record<string, any>, slotProps?: Record<string, any>, userProps?: Record<string, any>): Record<string, any>;
+export declare 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>;
+};
+export declare function isSlotOverridden<T, K extends keyof DataTableSlots<T>>(slots: Partial<DataTableSlots<T>> | undefined, slotName: K): boolean;
+export declare function getOverriddenSlots<T>(slots: Partial<DataTableSlots<T>> | undefined): Array<keyof DataTableSlots<T>>;
+export declare function extractSlotProps<T, K extends keyof DataTableSlots<T>>(slotProps: Record<string, any> | undefined, slotName: K): Record<string, any>;
+export declare function createEnhancedSlotComponent<T, K extends keyof DataTableSlots<T>>(slots: Partial<DataTableSlots<T>> | undefined, slotName: K, fallback: ComponentType<any>, baseProps?: Record<string, any>): ComponentType<any>;
+export declare function validateSlotProps<T, K extends keyof DataTableSlots<T>>(slotName: K, props: any, requiredProps?: string[]): boolean;
+export declare function createSlotProps<T>(table: any, additionalProps?: Record<string, any>): Record<string, any>;
+export declare function withSlotProps<T, K extends keyof DataTableSlots<T>>(slots: Partial<DataTableSlots<T>> | undefined, slotProps: Record<string, any>, slotName: K, fallback: ComponentType<any>): (props: any) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,21 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSlotComponent = getSlotComponent;
-exports.renderSlot = renderSlot;
-exports.createSlottableComponent = createSlottableComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
+exports.mergeSlotProps = mergeSlotProps;
+exports.getSlotComponentWithProps = getSlotComponentWithProps;
+exports.isSlotOverridden = isSlotOverridden;
+exports.getOverriddenSlots = getOverriddenSlots;
+exports.extractSlotProps = extractSlotProps;
+exports.createEnhancedSlotComponent = createEnhancedSlotComponent;
+exports.validateSlotProps = validateSlotProps;
+exports.createSlotProps = createSlotProps;
+exports.withSlotProps = withSlotProps;
+const react_1 = require("react");
 function getSlotComponent(slots, slotName, fallback) {
     return (slots === null || slots === void 0 ? void 0 : slots[slotName]) || fallback;
 }
-function renderSlot(slotComponent, defaultProps, slotProps) {
-    const mergedProps = Object.assign(Object.assign({}, defaultProps), slotProps);
-    const Component = slotComponent;
-    return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, mergedProps));
+function mergeSlotProps(defaultProps = {}, slotProps = {}, userProps = {}) {
+    const merged = Object.assign({}, defaultProps);
+    Object.keys(slotProps).forEach(key => {
+        const slotValue = slotProps[key];
+        const mergedValue = merged[key];
+        if (key === 'sx' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
+            merged[key] = Object.assign(Object.assign({}, mergedValue), slotValue);
+        }
+        else if (key === 'style' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
+            merged[key] = Object.assign(Object.assign({}, mergedValue), slotValue);
+        }
+        else if (key === 'className' && typeof slotValue === 'string' && typeof mergedValue === 'string') {
+            merged[key] = `${mergedValue} ${slotValue}`.trim();
+        }
+        else {
+            merged[key] = slotValue;
+        }
+    });
+    Object.keys(userProps).forEach(key => {
+        const userValue = userProps[key];
+        const mergedValue = merged[key];
+        if (key === 'sx' && typeof userValue === 'object' && typeof mergedValue === 'object') {
+            merged[key] = Object.assign(Object.assign({}, mergedValue), userValue);
+        }
+        else if (key === 'style' && typeof userValue === 'object' && typeof mergedValue === 'object') {
+            merged[key] = Object.assign(Object.assign({}, mergedValue), userValue);
+        }
+        else if (key === 'className' && typeof userValue === 'string' && typeof mergedValue === 'string') {
+            merged[key] = `${mergedValue} ${userValue}`.trim();
+        }
+        else {
+            merged[key] = userValue;
+        }
+    });
+    return merged;
 }
-function createSlottableComponent(slotName, defaultComponent) {
-    return function SlottableComponent(props) {
-        var _a;
-        const SlotComponent = getSlotComponent(props.slots, slotName, defaultComponent);
-        return renderSlot(SlotComponent, props.componentProps, (_a = props.slotProps) === null || _a === void 0 ? void 0 : _a[slotName]);
+function getSlotComponentWithProps(slots, slotProps = {}, slotName, fallback, defaultProps = {}) {
+    const component = getSlotComponent(slots, slotName, fallback);
+    const props = mergeSlotProps(defaultProps, slotProps[slotName] || {}, {});
+    return { component, props };
+}
+function isSlotOverridden(slots, slotName) {
+    return Boolean(slots === null || slots === void 0 ? void 0 : slots[slotName]);
+}
+function getOverriddenSlots(slots) {
+    if (!slots)
+        return [];
+    return Object.keys(slots).filter(key => Boolean(slots[key]));
+}
+function extractSlotProps(slotProps, slotName) {
+    return ((slotProps === null || slotProps === void 0 ? void 0 : slotProps[slotName]) || {});
+}
+function createEnhancedSlotComponent(slots, slotName, fallback, baseProps = {}) {
+    const SlotComponent = getSlotComponent(slots, slotName, fallback);
+    return function EnhancedSlot(props) {
+        const mergedProps = mergeSlotProps(baseProps, {}, props);
+        return (0, react_1.createElement)(SlotComponent, mergedProps);
+    };
+}
+function validateSlotProps(slotName, props, requiredProps = []) {
+    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;
+}
+function createSlotProps(table, additionalProps = {}) {
+    return Object.assign({ table }, additionalProps);
+}
+function withSlotProps(slots, slotProps = {}, slotName, fallback) {
+    return function SlotWrapper(props) {
+        const SlotComponent = getSlotComponent(slots, slotName, fallback);
+        const mergedProps = mergeSlotProps({}, slotProps[slotName] || {}, props);
+        return (0, react_1.createElement)(SlotComponent, mergedProps);
     };
 }