@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/Table/Table.js

@@ -1,182 +1,237 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo, Fragment } from 'react';
-import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { forwardRef, useRef, useMemo, useState, useCallback } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
-import { TableContext, TableDataContext, TableComponentContext } from './TableContext.js';
-import TableHeader from './TableHeader.js';
-import TableBody from './TableBody.js';
-import TablePagination from './pagination/TablePagination.js';
-import TableRefresh from './refresh/TableRefresh.js';
-import { useTableRowSelection } from './rowSelection/useTableRowSelection.js';
-import { useTableSorting } from './sorting/useTableSorting.js';
-import { useTableLoading } from './useTableLoading.js';
-import { useTableFetchMore } from './useTableFetchMore.js';
-import { useTableDraggable } from './draggable/useTableDraggable.js';
-import useTableScroll from './useTableScroll.js';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { TableContext, TableDataContext, TableSuperContext } from './TableContext.js';
+import { TableBody } from './components/TableBody.js';
+import { TableColGroup } from './components/TableColGroup.js';
+import { TableHeader } from './components/TableHeader.js';
+import { TablePagination } from './components/TablePagination.js';
+import { useTableColumns } from './hooks/useTableColumns.js';
+import { useTableExpansion } from './hooks/useTableExpansion.js';
+import { useTableFixedOffsets } from './hooks/useTableFixedOffsets.js';
+import { useTableScroll } from './hooks/useTableScroll.js';
+import { useTableSelection } from './hooks/useTableSelection.js';
+import { useTableSorting } from './hooks/useTableSorting.js';
 import { composeRefs } from '../utils/composeRefs.js';
-import Loading from '../Loading/Loading.js';
+import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
+import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import cx from 'clsx';
 
-const Table = forwardRef(function Table(props, ref) {
-    var _a;
-    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, draggable: draggableProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, loadingTip = '資料載入中...', pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, scroll: scrollProp, scrollContainerClassName, ...rest } = props;
-    const bodyRef = useRef(null);
-    /** Feature rowSelection */
-    const [selectedRowKeys, setSelectedRowKey] = useTableRowSelection({
-        selectedRowKey: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.selectedRowKey,
-        onChange: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.onChange,
-        dataSource: dataSourceProp,
-        disabledRowKeys: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.disabledRowKeys,
-    });
-    const rowSelection = useMemo(() => rowSelectionProp
-        ? {
-            selectedRowKeys,
-            onChange: setSelectedRowKey,
-            actions: rowSelectionProp.actions,
-            disabledRowKeys: rowSelectionProp.disabledRowKeys,
+function TableInner(props, ref) {
+    const { className, columns, dataSource, draggable, emptyProps, expandable, highlight = 'row', loading = false, loadingRowsCount = 10, nested = false, pagination, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, transitionState, ...restProps } = props;
+    const hostRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const tableRef = useRef(null);
+    // mock loading dataSource
+    const dataSourceForRender = loading
+        ? Array.from({ length: Math.max(loadingRowsCount, 1) }).map((_, idx) => ({
+            key: idx,
+        }))
+        : dataSource;
+    // get row height from preset
+    const rowHeight = useMemo(() => {
+        switch (rowHeightPreset) {
+            case 'condensed':
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-condensed`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-reduced`);
+            case 'detailed':
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-tiny`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-tightened`);
+            case 'roomy':
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-small`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-medium`);
+            case 'base':
+            default:
+                return size === 'main'
+                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimized`)
+                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimal`);
         }
-        : undefined, [rowSelectionProp, selectedRowKeys, setSelectedRowKey]);
-    /** Feature sorting */
-    const [dataSource, onSort, { sortedOn, sortedType, onResetAll, setDataSource },] = useTableSorting({
-        dataSource: dataSourceProp,
-    });
-    /** Feature loading */
-    const [loading, setLoading] = useTableLoading({
-        loading: loadingProp,
+    }, [rowHeightPreset, size]);
+    // Highlight state for hover effects
+    const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+    const [hoveredColumnIndex, setHoveredColumnIndex] = useState(null);
+    const setHoveredCell = useCallback((rowIndex, columnIndex) => {
+        setHoveredRowIndex(rowIndex);
+        setHoveredColumnIndex(columnIndex);
+    }, []);
+    // Hooks
+    const sortingState = useTableSorting({
+        columns,
     });
-    /** Feature fetchMore */
-    const { fetchMore: onFetchMore, isFetching, isReachEnd, } = useTableFetchMore({
-        callback: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.callback,
+    const selectionState = useTableSelection({
         dataSource,
-        /** when pagination is given, fetchMore feature should be disabled */
-        disabled: !!paginationProp,
-        isReachEnd: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isReachEnd,
-        isFetching: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isFetching,
+        rowSelection,
     });
-    /** Feature refresh */
-    const isRefreshShow = useMemo(() => { var _a; 
-    /** @default false */
-    return (_a = refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show) !== null && _a !== void 0 ? _a : false; }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
-    /** Feature Scrolling */
-    const [scrollBody, scrollElement, isHorizontalScrolling] = useTableScroll({
-        onFetchMore,
-        loading,
-        scrollBarSize: 4,
+    const expansionState = useTableExpansion({
+        expandable,
+        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
     });
-    /** Feature drag and drop */
-    const { draggingId, onBeforeDragStart, onDragEnd } = useTableDraggable({
-        dataSource,
-        setDataSource,
-        draggable: draggableProp,
+    const actionConfig = useMemo(() => ({
+        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
+        dragHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed),
+        hasExpansion: !!expandable,
+        expansionFixed: !!(expandable === null || expandable === void 0 ? void 0 : expandable.fixed),
+        hasSelection: !!rowSelection,
+        selectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed),
+    }), [draggable === null || draggable === void 0 ? void 0 : draggable.enabled, draggable === null || draggable === void 0 ? void 0 : draggable.fixed, expandable, rowSelection]);
+    const columnState = useTableColumns({
+        actionConfig,
+        columns,
     });
-    /** context */
-    const tableContextValue = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return ({
-            emptyProps,
-            rowSelection,
-            isHorizontalScrolling,
-            sorting: {
-                onSort,
-                onResetAll,
-                sortedOn,
-                sortedType,
-            },
-            loading,
-            setLoading,
-            expanding: expandableProp,
-            fetchMore: onFetchMore
-                ? {
-                    onFetchMore,
-                    isFetching,
-                    isReachEnd,
-                }
-                : undefined,
-            pagination: paginationProp
-                ? {
-                    current: paginationProp.current,
-                    disableAutoSlicing: (_a = paginationProp.disableAutoSlicing) !== null && _a !== void 0 ? _a : false,
-                    onChange: paginationProp.onChange,
-                    total: (_b = paginationProp.total) !== null && _b !== void 0 ? _b : dataSource.length,
-                    options: {
-                        ...((_c = paginationProp.options) !== null && _c !== void 0 ? _c : {}),
-                        boundaryCount: (_e = (_d = paginationProp.options) === null || _d === void 0 ? void 0 : _d.boundaryCount) !== null && _e !== void 0 ? _e : 1,
-                        pageSize: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.pageSize) !== null && _g !== void 0 ? _g : 10,
-                        siblingCount: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.siblingCount) !== null && _j !== void 0 ? _j : 1,
-                    },
-                }
-                : undefined,
-            scroll: scrollProp,
-            draggable: draggableProp
-                ? {
-                    ...draggableProp,
-                    draggingId,
-                }
-                : undefined,
-        });
-    }, [
-        dataSource,
+    const scrollState = useTableScroll({
+        enabled: !nested,
+    });
+    // Fixed column offset calculations
+    const fixedOffsetsState = useTableFixedOffsets({
+        actionConfig,
+        columns: columns,
+        getResizedColumnWidth: columnState.getResizedColumnWidth,
+    });
+    // Stabilize draggable object
+    const draggableValue = useMemo(() => draggable
+        ? {
+            draggingId: null,
+            enabled: true,
+            fixed: draggable.fixed,
+        }
+        : undefined, [draggable]);
+    // Stabilize highlight object
+    const highlightValue = useMemo(() => ({
+        columnIndex: hoveredColumnIndex,
+        mode: highlight,
+        rowIndex: hoveredRowIndex,
+        setHoveredCell,
+    }), [highlight, hoveredColumnIndex, hoveredRowIndex, setHoveredCell]);
+    // Determine if virtual scrolling should be enabled
+    // Requires scroll.virtualized to be true AND scroll.y to be set
+    const virtualScrollEnabled = !!((scroll === null || scroll === void 0 ? void 0 : scroll.virtualized) && (scroll === null || scroll === void 0 ? void 0 : scroll.y));
+    // Context value - cast to any to avoid complex generic issues
+    const contextValue = useMemo(() => ({
+        columnState,
+        columns: columns,
+        dataSource: dataSourceForRender,
+        draggable: draggableValue,
         emptyProps,
-        expandableProp,
-        rowSelection,
-        onSort,
-        onResetAll,
-        sortedOn,
-        sortedType,
+        expansion: expansionState,
+        fixedOffsets: fixedOffsetsState,
+        resizable,
+        rowHeight,
+        highlight: highlightValue,
+        isScrollingHorizontally: scrollState.isScrollingHorizontally,
+        isInsideExpandedContentArea: nested,
         loading,
-        setLoading,
-        onFetchMore,
-        isFetching,
-        isReachEnd,
-        paginationProp,
-        isHorizontalScrolling,
-        scrollProp,
-        draggableProp,
-        draggingId,
-    ]);
-    const tableDataContextValue = useMemo(() => ({
+        pagination: pagination || undefined,
+        scroll,
+        scrollContainerRef,
+        selection: selectionState,
+        size,
+        sorting: sortingState,
+        transitionState,
+        virtualScrollEnabled,
+    }), [
+        columnState,
         columns,
+        dataSourceForRender,
+        draggableValue,
+        emptyProps,
+        expansionState,
+        fixedOffsetsState,
+        resizable,
+        rowHeight,
+        highlightValue,
+        loading,
+        pagination,
+        scroll,
+        scrollContainerRef,
+        scrollState.isScrollingHorizontally,
+        selectionState,
+        size,
+        sortingState,
+        transitionState,
+        virtualScrollEnabled,
+        nested,
+    ]);
+    const dataContextValue = useMemo(() => ({
+        columns: columns,
         dataSource,
     }), [columns, dataSource]);
-    const tableComponentContextValue = useMemo(() => {
+    const superContextValue = useMemo(() => {
         var _a;
         return ({
-            bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
+            containerWidth: scrollState.containerWidth,
+            getResizedColumnWidth: columnState.getResizedColumnWidth,
+            scrollLeft: scrollState.scrollLeft,
+            expansionLeftPadding: (_a = expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding) !== null && _a !== void 0 ? _a : 0,
         });
-    }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
-    const tableRefs = useComposeRefs([ref, scrollBody.target]);
-    const rowClassName = useMemo(() => {
-        if (bodyRowClassName) {
-            if (typeof bodyRowClassName === 'string') {
-                return () => bodyRowClassName;
-            }
-            return (source) => bodyRowClassName === null || bodyRowClassName === void 0 ? void 0 : bodyRowClassName(source);
+    }, [
+        scrollState.scrollLeft,
+        expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding,
+        scrollState.containerWidth,
+        columnState.getResizedColumnWidth,
+    ]);
+    // Drag and drop handler
+    const handleDragEnd = useCallback((result) => {
+        var _a;
+        if (!result.destination || !draggable)
+            return;
+        const sourceIndex = result.source.index;
+        const destIndex = result.destination.index;
+        if (sourceIndex === destIndex)
+            return;
+        const newData = [...dataSource];
+        const [removed] = newData.splice(sourceIndex, 1);
+        newData.splice(destIndex, 0, removed);
+        (_a = draggable.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(draggable, newData);
+    }, [dataSource, draggable]);
+    const sizeClass = size === 'sub' ? tableClasses.sub : tableClasses.main;
+    // Scroll container style
+    const scrollContainerStyle = useMemo(() => {
+        const containerStyle = {};
+        if (scroll === null || scroll === void 0 ? void 0 : scroll.y) {
+            containerStyle.maxHeight = scroll.y;
+            containerStyle.overflowY = 'auto';
+        }
+        if (scroll === null || scroll === void 0 ? void 0 : scroll.x) {
+            containerStyle.overflowX = 'auto';
+        }
+        if (nested) {
+            containerStyle.position = 'unset';
+            containerStyle.overflow = 'unset';
+        }
+        return containerStyle;
+    }, [scroll === null || scroll === void 0 ? void 0 : scroll.x, scroll === null || scroll === void 0 ? void 0 : scroll.y, nested]);
+    // Table style with min-width for horizontal scroll
+    const tableStyle = useMemo(() => {
+        const baseStyle = {};
+        if (scroll === null || scroll === void 0 ? void 0 : scroll.x) {
+            baseStyle.minWidth = scroll.x;
+            baseStyle.width = '100%';
         }
-        return undefined;
-    }, [bodyRowClassName]);
-    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
-                            className: tableClasses.loading,
-                        }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll
-                                            ? {
-                                                '--table-scroll-x': tableContextValue.scroll.x
-                                                    ? `${tableContextValue.scroll.x}px`
-                                                    : '100%',
-                                                '--table-scroll-y': tableContextValue.scroll.y
-                                                    ? `${tableContextValue.scroll.y}px`
-                                                    : 'unset',
-                                            }
-                                            : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: rowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
-                                                width: '100%',
-                                                height: '100%',
-                                                position: 'relative',
-                                            }, children: jsx("div", { ref: scrollElement.ref, "aria-label": "Scroll Bar", onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, className: "mzn-table-scroll-bar", children: jsx("div", { style: {
-                                                        width: `${scrollElement.scrollBarSize}px`,
-                                                        height: '100%',
-                                                        borderRadius: '10px',
-                                                        backgroundColor: '#7d7d7d',
-                                                        transition: '0.1s',
-                                                    } }) }) }) })] })) }) }) }) }) }) }));
-});
+        return baseStyle;
+    }, [scroll === null || scroll === void 0 ? void 0 : scroll.x]);
+    const { setContainerRef } = scrollState;
+    const handleScrollContainerRef = useCallback((element) => {
+        scrollContainerRef.current = element;
+        setContainerRef(element);
+    }, [setContainerRef]);
+    const mainTable = (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: ref, style: style, ...restProps, children: [jsx("div", { className: cx(tableClasses.scrollContainer, {
+                            [tableClasses.sticky]: !!sticky,
+                        }), onScroll: scrollState.handleScroll, ref: handleScrollContainerRef, style: scrollContainerStyle, children: jsxs("table", { className: cx(tableClasses.root, sizeClass), ref: tableRef, style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {})] }) }), pagination && jsx(TablePagination, { ...pagination })] }) }) }));
+    if (nested) {
+        return mainTable;
+    }
+    return (jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(Droppable, { droppableId: "mzn-table-v2-dnd", children: (provided) => (jsxs("div", { ...provided.droppableProps, ref: composeRefs([hostRef, provided.innerRef]), children: [jsx(TableSuperContext.Provider, { value: superContextValue, children: mainTable }), provided.placeholder] })) }) }));
+}
+/**
+ * Table is a high-performance data table component with support for
+ * virtual scrolling, column resizing, fixed columns, row selection,
+ * sorting, expandable rows, and drag-and-drop row reordering.
+ */
+const Table = forwardRef(TableInner);
 
-export { Table as default };
+export { Table, Table as default };

package/Table/TableContext.d.ts

@@ -1,53 +1,116 @@
-import { ReactNode } from 'react';
-import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
-import { EmptyProps } from '../Empty';
-/** typeof rowSelection */
-export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
-    selectedRowKeys: string[];
-    onChange(v: string): void;
-    disabledRowKeys?: string[];
-}
-/** typeof sorting */
-export interface SortingContext {
-    onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'key' | 'dataIndex' | 'sorter' | 'onSorted'>): void;
-    onResetAll(): void;
-    sortedOn: string;
-    sortedType: string;
-}
-/** typeof loading */
-export interface LoadingContext {
-    setLoading(l: boolean): void;
-}
-/** typeof fetchMore */
-export interface FetchMoreContext {
-    onFetchMore(): void;
-    isFetching: boolean;
-    isReachEnd: boolean;
-}
-export interface TableContextProps {
-    isHorizontalScrolling?: boolean;
+import type { HighlightMode, TableSize, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll } from '@mezzanine-ui/core/table';
+import type { EmptyProps } from '../Empty';
+import type { PaginationProps } from '../Pagination';
+import type { UseTableFixedOffsetsReturn } from './hooks/useTableFixedOffsets';
+/** Sorting context state */
+export interface TableSortingState {
+    onSort: (key: string) => void;
+}
+/** Selection context state */
+export interface TableSelectionState<T extends TableDataSource = TableDataSource> {
+    config: TableRowSelection<T>;
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    isRowDisabled: (record: T) => boolean;
+    isRowSelected: (key: string | number) => boolean;
+    selectedRowKeys: (string | number)[];
+    toggleAll: () => void;
+    toggleRow: (key: string | number, record: T) => void;
+}
+/** Expansion context state */
+export interface TableExpansionState<T extends TableDataSource = TableDataSource> {
+    config: TableExpandable<T>;
+    expansionLeftPadding: number;
+    expandedRowKeys: (string | number)[];
+    isRowExpanded: (key: string | number) => boolean;
+    toggleExpand: (key: string | number, record: T) => void;
+}
+/** Column state with computed widths */
+export interface TableColumnState {
+    resizedColumnWidths: Map<string, number>;
+    columns: TableColumn[];
+    fixedEndColumns: TableColumn[];
+    fixedStartColumns: TableColumn[];
+    getResizedColumnWidth: (key: string) => number | undefined;
+    scrollableColumns: TableColumn[];
+    setResizedColumnWidth: (key: string, width: number) => void;
+    totalFixedEndWidth: number;
+    totalFixedStartWidth: number;
+}
+/** Draggable state */
+export interface TableDraggableState {
+    draggingId: string | null;
+    enabled: boolean;
+    fixed?: boolean | 'start';
+}
+/** Highlight state for hover effects */
+export interface TableHighlightState {
+    /** Current column index being hovered */
+    columnIndex: number | null;
+    /** Highlight mode */
+    mode: HighlightMode;
+    /** Current row index being hovered */
+    rowIndex: number | null;
+    /** Set hovered cell */
+    setHoveredCell: (rowIndex: number | null, columnIndex: number | null) => void;
+}
+/** Transition state for row add/remove animations */
+export interface TableTransitionState {
+    /** Keys of rows currently in adding state (highlighted) */
+    addingKeys: Set<string>;
+    /** Keys of rows currently in deleting state (red highlight) */
+    deletingKeys: Set<string>;
+    /** Keys of rows currently fading out */
+    fadingOutKeys: Set<string>;
+}
+/** Main table context */
+export interface TableContextValue<T extends TableDataSource = TableDataSource> {
+    columnState?: TableColumnState;
+    columns: TableColumn<T>[];
+    /** Container width for scroll calculations */
+    dataSource: T[];
+    draggable?: TableDraggableState;
     emptyProps?: EmptyProps;
-    rowSelection?: RowSelectionContext;
-    sorting?: SortingContext;
+    expansion?: TableExpansionState<T>;
+    /** Fixed column offset calculations */
+    fixedOffsets?: UseTableFixedOffsetsReturn;
+    /** Whether columns are resizable by user interaction */
+    resizable?: boolean;
+    /** Row height */
+    rowHeight: number;
+    /** Highlight state for hover effects */
+    highlight?: TableHighlightState;
+    isScrollingHorizontally?: boolean;
     loading?: boolean;
-    setLoading?(l: boolean): void;
-    expanding?: Omit<TableExpandable<TableRecord<unknown>>, 'expandedRowRender'> & {
-        expandedRowRender(record: TableRecord<unknown>): ReactNode | ExpandRowBySources;
-    };
-    fetchMore?: FetchMoreContext;
-    pagination?: TablePagination;
-    scroll?: TableScrolling;
-    draggable?: TableDraggable & {
-        draggingId: string;
-    };
-}
-export declare const TableContext: import("react").Context<TableContextProps | null>;
-export interface TableDataContextProps {
-    columns: TableColumn<TableRecord<unknown>>[];
-    dataSource: TableDataSource[];
-}
-export declare const TableDataContext: import("react").Context<TableDataContextProps | null>;
-export interface TableComponentContextProps {
-    bodyCell?: any;
-}
-export declare const TableComponentContext: import("react").Context<TableComponentContextProps | null>;
+    pagination?: PaginationProps;
+    size?: TableSize;
+    scroll?: TableScroll;
+    /** Ref to the scroll container div for virtualization */
+    scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
+    selection?: TableSelectionState<T>;
+    sorting?: TableSortingState;
+    /** Transition state for row add/remove animations */
+    transitionState?: TableTransitionState;
+    /** Whether virtual scrolling is enabled */
+    virtualScrollEnabled?: boolean;
+    /** Whether the table is inside an expanded content area */
+    isInsideExpandedContentArea?: boolean;
+}
+export declare const TableContext: import("react").Context<TableContextValue<TableDataSource> | null>;
+export declare function useTableContext<T extends TableDataSource = TableDataSource>(): TableContextValue<T>;
+/** Data context for performance optimization */
+export interface TableDataContextValue<T extends TableDataSource = TableDataSource> {
+    columns: TableColumn<T>[];
+    dataSource: T[];
+}
+export declare const TableDataContext: import("react").Context<TableDataContextValue<TableDataSource> | null>;
+export declare function useTableDataContext<T extends TableDataSource = TableDataSource>(): TableDataContextValue<T>;
+export interface TableSuperContextValue {
+    containerWidth?: number;
+    /** Get resized column width from root table (for child table column sync) */
+    getResizedColumnWidth?: (key: string) => number | undefined;
+    scrollLeft?: number;
+    expansionLeftPadding?: number;
+}
+export declare const TableSuperContext: import("react").Context<TableSuperContextValue | null>;
+export declare function useTableSuperContext(): TableSuperContextValue;

package/Table/TableContext.js

@@ -1,7 +1,26 @@
-import { createContext } from 'react';
+'use client';
+import { createContext, useContext } from 'react';
 
 const TableContext = createContext(null);
+function useTableContext() {
+    const context = useContext(TableContext);
+    if (!context) {
+        throw new Error('useTableContext must be used within a Table component');
+    }
+    return context;
+}
 const TableDataContext = createContext(null);
-const TableComponentContext = createContext(null);
+function useTableDataContext() {
+    const context = useContext(TableDataContext);
+    if (!context) {
+        throw new Error('useTableDataContext must be used within a Table component');
+    }
+    return context;
+}
+const TableSuperContext = createContext(null);
+function useTableSuperContext() {
+    const context = useContext(TableSuperContext) || {};
+    return context;
+}
 
-export { TableComponentContext, TableContext, TableDataContext };
+export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext };

package/Table/components/TableBody.d.ts

@@ -0,0 +1,5 @@
+export interface TableBodyProps {
+    className?: string;
+    droppableRef?: React.Ref<HTMLTableSectionElement>;
+}
+export declare const TableBody: import("react").NamedExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;