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

package/Table/components/TableExpandCell.d.ts

@@ -0,0 +1,11 @@
+export interface TableExpandCellProps {
+    canExpand?: boolean;
+    className?: string;
+    expanded: boolean;
+    fixed?: boolean;
+    fixedOffset?: number;
+    isHeader?: boolean;
+    onClick?: VoidFunction;
+    showShadow?: boolean;
+}
+export declare const TableExpandCell: import("react").NamedExoticComponent<TableExpandCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableExpandCell.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useCallback } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { ChevronRightIcon } from '@mezzanine-ui/icons';
+import { useTableContext } from '../TableContext.js';
+import Skeleton from '../../Skeleton/Skeleton.js';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+const TableExpandCellInner = forwardRef(function TableExpandCell(props, ref) {
+    const { loading } = useTableContext();
+    const { canExpand = true, className, expanded, fixed = false, fixedOffset = 0, isHeader = false, onClick, showShadow = false, } = props;
+    const handleClick = useCallback((event) => {
+        event.stopPropagation();
+        if (canExpand && onClick) {
+            onClick();
+        }
+    }, [canExpand, onClick]);
+    const CellComponent = isHeader ? 'th' : 'td';
+    const cellStyle = {};
+    if (fixed) {
+        cellStyle['--fixed-start-offset'] =
+            `${fixedOffset}px`;
+    }
+    const renderChild = () => {
+        if (isHeader)
+            return null;
+        if (loading) {
+            return jsx(Skeleton, { width: "100%", variant: "body-highlight" });
+        }
+        return canExpand ? (jsx("button", { className: cx(tableClasses.expandIcon, {
+                [tableClasses.expandIconExpanded]: expanded,
+            }), onClick: handleClick, type: "button", children: jsx(Icon, { icon: ChevronRightIcon, color: "inherit" }) })) : null;
+    };
+    return (jsx(CellComponent, { className: cx(isHeader ? tableClasses.headerCell : tableClasses.cell, tableClasses.expandCell, {
+            [tableClasses.cellFixed]: fixed,
+            [tableClasses.cellFixedStart]: fixed,
+            [tableClasses.cellFixedShadow]: showShadow,
+        }, className), ref: ref, scope: isHeader ? 'col' : undefined, style: cellStyle, children: renderChild() }));
+});
+const TableExpandCell = memo(TableExpandCellInner);
+
+export { TableExpandCell };

package/Table/components/TableExpandedRow.d.ts

@@ -0,0 +1,9 @@
+import { type TableDataSource } from '@mezzanine-ui/core/table';
+export interface TableExpandedRowProps<T extends TableDataSource = TableDataSource> {
+    className?: string;
+    record: T;
+    style?: React.CSSProperties;
+}
+declare const TableExpandedRowInner: import("react").ForwardRefExoticComponent<TableExpandedRowProps<TableDataSource> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const TableExpandedRow: typeof TableExpandedRowInner;
+export {};

package/Table/components/TableExpandedRow.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useMemo, cloneElement } from 'react';
+import { getRowKey, tableClasses } from '@mezzanine-ui/core/table';
+import { useTableContext } from '../TableContext.js';
+import { Table } from '../Table.js';
+import cx from 'clsx';
+
+const TableExpandedRowInner = forwardRef(function TableExpandedRow(props, ref) {
+    const { className, record, style } = props;
+    const { columns, expansion, draggable, selection } = useTableContext();
+    // Calculate total column span
+    const totalColSpan = useMemo(() => {
+        let colSpan = columns.length;
+        // Add 1 for expand column itself
+        if (expansion)
+            colSpan += 1;
+        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+            colSpan += 1;
+        if (selection)
+            colSpan += 1;
+        return colSpan;
+    }, [columns.length, expansion, draggable === null || draggable === void 0 ? void 0 : draggable.enabled, selection]);
+    const rowKey = getRowKey(record);
+    const isExpanded = expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded(rowKey);
+    const { config } = expansion || {};
+    const { expandedRowRender } = config || {};
+    const childNeededProps = useMemo(() => ({
+        table: {
+            nested: true,
+            showHeader: false,
+        },
+    }), []);
+    if (!expandedRowRender || !isExpanded)
+        return null;
+    const children = expandedRowRender(record);
+    const clonedChild = cloneElement(children);
+    return (jsx("tr", { className: cx(tableClasses.expandedRow, className), "data-row-key": `${rowKey}-expanded`, ref: ref, style: style, children: jsx("td", { className: tableClasses.expandedRowCell, colSpan: totalColSpan, style: { paddingLeft: expansion === null || expansion === void 0 ? void 0 : expansion.expansionLeftPadding }, children: jsx("div", { className: tableClasses.expandedContent, children: clonedChild.type === Table
+                    ? cloneElement(clonedChild, {
+                        ...childNeededProps.table,
+                    })
+                    : clonedChild }) }) }));
+});
+const TableExpandedRow = memo(TableExpandedRowInner);
+
+export { TableExpandedRow };

package/Table/components/TableHeader.d.ts

@@ -0,0 +1,4 @@
+export interface TableHeaderProps {
+    className?: string;
+}
+export declare const TableHeader: import("react").NamedExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;

package/Table/components/TableHeader.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, forwardRef } from 'react';
+import { tableClasses, DRAG_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY, getCellAlignClass } from '@mezzanine-ui/core/table';
+import { QuestionOutlineIcon, CaretUpIcon, CaretDownIcon, DotVerticalIcon } from '@mezzanine-ui/icons';
+import { useTableContext, useTableSuperContext } from '../TableContext.js';
+import { TableDragHandleCell } from './TableDragHandleCell.js';
+import { TableExpandCell } from './TableExpandCell.js';
+import { TableResizeHandle } from './TableResizeHandle.js';
+import { TableSelectionCell } from './TableSelectionCell.js';
+import Tooltip from '../../Tooltip/Tooltip.js';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+const TableHeaderInner = forwardRef(function TableHeader(props, ref) {
+    const { className } = props;
+    const { columns, draggable, expansion, fixedOffsets, resizable, selection, sorting, } = useTableContext();
+    const { containerWidth, scrollLeft } = useTableSuperContext();
+    const parseFixed = (fixed) => {
+        if (fixed === true || fixed === 'start')
+            return 'start';
+        if (fixed === 'end')
+            return 'end';
+        return null;
+    };
+    const renderDragHandleHeader = () => {
+        var _a;
+        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
+            return null;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getDragHandleOffset();
+        const isFixed = !!draggable.fixed;
+        const showShadow = isFixed &&
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(DRAG_HANDLE_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableDragHandleCell, { fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, isHeader: true, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+    };
+    const renderSelectionHeader = () => {
+        var _a, _b, _c;
+        if (!selection)
+            return null;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getSelectionOffset();
+        const isFixed = !!((_a = selection.config) === null || _a === void 0 ? void 0 : _a.fixed);
+        const showShadow = isFixed &&
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(SELECTION_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableSelectionCell, { fixed: isFixed, fixedOffset: (_b = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _b !== void 0 ? _b : 0, indeterminate: selection.isIndeterminate, isHeader: true, hidden: (_c = selection.config) === null || _c === void 0 ? void 0 : _c.hideSelectAll, onChange: selection.toggleAll, selected: selection.isAllSelected, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+    };
+    const renderExpandHeader = () => {
+        var _a, _b;
+        if (!expansion)
+            return null;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getExpansionOffset();
+        const isFixed = !!((_a = expansion.config) === null || _a === void 0 ? void 0 : _a.fixed);
+        const showShadow = isFixed &&
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(EXPANSION_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableExpandCell, { expanded: false, fixed: isFixed, fixedOffset: (_b = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _b !== void 0 ? _b : 0, isHeader: true, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+    };
+    const renderHelpIcon = (column) => {
+        if (!column.titleHelp)
+            return null;
+        return (jsx(Tooltip, { title: column.titleHelp, disablePortal: false, children: ({ onMouseEnter, onMouseLeave, ref: tooltipRef }) => (jsx(Icon, { size: 16, icon: QuestionOutlineIcon, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: tableClasses.headerCellIcon, tabIndex: 0, ref: tooltipRef })) }));
+    };
+    const renderSortIcon = (column) => {
+        if (!column.onSort || !sorting)
+            return null;
+        const direction = column.sortOrder;
+        return (jsxs("button", { className: tableClasses.sortIcons, type: "button", onClick: (evt) => {
+                evt.stopPropagation();
+                sorting.onSort(column.key);
+            }, onKeyDown: (evt) => {
+                evt.stopPropagation();
+                if (evt.key === 'Enter' || evt.key === ' ') {
+                    evt.preventDefault();
+                    sorting.onSort(column.key);
+                }
+            }, children: [jsx(Icon, { className: cx(tableClasses.sortIcon, {
+                        [tableClasses.sortIconActive]: direction === 'ascend',
+                    }), icon: CaretUpIcon, size: 8 }), jsx(Icon, { className: cx(tableClasses.sortIcon, {
+                        [tableClasses.sortIconActive]: direction === 'descend',
+                    }), icon: CaretDownIcon, size: 8 })] }));
+    };
+    const renderMenuIcon = (column) => {
+        if (!column.titleMenu)
+            return null;
+        /** @TODO wait for dropdown component */
+        return (jsx(Icon, { size: 16, icon: DotVerticalIcon, className: tableClasses.headerCellIcon }));
+    };
+    const renderHeaderCells = () => {
+        return columns.map((column, columnIndex) => {
+            var _a;
+            const fixedPos = parseFixed(column.fixed);
+            const alignClass = getCellAlignClass(column.align);
+            const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getColumnOffset(column.key);
+            const offset = (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0;
+            const cellStyle = {};
+            if (fixedPos === 'start') {
+                cellStyle['--fixed-start-offset'] =
+                    `${offset}px`;
+            }
+            else if (fixedPos === 'end') {
+                cellStyle['--fixed-end-offset'] =
+                    `${offset}px`;
+            }
+            // Show shadow based on scroll position and sticky state
+            const showShadow = !!fixedPos &&
+                (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(column.key, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+            const ariaSort = (() => {
+                if (column.sortOrder === 'ascend')
+                    return 'ascending';
+                if (column.sortOrder === 'descend')
+                    return 'descending';
+                return undefined;
+            })();
+            return (jsxs("th", { "aria-sort": ariaSort, className: cx(tableClasses.headerCell, {
+                    [tableClasses.cellFixed]: !!fixedPos,
+                    [tableClasses.cellFixedEnd]: fixedPos === 'end',
+                    [tableClasses.cellFixedShadow]: showShadow,
+                    [tableClasses.cellFixedStart]: fixedPos === 'start',
+                    [tableClasses.headerCellFixed]: !!fixedPos,
+                }, column.className), scope: "col", style: cellStyle, children: [jsxs("div", { className: tableClasses.headerCellContent, children: [jsxs("div", { className: cx(tableClasses.headerCellActions, alignClass), children: [jsx("span", { className: tableClasses.headerCellTitle, children: column.title }), renderHelpIcon(column), renderSortIcon(column)] }), renderMenuIcon(column)] }), resizable && (jsx(TableResizeHandle, { column: column, columnIndex: columnIndex }))] }, column.key));
+        });
+    };
+    return (jsx("thead", { className: cx(tableClasses.header, className), ref: ref, children: jsxs("tr", { className: tableClasses.headerRow, children: [renderDragHandleHeader(), renderExpandHeader(), renderSelectionHeader(), renderHeaderCells()] }) }));
+});
+const TableHeader = memo(TableHeaderInner);
+
+export { TableHeader };

package/Table/components/TablePagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from '../../Pagination';
+export type TablePaginationProps = PaginationProps;
+export declare const TablePagination: import("react").NamedExoticComponent<Omit<PaginationProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/Table/components/TablePagination.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef } from 'react';
+import Pagination from '../../Pagination/Pagination.js';
+
+const TablePaginationInner = forwardRef(function TablePagination(props, ref) {
+    return jsx(Pagination, { ref: ref, ...props });
+});
+const TablePagination = memo(TablePaginationInner);
+
+export { TablePagination };

package/Table/components/TableResizeHandle.d.ts

@@ -0,0 +1,13 @@
+import { type TableColumn } from '@mezzanine-ui/core/table';
+export interface TableResizeHandleProps {
+    /** The column this resize handle belongs to */
+    column: TableColumn;
+    /** Index of the column in the columns array */
+    columnIndex: number;
+}
+/**
+ * TableResizeHandle provides column resizing functionality.
+ * It adjusts the width of the current column and the next column together,
+ * maintaining the total width of both columns.
+ */
+export declare const TableResizeHandle: import("react").NamedExoticComponent<TableResizeHandleProps>;

package/Table/components/TableResizeHandle.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, useRef, useCallback } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { useTableContext } from '../TableContext.js';
+
+/**
+ * TableResizeHandle provides column resizing functionality.
+ * It adjusts the width of the current column and the next column together,
+ * maintaining the total width of both columns.
+ */
+const TableResizeHandle = memo(function TableResizeHandle({ column, columnIndex, }) {
+    const { columnState, columns, draggable, expansion, scrollContainerRef, selection, } = useTableContext();
+    const { setResizedColumnWidth } = columnState || {};
+    const startWidthRef = useRef(0);
+    const nextStartWidthRef = useRef(0);
+    const startXRef = useRef(0);
+    // Calculate action columns offset
+    const actionColumnsOffset = (() => {
+        let offset = 0;
+        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+            offset += 1;
+        if (expansion)
+            offset += 1;
+        if (selection)
+            offset += 1;
+        return offset;
+    })();
+    // Get the actual rendered width of a column from the DOM
+    const getColumnActualWidth = useCallback((colIndex) => {
+        const container = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (!container)
+            return 0;
+        const table = container.querySelector('table');
+        if (!table)
+            return 0;
+        const colGroup = table.querySelector('colgroup');
+        if (!colGroup)
+            return 0;
+        const colElements = colGroup.querySelectorAll('col');
+        const targetCol = colElements[actionColumnsOffset + colIndex];
+        if (!targetCol)
+            return 0;
+        return targetCol.getBoundingClientRect().width;
+    }, [actionColumnsOffset, scrollContainerRef]);
+    const handleMouseDown = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        // Get next column (the one to the right)
+        const nextColumn = columns[columnIndex + 1];
+        if (!nextColumn) {
+            // If there's no next column, we can't do adjacent resize
+            return;
+        }
+        // Get the actual rendered widths from the DOM
+        const currentWidth = getColumnActualWidth(columnIndex);
+        const nextWidth = getColumnActualWidth(columnIndex + 1);
+        if (currentWidth === 0 || nextWidth === 0) {
+            return;
+        }
+        startXRef.current = event.clientX;
+        startWidthRef.current = currentWidth;
+        nextStartWidthRef.current = nextWidth;
+        // Get min/max constraints (undefined means no constraint)
+        const minWidth = column.minWidth;
+        const maxWidth = column.maxWidth;
+        const nextMinWidth = nextColumn.minWidth;
+        const nextMaxWidth = nextColumn.maxWidth;
+        const handleMouseMove = (moveEvent) => {
+            const diff = moveEvent.clientX - startXRef.current;
+            // Calculate desired new widths
+            const newWidth = startWidthRef.current + diff;
+            const newNextWidth = nextStartWidthRef.current - diff;
+            // Check if either column would hit its constraint
+            let isConstrained = false;
+            // Check current column constraints
+            if (minWidth !== undefined && newWidth < minWidth) {
+                isConstrained = true;
+            }
+            if (maxWidth !== undefined && newWidth > maxWidth) {
+                isConstrained = true;
+            }
+            // Check next column constraints
+            if (nextMinWidth !== undefined && newNextWidth < nextMinWidth) {
+                isConstrained = true;
+            }
+            if (nextMaxWidth !== undefined && newNextWidth > nextMaxWidth) {
+                isConstrained = true;
+            }
+            // If either column is constrained, stop both from changing
+            if (isConstrained) {
+                return;
+            }
+            // Final validation: ensure we don't go below 0
+            if (newWidth < 0 || newNextWidth < 0) {
+                return;
+            }
+            setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(column.key, newWidth);
+            setResizedColumnWidth === null || setResizedColumnWidth === void 0 ? void 0 : setResizedColumnWidth(nextColumn.key, newNextWidth);
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [column, columnIndex, columns, getColumnActualWidth, setResizedColumnWidth]);
+    // Don't show resize handle for the last column (no adjacent column to resize)
+    if (columnIndex >= columns.length - 1) {
+        return null;
+    }
+    return (jsx("div", { "aria-hidden": "true", className: tableClasses.resizeHandle, onMouseDown: handleMouseDown, role: "presentation" }));
+});
+
+export { TableResizeHandle };

package/Table/components/TableRow.d.ts

@@ -0,0 +1,12 @@
+import { type TableDataSource } from '@mezzanine-ui/core/table';
+import type { DraggableProvided } from '@hello-pangea/dnd';
+export interface TableRowProps<T extends TableDataSource = TableDataSource> {
+    className?: string;
+    draggableProvided?: DraggableProvided;
+    record: T;
+    rowIndex: number;
+    style?: React.CSSProperties;
+}
+declare const TableRowInner: import("react").ForwardRefExoticComponent<TableRowProps<TableDataSource> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const TableRow: typeof TableRowInner;
+export {};

package/Table/components/TableRow.js

@@ -0,0 +1,126 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useMemo, useCallback } from 'react';
+import { getRowKey, tableClasses, DRAG_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY } from '@mezzanine-ui/core/table';
+import { useTableContext, useTableSuperContext } from '../TableContext.js';
+import { TableCell } from './TableCell.js';
+import { TableDragHandleCell } from './TableDragHandleCell.js';
+import { TableExpandCell } from './TableExpandCell.js';
+import { TableSelectionCell } from './TableSelectionCell.js';
+import { composeRefs } from '../../utils/composeRefs.js';
+import cx from 'clsx';
+
+const parseFixed = (fixed) => {
+    if (fixed === true || fixed === 'start')
+        return 'start';
+    if (fixed === 'end')
+        return 'end';
+    return null;
+};
+const TableRowInner = forwardRef(function TableRow(props, ref) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { className, draggableProvided, record, rowIndex, style } = props;
+    const { columns, draggable, expansion, fixedOffsets, rowHeight, highlight, selection, transitionState, } = useTableContext();
+    const resolvedStyle = useMemo(() => ({
+        ...style,
+        ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps.style,
+        height: rowHeight,
+    }), [style, rowHeight, draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps.style]);
+    const { containerWidth, scrollLeft } = useTableSuperContext();
+    const rowKey = useMemo(() => getRowKey(record), [record]);
+    const isSelected = (_e = (_d = (_c = (_b = (_a = selection === null || selection === void 0 ? void 0 : selection.config) === null || _a === void 0 ? void 0 : _a.getCheckboxProps) === null || _b === void 0 ? void 0 : _b.call(_a, record)) === null || _c === void 0 ? void 0 : _c.selected) !== null && _d !== void 0 ? _d : selection === null || selection === void 0 ? void 0 : selection.isRowSelected(rowKey)) !== null && _e !== void 0 ? _e : false;
+    const isIndeterminate = (_j = (_h = (_g = (_f = selection === null || selection === void 0 ? void 0 : selection.config) === null || _f === void 0 ? void 0 : _f.getCheckboxProps) === null || _g === void 0 ? void 0 : _g.call(_f, record)) === null || _h === void 0 ? void 0 : _h.indeterminate) !== null && _j !== void 0 ? _j : false;
+    const isExpanded = (_k = expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded(rowKey)) !== null && _k !== void 0 ? _k : false;
+    // Check transition states
+    const isAdding = (_l = transitionState === null || transitionState === void 0 ? void 0 : transitionState.addingKeys.has(rowKey)) !== null && _l !== void 0 ? _l : false;
+    const isDeleting = (_m = transitionState === null || transitionState === void 0 ? void 0 : transitionState.deletingKeys.has(rowKey)) !== null && _m !== void 0 ? _m : false;
+    const isFadingOut = (_o = transitionState === null || transitionState === void 0 ? void 0 : transitionState.fadingOutKeys.has(rowKey)) !== null && _o !== void 0 ? _o : false;
+    // Check if this row should be highlighted based on highlight mode
+    const isRowHighlighted = useMemo(() => {
+        if (!highlight)
+            return false;
+        const { mode, rowIndex: hoveredRow } = highlight;
+        if (hoveredRow === null)
+            return false;
+        // Row highlight: when hovering any cell in this row
+        if (mode === 'row' && hoveredRow === rowIndex)
+            return true;
+        // Cross highlight: this row matches the hovered row
+        if (mode === 'cross' && hoveredRow === rowIndex)
+            return true;
+        return false;
+    }, [highlight, rowIndex]);
+    const handleRowClick = useCallback(() => {
+        // Future: support row click to expand or select
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            handleRowClick();
+        }
+    }, [handleRowClick]);
+    const handleMouseLeave = useCallback(() => {
+        highlight === null || highlight === void 0 ? void 0 : highlight.setHoveredCell(null, null);
+    }, [highlight]);
+    const renderDragHandleCell = () => {
+        var _a;
+        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
+            return null;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getDragHandleOffset();
+        const isFixed = !!draggable.fixed;
+        const showShadow = isFixed &&
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(DRAG_HANDLE_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableDragHandleCell, { dragHandleProps: draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.dragHandleProps, fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+    };
+    const renderSelectionCell = () => {
+        var _a, _b;
+        if (!selection)
+            return null;
+        const isDisabled = selection.isRowDisabled(record);
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getSelectionOffset();
+        const isFixed = !!((_a = selection.config) === null || _a === void 0 ? void 0 : _a.fixed);
+        const showShadow = isFixed &&
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(SELECTION_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableSelectionCell, { disabled: isDisabled, fixed: isFixed, fixedOffset: (_b = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _b !== void 0 ? _b : 0, indeterminate: isIndeterminate, onChange: () => selection.toggleRow(rowKey, record), selected: isSelected, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+    };
+    const renderExpandCell = () => {
+        var _a;
+        if (!expansion)
+            return null;
+        const { config } = expansion;
+        const canExpand = config.rowExpandable
+            ? config.rowExpandable(record)
+            : true;
+        const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getExpansionOffset();
+        const isFixed = !!config.fixed;
+        const showShadow = isFixed &&
+            (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(EXPANSION_KEY, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+        return (jsx(TableExpandCell, { canExpand: canExpand, expanded: isExpanded, fixed: isFixed, fixedOffset: (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0, onClick: () => expansion.toggleExpand(rowKey, record), showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
+    };
+    const renderCells = () => {
+        return columns.map((column, columnIndex) => {
+            var _a;
+            const fixedPos = parseFixed(column.fixed);
+            const offsetInfo = fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.getColumnOffset(column.key);
+            const offset = (_a = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _a !== void 0 ? _a : 0;
+            // Show shadow based on scroll position and sticky state
+            const showShadow = !!fixedPos &&
+                (fixedOffsets === null || fixedOffsets === void 0 ? void 0 : fixedOffsets.shouldShowShadow(column.key, scrollLeft !== null && scrollLeft !== void 0 ? scrollLeft : 0, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0));
+            return (jsx(TableCell, { column: column, columnIndex: columnIndex, fixed: fixedPos !== null && fixedPos !== void 0 ? fixedPos : undefined, fixedOffset: offset, record: record, rowIndex: rowIndex, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }, column.key));
+        });
+    };
+    // Combine refs if draggable is provided
+    const rowRef = draggableProvided
+        ? composeRefs([ref, draggableProvided.innerRef])
+        : ref;
+    return (jsxs("tr", { "aria-rowindex": rowIndex + 1, "aria-selected": isSelected, className: cx(tableClasses.row, {
+            [tableClasses.bodyRowAdding]: isAdding,
+            [tableClasses.bodyRowDeleting]: isDeleting,
+            [tableClasses.bodyRowFadingOut]: isFadingOut,
+            [tableClasses.bodyRowHighlight]: isRowHighlighted,
+            [tableClasses.rowExpanded]: isExpanded,
+            [tableClasses.rowSelected]: isSelected,
+        }, className), "data-index": rowIndex, "data-row-key": rowKey, onClick: handleRowClick, onKeyDown: handleKeyDown, onMouseLeave: handleMouseLeave, ref: rowRef, tabIndex: 0, ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps, style: resolvedStyle, children: [renderDragHandleCell(), renderExpandCell(), renderSelectionCell(), renderCells()] }));
+});
+const TableRow = memo(TableRowInner);
+
+export { TableRow };

package/Table/components/TableSelectionCell.d.ts

@@ -0,0 +1,13 @@
+export interface TableSelectionCellProps {
+    className?: string;
+    disabled?: boolean;
+    fixed?: boolean;
+    fixedOffset?: number;
+    hidden?: boolean;
+    indeterminate?: boolean;
+    isHeader?: boolean;
+    onChange: () => void;
+    selected: boolean;
+    showShadow?: boolean;
+}
+export declare const TableSelectionCell: import("react").NamedExoticComponent<TableSelectionCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableSelectionCell.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import Checkbox from '../../Checkbox/Checkbox.js';
+import { useTableContext } from '../TableContext.js';
+import Skeleton from '../../Skeleton/Skeleton.js';
+import cx from 'clsx';
+
+const TableSelectionCellInner = forwardRef(function TableSelectionCell(props, ref) {
+    const { loading } = useTableContext();
+    const { className, disabled = false, fixed = false, fixedOffset = 0, hidden = false, indeterminate = false, isHeader = false, onChange, selected, showShadow = false, } = props;
+    const CellComponent = isHeader ? 'th' : 'td';
+    const cellStyle = {};
+    if (fixed) {
+        cellStyle['--fixed-start-offset'] =
+            `${fixedOffset}px`;
+    }
+    const renderChild = () => {
+        if (hidden)
+            return null;
+        if (loading) {
+            return jsx(Skeleton, { width: "100%", variant: "body-highlight" });
+        }
+        return (jsx(Checkbox, { checked: selected, disabled: disabled, indeterminate: indeterminate, onChange: onChange }));
+    };
+    return (jsx(CellComponent, { className: cx(isHeader ? tableClasses.headerCell : tableClasses.cell, tableClasses.selectionCell, {
+            [tableClasses.cellFixed]: fixed,
+            [tableClasses.cellFixedStart]: fixed,
+            [tableClasses.cellFixedShadow]: showShadow,
+        }, className), ref: ref, scope: isHeader ? 'col' : undefined, style: cellStyle, children: jsx("div", { className: tableClasses.selectionCheckbox, children: renderChild() }) }));
+});
+const TableSelectionCell = memo(TableSelectionCellInner);
+
+export { TableSelectionCell };

package/Table/components/index.d.ts

@@ -0,0 +1,10 @@
+export { TableBody, type TableBodyProps } from './TableBody';
+export { TableCell, type TableCellProps } from './TableCell';
+export { TableColGroup, type TableColGroupProps } from './TableColGroup';
+export { TableExpandCell, type TableExpandCellProps } from './TableExpandCell';
+export { TableExpandedRow, type TableExpandedRowProps, } from './TableExpandedRow';
+export { TableHeader, type TableHeaderProps } from './TableHeader';
+export { TablePagination, type TablePaginationProps } from './TablePagination';
+export { TableResizeHandle, type TableResizeHandleProps, } from './TableResizeHandle';
+export { TableRow, type TableRowProps } from './TableRow';
+export { TableSelectionCell, type TableSelectionCellProps, } from './TableSelectionCell';

package/Table/components/index.js

@@ -0,0 +1,10 @@
+export { TableBody } from './TableBody.js';
+export { TableCell } from './TableCell.js';
+export { TableColGroup } from './TableColGroup.js';
+export { TableExpandCell } from './TableExpandCell.js';
+export { TableExpandedRow } from './TableExpandedRow.js';
+export { TableHeader } from './TableHeader.js';
+export { TablePagination } from './TablePagination.js';
+export { TableResizeHandle } from './TableResizeHandle.js';
+export { TableRow } from './TableRow.js';
+export { TableSelectionCell } from './TableSelectionCell.js';

package/Table/hooks/index.d.ts

@@ -0,0 +1,9 @@
+export { useTableSorting, type UseTableSortingOptions, } from './useTableSorting';
+export { useTableSelection, type UseTableSelectionOptions, } from './useTableSelection';
+export { useTableColumns, type UseTableColumnsOptions, } from './useTableColumns';
+export { useTableExpansion, type UseTableExpansionOptions, } from './useTableExpansion';
+export { useTableFixedOffsets, type FixedOffsetInfo, type UseTableFixedOffsetsOptions, type UseTableFixedOffsetsReturn, } from './useTableFixedOffsets';
+export { useTableScroll, type UseTableScrollReturn } from './useTableScroll';
+export { useTableVirtualization, type UseTableVirtualizationOptions, type UseTableVirtualizationReturn, } from './useTableVirtualization';
+export { useTableDataSource, type TableTransitionState, type UpdateDataSourceOptions, type UseTableDataSourceOptions, type UseTableDataSourceReturn, } from './useTableDataSource';
+export * from './typings';

package/Table/hooks/index.js

@@ -0,0 +1,8 @@
+export { useTableSorting } from './useTableSorting.js';
+export { useTableSelection } from './useTableSelection.js';
+export { useTableColumns } from './useTableColumns.js';
+export { useTableExpansion } from './useTableExpansion.js';
+export { useTableFixedOffsets } from './useTableFixedOffsets.js';
+export { useTableScroll } from './useTableScroll.js';
+export { useTableVirtualization } from './useTableVirtualization.js';
+export { useTableDataSource } from './useTableDataSource.js';