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

package/Table/components/TableBody.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { memo, forwardRef, useMemo, Fragment as Fragment$1 } from 'react';
+import { tableClasses, getRowKey } from '@mezzanine-ui/core/table';
+import { Draggable } from '@hello-pangea/dnd';
+import { useTableContext } from '../TableContext.js';
+import { TableRow } from './TableRow.js';
+import { TableExpandedRow } from './TableExpandedRow.js';
+import { useTableVirtualization } from '../hooks/useTableVirtualization.js';
+import { composeRefs } from '../../utils/composeRefs.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Empty from '../../Empty/Empty.js';
+import Fade from '../../Transition/Fade.js';
+import cx from 'clsx';
+
+const TableBodyInner = forwardRef(function TableBody(props, ref) {
+    const { className, droppableRef } = props;
+    const { columns, dataSource, draggable, emptyProps, expansion, loading, scrollContainerRef, selection, size, virtualScrollEnabled, } = useTableContext();
+    // Use virtualization with the scroll container ref from parent
+    const virtualization = useTableVirtualization({
+        dataSource,
+        enabled: virtualScrollEnabled !== null && virtualScrollEnabled !== void 0 ? virtualScrollEnabled : false,
+        isRowExpanded: expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded,
+        scrollContainerRef: scrollContainerRef,
+    });
+    const isEmpty = dataSource.length === 0;
+    // Calculate total column span for empty row
+    const totalColSpan = useMemo(() => {
+        let colSpan = columns.length;
+        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+            colSpan += 1;
+        if (selection)
+            colSpan += 1;
+        if (expansion)
+            colSpan += 1;
+        return colSpan;
+    }, [columns.length, draggable === null || draggable === void 0 ? void 0 : draggable.enabled, expansion, selection]);
+    // Helper to render expanded content with optional animation
+    const renderExpandedContent = (record, isExpanded) => {
+        if (!expansion)
+            return null;
+        return (jsx(Fade, { duration: {
+                enter: MOTION_DURATION.moderate,
+                exit: MOTION_DURATION.moderate,
+            }, easing: {
+                enter: MOTION_EASING.entrance,
+                exit: MOTION_EASING.exit,
+            }, in: isExpanded, children: jsx(TableExpandedRow, { record: record }) }));
+    };
+    // Helper to render row and its expanded content
+    const renderRowContent = (record, index, options) => {
+        var _a;
+        const rowKey = getRowKey(record);
+        const isExpanded = (_a = expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded(rowKey)) !== null && _a !== void 0 ? _a : false;
+        return (jsxs(Fragment, { children: [jsx(TableRow, { className: options === null || options === void 0 ? void 0 : options.className, "data-index": virtualization ? index : undefined, draggableProvided: options === null || options === void 0 ? void 0 : options.draggableProvided, record: record, ref: options === null || options === void 0 ? void 0 : options.measureRef, rowIndex: index }), renderExpandedContent(record, isExpanded)] }));
+    };
+    const renderRows = () => {
+        // Empty state
+        if (isEmpty && !loading) {
+            const { size: emptySize = size, ...restEmptyProp } = emptyProps || {};
+            return (jsx("tr", { className: tableClasses.emptyRow, children: jsx("td", { className: tableClasses.empty, colSpan: totalColSpan, children: jsx(Empty, { size: emptySize, ...restEmptyProp }) }) }));
+        }
+        // Determine items to render (virtualized or all)
+        const itemsToRender = virtualization
+            ? virtualization.virtualItems.map((vi) => ({
+                index: vi.index,
+                measureRef: virtualization.measureElement,
+                record: dataSource[vi.index],
+            }))
+            : dataSource.map((record, index) => ({
+                index,
+                measureRef: undefined,
+                record,
+            }));
+        // Render each row, optionally wrapped with Draggable
+        const rowElements = itemsToRender.map((item) => {
+            const rowKey = getRowKey(item.record);
+            // Draggable mode
+            if ((draggable === null || draggable === void 0 ? void 0 : draggable.enabled) && !virtualization) {
+                return (jsx(Draggable, { draggableId: String(rowKey), index: item.index, isDragDisabled: !draggable.enabled, children: (provided, snapshot) => (jsx(Fragment, { children: renderRowContent(item.record, item.index, {
+                            className: snapshot.isDragging
+                                ? tableClasses.bodyRowDragging
+                                : undefined,
+                            draggableProvided: provided,
+                        }) })) }, rowKey));
+            }
+            // Normal or virtualized row
+            return (jsx(Fragment$1, { children: renderRowContent(item.record, item.index, {
+                    measureRef: item.measureRef,
+                }) }, rowKey));
+        });
+        // Virtualization needs padding rows for scroll height
+        if (virtualization) {
+            return (jsxs(Fragment, { children: [virtualization.paddingTop > 0 && (jsx("tr", { "aria-hidden": "true", children: jsx("td", { colSpan: totalColSpan, style: { height: virtualization.paddingTop, padding: 0 } }) })), rowElements, virtualization.paddingBottom > 0 && (jsx("tr", { "aria-hidden": "true", children: jsx("td", { colSpan: totalColSpan, style: { height: virtualization.paddingBottom, padding: 0 } }) }))] }));
+        }
+        return rowElements;
+    };
+    return (jsx("tbody", { className: cx(tableClasses.body, className), ref: droppableRef ? composeRefs([ref, droppableRef]) : ref, children: renderRows() }));
+});
+const TableBody = memo(TableBodyInner);
+
+export { TableBody };

package/Table/components/TableCell.d.ts

@@ -0,0 +1,17 @@
+import { type TableColumn, type TableDataSource } from '@mezzanine-ui/core/table';
+export interface TableCellProps<T extends TableDataSource = TableDataSource> {
+    className?: string;
+    colSpan?: number;
+    column: TableColumn<T>;
+    columnIndex: number;
+    fixed?: 'end' | 'start';
+    fixedOffset?: number;
+    record: T;
+    rowIndex: number;
+    /** Whether to show shadow on this cell (only for edge fixed columns) */
+    showShadow?: boolean;
+    style?: React.CSSProperties;
+}
+declare const TableCellInner: import("react").ForwardRefExoticComponent<TableCellProps<TableDataSource> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: typeof TableCellInner;
+export {};

package/Table/components/TableCell.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useMemo, useCallback } from 'react';
+import { getCellAlignClass, tableClasses } from '@mezzanine-ui/core/table';
+import { useTableContext } from '../TableContext.js';
+import Skeleton from '../../Skeleton/Skeleton.js';
+import cx from 'clsx';
+
+const TableCellInner = forwardRef(function TableCell(props, ref) {
+    const { loading } = useTableContext();
+    const { className, colSpan = 1, column, columnIndex, fixed, fixedOffset = 0, record, rowIndex, showShadow = false, style, } = props;
+    const { highlight } = useTableContext();
+    const cellValue = useMemo(() => {
+        var _a;
+        const dataIndex = (_a = column.dataIndex) !== null && _a !== void 0 ? _a : column.key;
+        if (column.render) {
+            return column.render(record, rowIndex);
+        }
+        return record[dataIndex];
+    }, [column, record, rowIndex]);
+    // Width is managed by colgroup, set fixed position offset via CSS variable
+    const cellStyle = useMemo(() => {
+        const baseStyle = { ...style };
+        if (column.ellipsis) {
+            baseStyle.overflow = 'hidden';
+            baseStyle.textOverflow = 'ellipsis';
+            baseStyle.whiteSpace = 'nowrap';
+        }
+        // Set CSS variable for fixed column positioning
+        if (fixed === 'start') {
+            baseStyle['--fixed-start-offset'] =
+                `${fixedOffset}px`;
+        }
+        else if (fixed === 'end') {
+            baseStyle['--fixed-end-offset'] =
+                `${fixedOffset}px`;
+        }
+        return baseStyle;
+    }, [style, column.ellipsis, fixed, fixedOffset]);
+    const alignClass = getCellAlignClass(column.align);
+    // Check if this cell should be highlighted based on highlight mode
+    const isCellHighlighted = useMemo(() => {
+        if (!highlight)
+            return false;
+        const { columnIndex: hoveredColumn, mode, rowIndex: hoveredRow, } = highlight;
+        if (hoveredRow === null || hoveredColumn === null)
+            return false;
+        switch (mode) {
+            case 'cell':
+                return hoveredRow === rowIndex && hoveredColumn === columnIndex;
+            case 'column':
+                return hoveredColumn === columnIndex;
+            case 'cross':
+                return hoveredColumn === columnIndex;
+            case 'row':
+            default:
+                return false;
+        }
+    }, [highlight, rowIndex, columnIndex]);
+    const handleMouseEnter = useCallback(() => {
+        highlight === null || highlight === void 0 ? void 0 : highlight.setHoveredCell(rowIndex, columnIndex);
+    }, [highlight, rowIndex, columnIndex]);
+    return (jsx("td", { className: cx(tableClasses.cell, alignClass, {
+            [tableClasses.cellEllipsis]: column.ellipsis,
+            [tableClasses.cellFixed]: !!fixed,
+            [tableClasses.cellFixedEnd]: fixed === 'end',
+            [tableClasses.cellFixedShadow]: showShadow,
+            [tableClasses.cellFixedStart]: fixed === 'start',
+            [tableClasses.cellHighlight]: isCellHighlighted,
+        }, column.className, className), colSpan: colSpan > 1 ? colSpan : undefined, onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle, children: loading ? (jsx(Skeleton, { width: "100%", variant: "body-highlight" })) : (jsx("span", { className: tableClasses.cellContent, children: cellValue })) }));
+});
+const TableCell = memo(TableCellInner);
+
+export { TableCell };

package/Table/components/TableColGroup.d.ts

@@ -0,0 +1,4 @@
+export interface TableColGroupProps {
+    className?: string;
+}
+export declare const TableColGroup: import("react").NamedExoticComponent<TableColGroupProps>;

package/Table/components/TableColGroup.js

@@ -0,0 +1,206 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import { DRAG_HANDLE_COLUMN_WIDTH, SELECTION_COLUMN_WIDTH, EXPANSION_COLUMN_WIDTH, tableClasses, DRAG_HANDLE_KEY, EXPANSION_KEY, SELECTION_KEY } from '@mezzanine-ui/core/table';
+import { useTableContext, useTableSuperContext } from '../TableContext.js';
+
+/**
+ * Check if width calculation should be applied.
+ * Only calculate explicit widths for root tables (not nested).
+ * Nested tables should let columns use natural CSS behavior.
+ */
+function shouldCalculateWidths(isNestedTable, containerWidth) {
+    // Don't calculate widths for nested tables - they inherit parent's context
+    // and should use natural CSS column sizing
+    if (isNestedTable) {
+        return false;
+    }
+    // Don't calculate if container width is not available
+    if (!containerWidth || containerWidth <= 0) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Calculate the resolved width for each column.
+ * - Columns with explicit width use that value
+ * - Columns without width share the remaining space equally (simulating flex: 1)
+ * - All widths are clamped to minWidth/maxWidth if specified
+ */
+function calculateColumnWidths(columns, containerWidth, actionColumnsWidth, getResizedColumnWidth) {
+    const widthMap = new Map();
+    // If container width is not available yet, return empty map
+    if (containerWidth <= 0) {
+        return widthMap;
+    }
+    // Available width for data columns
+    const availableWidth = containerWidth - actionColumnsWidth;
+    if (availableWidth <= 0) {
+        return widthMap;
+    }
+    // First pass: identify columns with explicit width and calculate total fixed width
+    let totalFixedWidth = 0;
+    const flexColumns = [];
+    columns.forEach((column) => {
+        const resizedWidth = getResizedColumnWidth === null || getResizedColumnWidth === void 0 ? void 0 : getResizedColumnWidth(column.key);
+        if (resizedWidth !== undefined) {
+            // Column has been resized, use that width
+            widthMap.set(column.key, resizedWidth);
+            totalFixedWidth += resizedWidth;
+        }
+        else if (column.width !== undefined) {
+            // Column has explicit width
+            const width = clampWidth(column.width, column.minWidth, column.maxWidth);
+            widthMap.set(column.key, width);
+            totalFixedWidth += width;
+        }
+        else {
+            // Column needs flex width calculation
+            flexColumns.push(column);
+        }
+    });
+    // Second pass: distribute remaining width to flex columns
+    if (flexColumns.length > 0) {
+        const remainingWidth = availableWidth - totalFixedWidth;
+        // Calculate flex widths while respecting min/max constraints
+        // This may require multiple iterations if constraints cause redistribution
+        let iterationCount = 0;
+        const maxIterations = flexColumns.length + 1;
+        let unallocatedWidth = remainingWidth;
+        const pendingColumns = [...flexColumns];
+        while (pendingColumns.length > 0 && iterationCount < maxIterations) {
+            iterationCount += 1;
+            const flexWidth = unallocatedWidth / pendingColumns.length;
+            const stillPending = [];
+            pendingColumns.forEach((column) => {
+                const clampedWidth = clampWidth(flexWidth, column.minWidth, column.maxWidth);
+                if (clampedWidth !== flexWidth) {
+                    // Width was clamped, allocate this column and redistribute
+                    widthMap.set(column.key, clampedWidth);
+                    unallocatedWidth -= clampedWidth;
+                }
+                else {
+                    stillPending.push(column);
+                }
+            });
+            // If no columns were allocated in this iteration, allocate all remaining
+            if (stillPending.length === pendingColumns.length) {
+                stillPending.forEach((column) => {
+                    const finalWidth = Math.max(0, unallocatedWidth / stillPending.length);
+                    widthMap.set(column.key, finalWidth);
+                });
+                break;
+            }
+            pendingColumns.length = 0;
+            pendingColumns.push(...stillPending);
+        }
+    }
+    return widthMap;
+}
+/**
+ * Clamp a width value between min and max bounds
+ */
+function clampWidth(width, minWidth, maxWidth) {
+    let result = width;
+    if (minWidth !== undefined && result < minWidth) {
+        result = minWidth;
+    }
+    if (maxWidth !== undefined && result > maxWidth) {
+        result = maxWidth;
+    }
+    return result;
+}
+const TableColGroupInner = memo(function TableColGroup(props) {
+    const { className } = props;
+    const { columnState, columns, draggable, expansion, isInsideExpandedContentArea, selection, } = useTableContext();
+    const { containerWidth, getResizedColumnWidth: getParentResizedColumnWidth } = useTableSuperContext();
+    // For nested tables, use parent's resized widths; for root tables, use own
+    const getResizedColumnWidth = isInsideExpandedContentArea
+        ? getParentResizedColumnWidth
+        : columnState === null || columnState === void 0 ? void 0 : columnState.getResizedColumnWidth;
+    // Check if we should calculate explicit widths
+    const enableWidthCalculation = shouldCalculateWidths(!!isInsideExpandedContentArea, containerWidth);
+    // Calculate action columns total width
+    const actionColumnsWidth = useMemo(() => {
+        let width = 0;
+        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+            width += DRAG_HANDLE_COLUMN_WIDTH;
+        if (selection)
+            width += SELECTION_COLUMN_WIDTH;
+        if (expansion)
+            width += EXPANSION_COLUMN_WIDTH;
+        return width;
+    }, [draggable === null || draggable === void 0 ? void 0 : draggable.enabled, expansion, selection]);
+    // Calculate resolved widths for all columns (only for root tables)
+    const resolvedWidths = useMemo(() => {
+        if (!enableWidthCalculation) {
+            return new Map();
+        }
+        return calculateColumnWidths(columns, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0, actionColumnsWidth, getResizedColumnWidth);
+    }, [
+        enableWidthCalculation,
+        columns,
+        containerWidth,
+        actionColumnsWidth,
+        getResizedColumnWidth,
+    ]);
+    const renderCols = () => {
+        const cols = [];
+        // Drag handle column (must be first)
+        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled) {
+            cols.push(jsx("col", { className: tableClasses.dragHandleCell, style: {
+                    maxWidth: DRAG_HANDLE_COLUMN_WIDTH,
+                    minWidth: DRAG_HANDLE_COLUMN_WIDTH,
+                    width: DRAG_HANDLE_COLUMN_WIDTH,
+                } }, DRAG_HANDLE_KEY));
+        }
+        // Expand column
+        if (expansion) {
+            cols.push(jsx("col", { className: tableClasses.expandCell, style: {
+                    maxWidth: EXPANSION_COLUMN_WIDTH,
+                    minWidth: EXPANSION_COLUMN_WIDTH,
+                    width: EXPANSION_COLUMN_WIDTH,
+                } }, EXPANSION_KEY));
+        }
+        // Selection column
+        if (selection) {
+            cols.push(jsx("col", { className: tableClasses.selectionColumn, style: {
+                    maxWidth: SELECTION_COLUMN_WIDTH,
+                    minWidth: SELECTION_COLUMN_WIDTH,
+                    width: SELECTION_COLUMN_WIDTH,
+                } }, SELECTION_KEY));
+        }
+        // Data columns
+        columns.forEach((column) => {
+            var _a;
+            const style = {};
+            // For root tables with width calculation enabled, use resolved widths
+            // For nested tables, sync with parent's resized widths
+            if (enableWidthCalculation) {
+                const resolvedWidth = resolvedWidths.get(column.key);
+                if (resolvedWidth !== undefined) {
+                    style.width = resolvedWidth;
+                }
+            }
+            else {
+                // Nested table: check if parent has resized this column
+                const parentResizedWidth = (_a = getResizedColumnWidth === null || getResizedColumnWidth === void 0 ? void 0 : getResizedColumnWidth(column.key)) !== null && _a !== void 0 ? _a : column.width;
+                if (parentResizedWidth !== undefined) {
+                    style.width = parentResizedWidth;
+                }
+            }
+            if (column.minWidth !== undefined) {
+                style.minWidth = column.minWidth;
+            }
+            if (column.maxWidth !== undefined) {
+                style.maxWidth = column.maxWidth;
+            }
+            cols.push(jsx("col", { style: style }, column.key));
+        });
+        return cols;
+    };
+    return jsx("colgroup", { className: className, children: renderCols() });
+});
+const TableColGroup = TableColGroupInner;
+
+export { TableColGroup };

package/Table/components/TableDragHandleCell.d.ts

@@ -0,0 +1,9 @@
+export interface TableDragHandleCellProps {
+    className?: string;
+    dragHandleProps?: Record<string, unknown>;
+    fixed?: boolean;
+    fixedOffset?: number;
+    isHeader?: boolean;
+    showShadow?: boolean;
+}
+export declare const TableDragHandleCell: import("react").NamedExoticComponent<TableDragHandleCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableDragHandleCell.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { DotDragVerticalIcon } 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 TableDragHandleCellInner = forwardRef(function TableDragHandleCell(props, ref) {
+    const { loading } = useTableContext();
+    const { className, dragHandleProps, fixed = false, fixedOffset = 0, isHeader = false, showShadow = false, } = props;
+    const CellComponent = isHeader ? 'th' : 'td';
+    const cellStyle = {};
+    if (fixed) {
+        cellStyle['--fixed-start-offset'] =
+            `${fixedOffset}px`;
+    }
+    const renderChild = () => {
+        if (!isHeader) {
+            if (loading) {
+                return jsx(Skeleton, { width: "100%", variant: "body-highlight" });
+            }
+            return (jsx("span", { className: tableClasses.dragHandle, ...dragHandleProps, children: jsx(Icon, { color: "neutral", icon: DotDragVerticalIcon }) }));
+        }
+        return null;
+    };
+    return (jsx(CellComponent, { className: cx(isHeader ? tableClasses.headerCell : tableClasses.cell, tableClasses.dragHandleCell, {
+            [tableClasses.cellFixed]: fixed,
+            [tableClasses.cellFixedStart]: fixed,
+            [tableClasses.cellFixedShadow]: showShadow,
+        }, className), ref: ref, scope: isHeader ? 'col' : undefined, style: cellStyle, children: renderChild() }));
+});
+const TableDragHandleCell = memo(TableDragHandleCellInner);
+
+export { TableDragHandleCell };

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>>;