@mezzanine-ui/react 1.0.0-beta.1 → 1.0.0-beta.3

package/Table/TableContext.d.ts

@@ -1,7 +1,8 @@
-import type { HighlightMode, TableSize, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll } from '@mezzanine-ui/core/table';
+import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll, TableSelectionMode } from '@mezzanine-ui/core/table';
 import type { EmptyProps } from '../Empty';
 import type { PaginationProps } from '../Pagination';
 import type { UseTableFixedOffsetsReturn } from './hooks/useTableFixedOffsets';
+import type { TableTransitionState } from './hooks/useTableDataSource';
 /** Sorting context state */
 export interface TableSortingState {
     onSort: (key: string) => void;
@@ -12,88 +13,63 @@ export interface TableSelectionState<T extends TableDataSource = TableDataSource
     isAllSelected: boolean;
     isIndeterminate: boolean;
     isRowDisabled: (record: T) => boolean;
-    isRowSelected: (key: string | number) => boolean;
-    selectedRowKeys: (string | number)[];
+    isRowSelected: (key: string) => boolean;
+    mode: TableSelectionMode;
+    selectedRowKeys: string[];
     toggleAll: () => void;
-    toggleRow: (key: string | number, record: T) => void;
+    toggleRow: (key: string, 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;
+    expandedRowKeys: string[];
+    isRowExpanded: (key: string) => boolean;
+    toggleExpand: (key: string, record: T) => void;
 }
 /** Column state with computed widths */
-export interface TableColumnState {
-    resizedColumnWidths: Map<string, number>;
-    columns: TableColumn[];
-    fixedEndColumns: TableColumn[];
-    fixedStartColumns: TableColumn[];
+export interface TableResizedColumnState {
     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 */
+    actions?: TableActionsBase<T>;
+    columnState?: TableResizedColumnState;
     dataSource: T[];
     draggable?: TableDraggableState;
-    emptyProps?: EmptyProps;
+    emptyProps?: EmptyProps & {
+        height?: number | string;
+    };
     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;
     pagination?: PaginationProps;
     size?: TableSize;
     scroll?: TableScroll;
-    /** Ref to the scroll container div for virtualization */
     scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
     selection?: TableSelectionState<T>;
+    separatorAtRowIndexes?: number[];
     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 */
+    zebraStriping?: boolean;
     isInsideExpandedContentArea?: boolean;
 }
 export declare const TableContext: import("react").Context<TableContextValue<TableDataSource> | null>;
@@ -107,10 +83,10 @@ export declare const TableDataContext: import("react").Context<TableDataContextV
 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;
+    hasDragHandleFixed?: boolean;
 }
 export declare const TableSuperContext: import("react").Context<TableSuperContextValue | null>;
 export declare function useTableSuperContext(): TableSuperContextValue;

package/Table/components/TableActionsCell.d.ts

@@ -0,0 +1,26 @@
+import { type TableActionsBase, type TableDataSource } from '@mezzanine-ui/core/table';
+export interface TableActionsCellProps<T extends TableDataSource = TableDataSource> {
+    /** Actions configuration */
+    actions: TableActionsBase<T>;
+    /** Custom class name */
+    className?: string;
+    /** Column index for highlight calculation */
+    columnIndex: number;
+    /** Fixed position */
+    fixed?: 'end' | 'start';
+    /** Fixed offset */
+    fixedOffset?: number;
+    /** Row record */
+    record: T;
+    /** Row index */
+    rowIndex: number;
+    /** Whether to show shadow */
+    showShadow?: boolean;
+    /** Cell style */
+    style?: React.CSSProperties;
+    /** Explicit width for dragging state */
+    width?: number;
+}
+declare const TableActionsCellInner: import("react").ForwardRefExoticComponent<TableActionsCellProps<TableDataSource> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const TableActionsCell: typeof TableActionsCellInner;
+export {};

package/Table/components/TableActionsCell.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useMemo } from 'react';
+import { getCellAlignClass, tableClasses } from '@mezzanine-ui/core/table';
+import { useTableContext } from '../TableContext.js';
+import Button from '../../Button/Button.js';
+import ButtonGroup from '../../Button/ButtonGroup.js';
+import cx from 'clsx';
+
+const TableActionsCellInner = forwardRef(function TableActionsCell(props, ref) {
+    var _a;
+    const { actions, className, columnIndex, fixed, fixedOffset = 0, record, rowIndex, showShadow = false, style, width, } = props;
+    const { highlight, loading } = useTableContext();
+    const actionItems = useMemo(() => actions.render(record, rowIndex), [actions, record, rowIndex]);
+    const cellStyle = useMemo(() => {
+        const baseStyle = { ...style };
+        if (width !== undefined) {
+            baseStyle.width = width;
+            baseStyle.minWidth = width;
+            baseStyle.maxWidth = width;
+            baseStyle.flexShrink = 0;
+        }
+        if (fixed === 'start') {
+            baseStyle['--fixed-start-offset'] =
+                `${fixedOffset}px`;
+        }
+        else if (fixed === 'end') {
+            baseStyle['--fixed-end-offset'] =
+                `${fixedOffset}px`;
+        }
+        return baseStyle;
+    }, [style, fixed, fixedOffset, width]);
+    const alignClass = getCellAlignClass((_a = actions.align) !== null && _a !== void 0 ? _a : 'end');
+    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 = () => {
+        highlight === null || highlight === void 0 ? void 0 : highlight.setHoveredCell(rowIndex, columnIndex);
+    };
+    if (loading) {
+        return (jsx("td", { className: cx(tableClasses.cell, {
+                [tableClasses.cellFixed]: !!fixed,
+                [tableClasses.cellFixedEnd]: fixed === 'end',
+                [tableClasses.cellFixedShadow]: showShadow,
+                [tableClasses.cellFixedStart]: fixed === 'start',
+                [tableClasses.cellHighlight]: isCellHighlighted,
+            }, className), onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle }));
+    }
+    return (jsx("td", { className: cx(tableClasses.cell, {
+            [tableClasses.cellFixed]: !!fixed,
+            [tableClasses.cellFixedEnd]: fixed === 'end',
+            [tableClasses.cellFixedShadow]: showShadow,
+            [tableClasses.cellFixedStart]: fixed === 'start',
+            [tableClasses.cellHighlight]: isCellHighlighted,
+        }, className), onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle, children: jsx("div", { className: cx(tableClasses.cellContent, alignClass), children: jsx(ButtonGroup, { size: "sub", variant: actions.variant, children: actionItems.map((item) => {
+                    var _a, _b, _c;
+                    const isDisabled = (_b = (_a = item.disabled) === null || _a === void 0 ? void 0 : _a.call(item, record)) !== null && _b !== void 0 ? _b : false;
+                    return (jsx(Button, { disabled: isDisabled, icon: item.icon, onClick: () => item.onClick(record, rowIndex), type: "button", variant: item.variant, children: item.name }, `${item.name || 'name'}-${((_c = item.icon) === null || _c === void 0 ? void 0 : _c.name) || 'icon'}-${rowIndex}`));
+                }) }) }) }));
+});
+const TableActionsCell = memo(TableActionsCellInner);
+
+export { TableActionsCell };

package/Table/components/TableBody.d.ts

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

package/Table/components/TableBody.js

@@ -3,28 +3,28 @@ 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 { useTableContext, useTableDataContext } 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 TableBodyInner = forwardRef(function TableBody(_, ref) {
+    const { dataSource, draggable, emptyProps, expansion, loading, scrollContainerRef, selection, size, virtualScrollEnabled, } = useTableContext();
+    const { columns } = useTableDataContext();
+    /** Feature: Empty State */
+    const isEmpty = useMemo(() => !dataSource.length, [dataSource.length]);
+    /** Feature: Virtualized Scroll */
     const virtualization = useTableVirtualization({
         dataSource,
-        enabled: virtualScrollEnabled !== null && virtualScrollEnabled !== void 0 ? virtualScrollEnabled : false,
+        enabled: virtualScrollEnabled,
         isRowExpanded: expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded,
         scrollContainerRef: scrollContainerRef,
     });
-    const isEmpty = dataSource.length === 0;
-    // Calculate total column span for empty row
+    /** Calculate total columns */
     const totalColSpan = useMemo(() => {
         let colSpan = columns.length;
         if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
@@ -35,7 +35,7 @@ const TableBodyInner = forwardRef(function TableBody(props, ref) {
             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
+    /** Feature: Expanded Row render */
     const renderExpandedContent = (record, isExpanded) => {
         if (!expansion)
             return null;
@@ -47,18 +47,17 @@ const TableBodyInner = forwardRef(function TableBody(props, ref) {
                 exit: MOTION_EASING.exit,
             }, in: isExpanded, children: jsx(TableExpandedRow, { record: record }) }));
     };
-    // Helper to render row and its expanded content
+    /** Main Render */
     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)] }));
+        return (jsxs(Fragment, { children: [jsx(TableRow, { className: (options === null || options === void 0 ? void 0 : options.isDragging) ? tableClasses.bodyRowDragging : undefined, "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 }) }) }));
+            const { size: emptySize = size, height, ...restEmptyProp } = emptyProps || {};
+            return (jsx("tr", { className: tableClasses.emptyRow, children: jsx("td", { className: tableClasses.empty, colSpan: totalColSpan, style: height ? { height } : undefined, children: jsx(Empty, { size: emptySize, ...restEmptyProp }) }) }));
         }
         // Determine items to render (virtualized or all)
         const itemsToRender = virtualization
@@ -78,9 +77,7 @@ const TableBodyInner = forwardRef(function TableBody(props, ref) {
             // 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,
+                            isDragging: snapshot.isDragging,
                             draggableProvided: provided,
                         }) })) }, rowKey));
             }
@@ -95,7 +92,7 @@ const TableBodyInner = forwardRef(function TableBody(props, ref) {
         }
         return rowElements;
     };
-    return (jsx("tbody", { className: cx(tableClasses.body, className), ref: droppableRef ? composeRefs([ref, droppableRef]) : ref, children: renderRows() }));
+    return (jsx("tbody", { className: cx(tableClasses.body), ref: ref, children: renderRows() }));
 });
 const TableBody = memo(TableBodyInner);
 

package/Table/components/TableBulkActions.d.ts

@@ -0,0 +1,15 @@
+import { TableRowSelectionCheckbox, type TableBulkActions as TableBulkActionsConfig } from '@mezzanine-ui/core/table';
+export interface TableBulkActionsProps {
+    /** Bulk actions configuration */
+    bulkActions: TableBulkActionsConfig;
+    /** Custom class name */
+    className?: string;
+    /** Whether to use fixed positioning */
+    isFixed?: boolean;
+    /** Callback to clear all selections */
+    onClearSelection: VoidFunction;
+    /** Array of selected row keys */
+    selectedRowKeys: TableRowSelectionCheckbox['selectedRowKeys'];
+}
+declare function TableBulkActions(props: TableBulkActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export default TableBulkActions;

package/Table/components/TableBulkActions.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { getRowKey, tableClasses } from '@mezzanine-ui/core/table';
+import { CloseIcon } from '@mezzanine-ui/icons';
+import Button from '../../Button/Button.js';
+import { useTableDataContext } from '../TableContext.js';
+import Dropdown from '../../Dropdown/Dropdown.js';
+import cx from 'clsx';
+
+function TableBulkActions(props) {
+    var _a;
+    const { bulkActions, className, isFixed, onClearSelection, selectedRowKeys } = props;
+    const { dataSource } = useTableDataContext();
+    const { destructiveAction, mainActions, overflowAction, renderSelectionSummary, } = bulkActions;
+    if (!selectedRowKeys.length) {
+        return null;
+    }
+    const selectedRows = dataSource.filter((data) => selectedRowKeys.includes(getRowKey(data)));
+    const label = renderSelectionSummary
+        ? renderSelectionSummary(selectedRowKeys.length, selectedRowKeys, selectedRows)
+        : `${selectedRowKeys.length} item${selectedRowKeys.length > 1 ? 's' : ''} selected`;
+    return (jsxs("div", { className: cx(tableClasses.bulkActions, className, {
+            [tableClasses.bulkActionsFixed]: isFixed,
+        }), children: [jsx("div", { className: tableClasses.bulkActionsSelectionSummary, children: jsx(Button, { iconType: "trailing", icon: CloseIcon, onClick: onClearSelection, size: "sub", type: "button", variant: "inverse", children: label }) }), jsxs("div", { className: tableClasses.bulkActionsActionArea, children: [mainActions.map((action, index) => (jsx(Button, { iconType: "leading", icon: action.icon, onClick: () => action.onClick(selectedRowKeys, selectedRows), size: "sub", type: "button", variant: "inverse-ghost", children: action.label }, `main-action-${index}`))), destructiveAction && (jsxs(Fragment, { children: [jsx("div", { className: tableClasses.bulkActionsSeparator }), jsx(Button, { iconType: "leading", icon: destructiveAction.icon, onClick: () => destructiveAction.onClick(selectedRowKeys, selectedRows), size: "sub", type: "button", variant: "destructive-ghost", children: destructiveAction.label })] })), overflowAction && (jsxs(Fragment, { children: [jsx("div", { className: tableClasses.bulkActionsSeparator }), jsx(Dropdown, { maxHeight: overflowAction.maxHeight, onSelect: (option) => overflowAction.onSelect(option, selectedRowKeys, selectedRows), options: overflowAction.options, placement: (_a = overflowAction.placement) !== null && _a !== void 0 ? _a : 'top', children: jsx(Button, { size: "sub", type: "button", variant: "inverse-ghost", iconType: "leading", icon: overflowAction.icon, children: overflowAction.label }) })] }))] })] }));
+}
+
+export { TableBulkActions as default };

package/Table/components/TableCell.d.ts

@@ -11,6 +11,8 @@ export interface TableCellProps<T extends TableDataSource = TableDataSource> {
     /** Whether to show shadow on this cell (only for edge fixed columns) */
     showShadow?: boolean;
     style?: React.CSSProperties;
+    /** Explicit width for dragging state (when position: fixed breaks colgroup) */
+    width?: number;
 }
 declare const TableCellInner: import("react").ForwardRefExoticComponent<TableCellProps<TableDataSource> & import("react").RefAttributes<HTMLTableCellElement>>;
 export declare const TableCell: typeof TableCellInner;

package/Table/components/TableCell.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { memo, forwardRef, useMemo, useCallback } from 'react';
+import { memo, forwardRef, useMemo, useCallback, useRef } from 'react';
 import { getCellAlignClass, tableClasses } from '@mezzanine-ui/core/table';
 import { useTableContext } from '../TableContext.js';
 import Skeleton from '../../Skeleton/Skeleton.js';
+import Tooltip from '../../Tooltip/Tooltip.js';
 import cx from 'clsx';
 
 const TableCellInner = forwardRef(function TableCell(props, ref) {
+    var _a;
     const { loading } = useTableContext();
-    const { className, colSpan = 1, column, columnIndex, fixed, fixedOffset = 0, record, rowIndex, showShadow = false, style, } = props;
+    const { className, colSpan = 1, column, columnIndex, fixed, fixedOffset = 0, record, rowIndex, showShadow = false, style, width, } = props;
     const { highlight } = useTableContext();
     const cellValue = useMemo(() => {
         var _a;
@@ -19,12 +21,15 @@ const TableCellInner = forwardRef(function TableCell(props, ref) {
         return record[dataIndex];
     }, [column, record, rowIndex]);
     // Width is managed by colgroup, set fixed position offset via CSS variable
+    // When width is provided (dragging state), apply it directly
     const cellStyle = useMemo(() => {
         const baseStyle = { ...style };
-        if (column.ellipsis) {
-            baseStyle.overflow = 'hidden';
-            baseStyle.textOverflow = 'ellipsis';
-            baseStyle.whiteSpace = 'nowrap';
+        // Apply explicit width for dragging state
+        if (width !== undefined) {
+            baseStyle.width = width;
+            baseStyle.minWidth = width;
+            baseStyle.maxWidth = width;
+            baseStyle.flexShrink = 0;
         }
         // Set CSS variable for fixed column positioning
         if (fixed === 'start') {
@@ -36,7 +41,7 @@ const TableCellInner = forwardRef(function TableCell(props, ref) {
                 `${fixedOffset}px`;
         }
         return baseStyle;
-    }, [style, column.ellipsis, fixed, fixedOffset]);
+    }, [style, fixed, fixedOffset, width]);
     const alignClass = getCellAlignClass(column.align);
     // Check if this cell should be highlighted based on highlight mode
     const isCellHighlighted = useMemo(() => {
@@ -60,14 +65,41 @@ const TableCellInner = forwardRef(function TableCell(props, ref) {
     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,
+    /** Feature: Ellipsis */
+    const ellipsisRef = useRef(null);
+    // default to true if undefined
+    const isColumnEllipsis = (_a = column.ellipsis) !== null && _a !== void 0 ? _a : true;
+    const renderChild = () => {
+        if (loading) {
+            return jsx(Skeleton, { width: "100%", variant: "body-highlight" });
+        }
+        if (isColumnEllipsis) {
+            return (jsx(Tooltip, { anchor: ellipsisRef, title: cellValue, options: {
+                    placement: 'top-start',
+                }, children: ({ onMouseEnter, onMouseLeave }) => (
+                /** @Note "display: grid" for feature ellipsis to work properly */
+                jsx("div", { style: { display: 'grid', width: '100%' }, children: jsx("div", { ref: ellipsisRef, className: cx(tableClasses.cellContent, alignClass, {
+                            [tableClasses.cellEllipsis]: isColumnEllipsis,
+                        }), onMouseEnter: (e) => {
+                            if (ellipsisRef.current) {
+                                const { current: el } = ellipsisRef;
+                                const isOverflow = el.scrollWidth > el.offsetWidth;
+                                if (isOverflow)
+                                    onMouseEnter(e);
+                            }
+                        }, onMouseLeave: onMouseLeave, children: cellValue }) })) }));
+        }
+        return (
+        /** @Note "display: grid" for feature ellipsis to work properly */
+        jsx("div", { style: { display: 'grid', width: '100%' }, children: jsx("div", { className: cx(tableClasses.cellContent, alignClass), children: cellValue }) }));
+    };
+    return (jsx("td", { className: cx(tableClasses.cell, {
             [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 })) }));
+        }, className), colSpan: colSpan > 1 ? colSpan : undefined, onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle, children: renderChild() }));
 });
 const TableCell = memo(TableCellInner);
 

package/Table/components/TableColGroup.js

@@ -2,117 +2,13 @@
 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';
+import { useTableContext, useTableDataContext, useTableSuperContext } from '../TableContext.js';
+import { calculateColumnWidths, shouldCalculateWidths } from '../utils/calculateColumnWidths.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 { columnState, draggable, expansion, isInsideExpandedContentArea, selection, } = useTableContext();
+    const { columns } = useTableDataContext();
     const { containerWidth, getResizedColumnWidth: getParentResizedColumnWidth } = useTableSuperContext();
     // For nested tables, use parent's resized widths; for root tables, use own
     const getResizedColumnWidth = isInsideExpandedContentArea
@@ -136,7 +32,12 @@ const TableColGroupInner = memo(function TableColGroup(props) {
         if (!enableWidthCalculation) {
             return new Map();
         }
-        return calculateColumnWidths(columns, containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0, actionColumnsWidth, getResizedColumnWidth);
+        return calculateColumnWidths({
+            actionColumnsWidth,
+            columns,
+            containerWidth: containerWidth !== null && containerWidth !== void 0 ? containerWidth : 0,
+            getResizedColumnWidth,
+        });
     }, [
         enableWidthCalculation,
         columns,
@@ -146,7 +47,6 @@ const TableColGroupInner = memo(function TableColGroup(props) {
     ]);
     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,
@@ -154,7 +54,6 @@ const TableColGroupInner = memo(function TableColGroup(props) {
                     width: DRAG_HANDLE_COLUMN_WIDTH,
                 } }, DRAG_HANDLE_KEY));
         }
-        // Expand column
         if (expansion) {
             cols.push(jsx("col", { className: tableClasses.expandCell, style: {
                     maxWidth: EXPANSION_COLUMN_WIDTH,
@@ -162,7 +61,6 @@ const TableColGroupInner = memo(function TableColGroup(props) {
                     width: EXPANSION_COLUMN_WIDTH,
                 } }, EXPANSION_KEY));
         }
-        // Selection column
         if (selection) {
             cols.push(jsx("col", { className: tableClasses.selectionColumn, style: {
                     maxWidth: SELECTION_COLUMN_WIDTH,

package/Table/components/TableColumnTitleMenu.d.ts

@@ -0,0 +1,6 @@
+import { TableColumn } from '@mezzanine-ui/core/table';
+interface TableColumnTitleMenuProps {
+    column: TableColumn;
+}
+declare function TableColumnTitleMenu(props: TableColumnTitleMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export default TableColumnTitleMenu;