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

package/Table/components/TableColumnTitleMenu.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { DotVerticalIcon } from '@mezzanine-ui/icons';
+import { useState } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import Dropdown from '../../Dropdown/Dropdown.js';
+import Icon from '../../Icon/Icon.js';
+
+function TableColumnTitleMenu(props) {
+    const { column } = props;
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    if (!column.titleMenu)
+        return null;
+    const { maxHeight, onSelect, options, placement } = column.titleMenu;
+    return (jsx(Dropdown, { open: isMenuOpen, maxHeight: maxHeight, onSelect: (opt) => {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+            setIsMenuOpen(false);
+        }, onVisibilityChange: (open) => setIsMenuOpen(open), options: options, placement: placement, zIndex: "var(--mzn-table-title-menu-z-index)", children: jsx(Icon, { className: tableClasses.headerCellIcon, icon: DotVerticalIcon, size: 16, onClick: () => setIsMenuOpen((prev) => !prev) }) }));
+}
+
+export { TableColumnTitleMenu as default };

package/Table/components/TableDragHandleCell.d.ts

@@ -5,5 +5,7 @@ export interface TableDragHandleCellProps {
     fixedOffset?: number;
     isHeader?: boolean;
     showShadow?: boolean;
+    /** Explicit width for dragging state */
+    width?: number;
 }
 export declare const TableDragHandleCell: import("react").NamedExoticComponent<TableDragHandleCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableDragHandleCell.js

@@ -10,9 +10,16 @@ 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 { className, dragHandleProps, fixed = false, fixedOffset = 0, isHeader = false, showShadow = false, width, } = props;
     const CellComponent = isHeader ? 'th' : 'td';
     const cellStyle = {};
+    // Apply explicit width for dragging state
+    if (width !== undefined) {
+        cellStyle.width = width;
+        cellStyle.minWidth = width;
+        cellStyle.maxWidth = width;
+        cellStyle.flexShrink = 0;
+    }
     if (fixed) {
         cellStyle['--fixed-start-offset'] =
             `${fixedOffset}px`;

package/Table/components/TableExpandCell.d.ts

@@ -7,5 +7,7 @@ export interface TableExpandCellProps {
     isHeader?: boolean;
     onClick?: VoidFunction;
     showShadow?: boolean;
+    /** Explicit width for dragging state */
+    width?: number;
 }
 export declare const TableExpandCell: import("react").NamedExoticComponent<TableExpandCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableExpandCell.js

@@ -10,7 +10,7 @@ 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 { canExpand = true, className, expanded, fixed = false, fixedOffset = 0, isHeader = false, onClick, showShadow = false, width, } = props;
     const handleClick = useCallback((event) => {
         event.stopPropagation();
         if (canExpand && onClick) {
@@ -19,6 +19,13 @@ const TableExpandCellInner = forwardRef(function TableExpandCell(props, ref) {
     }, [canExpand, onClick]);
     const CellComponent = isHeader ? 'th' : 'td';
     const cellStyle = {};
+    // Apply explicit width for dragging state
+    if (width !== undefined) {
+        cellStyle.width = width;
+        cellStyle.minWidth = width;
+        cellStyle.maxWidth = width;
+        cellStyle.flexShrink = 0;
+    }
     if (fixed) {
         cellStyle['--fixed-start-offset'] =
             `${fixedOffset}px`;

package/Table/components/TableExpandedRow.js

@@ -2,13 +2,14 @@
 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 { useTableContext, useTableDataContext } 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();
+    const { expansion, draggable, selection } = useTableContext();
+    const { columns } = useTableDataContext();
     // Calculate total column span
     const totalColSpan = useMemo(() => {
         let colSpan = columns.length;

package/Table/components/TableHeader.d.ts

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

package/Table/components/TableHeader.js

@@ -2,19 +2,20 @@
 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 { QuestionOutlineIcon, CaretUpIcon, CaretDownIcon } from '@mezzanine-ui/icons';
+import { useTableContext, useTableDataContext, 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 TableColumnTitleMenu from './TableColumnTitleMenu.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 TableHeaderInner = forwardRef(function TableHeader(_, ref) {
+    const { draggable, expansion, fixedOffsets, resizable, selection, sorting, } = useTableContext();
+    const { columns } = useTableDataContext();
     const { containerWidth, scrollLeft } = useTableSuperContext();
     const parseFixed = (fixed) => {
         if (fixed === true || fixed === 'start')
@@ -41,7 +42,9 @@ const TableHeaderInner = forwardRef(function TableHeader(props, ref) {
         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 }));
+        // In radio mode, hide the header selection (no select all)
+        const isRadioMode = selection.mode === 'radio';
+        return (jsx(TableSelectionCell, { fixed: isFixed, fixedOffset: (_b = offsetInfo === null || offsetInfo === void 0 ? void 0 : offsetInfo.offset) !== null && _b !== void 0 ? _b : 0, hidden: isRadioMode || ((_c = selection.config) === null || _c === void 0 ? void 0 : _c.hideSelectAll), indeterminate: selection.isIndeterminate, isHeader: true, mode: selection.mode, onChange: selection.toggleAll, selected: selection.isAllSelected, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false }));
     };
     const renderExpandHeader = () => {
         var _a, _b;
@@ -77,12 +80,6 @@ const TableHeaderInner = forwardRef(function TableHeader(props, ref) {
                         [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;
@@ -115,10 +112,10 @@ const TableHeaderInner = forwardRef(function TableHeader(props, ref) {
                     [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));
+                }, column.className, column.headerClassName), 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)] }), jsx(TableColumnTitleMenu, { column: 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()] }) }));
+    return (jsx("thead", { className: cx(tableClasses.header), ref: ref, children: jsxs("tr", { children: [renderDragHandleHeader(), renderExpandHeader(), renderSelectionHeader(), renderHeaderCells()] }) }));
 });
 const TableHeader = memo(TableHeaderInner);
 

package/Table/components/TableResizeHandle.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { memo, useRef, useCallback } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
-import { useTableContext } from '../TableContext.js';
+import { useTableContext, useTableDataContext } from '../TableContext.js';
 
 /**
  * TableResizeHandle provides column resizing functionality.
@@ -10,7 +10,8 @@ import { useTableContext } from '../TableContext.js';
  * maintaining the total width of both columns.
  */
 const TableResizeHandle = memo(function TableResizeHandle({ column, columnIndex, }) {
-    const { columnState, columns, draggable, expansion, scrollContainerRef, selection, } = useTableContext();
+    const { columnState, draggable, expansion, scrollContainerRef, selection } = useTableContext();
+    const { columns } = useTableDataContext();
     const { setResizedColumnWidth } = columnState || {};
     const startWidthRef = useRef(0);
     const nextStartWidthRef = useRef(0);
@@ -61,17 +62,14 @@ const TableResizeHandle = memo(function TableResizeHandle({ column, columnIndex,
         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) {
@@ -87,11 +85,9 @@ const TableResizeHandle = memo(function TableResizeHandle({ column, columnIndex,
             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;
             }

package/Table/components/TableRow.js

@@ -1,8 +1,10 @@
 '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 { getRowKey, tableClasses, EXPANSION_KEY, EXPANSION_COLUMN_WIDTH, DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH, SELECTION_KEY, SELECTION_COLUMN_WIDTH, TABLE_ACTIONS_KEY } from '@mezzanine-ui/core/table';
+import { calculateColumnWidths } from '../utils/calculateColumnWidths.js';
+import { useTableContext, useTableDataContext, useTableSuperContext } from '../TableContext.js';
+import { TableActionsCell } from './TableActionsCell.js';
 import { TableCell } from './TableCell.js';
 import { TableDragHandleCell } from './TableDragHandleCell.js';
 import { TableExpandCell } from './TableExpandCell.js';
@@ -20,13 +22,18 @@ const parseFixed = (fixed) => {
 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 { actions, draggable, expansion, fixedOffsets, highlight, rowHeight, selection, separatorAtRowIndexes, transitionState, zebraStriping, } = useTableContext();
+    const { columns } = useTableDataContext();
+    const isDragging = useMemo(() => {
+        var _a;
+        return ((_a = draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps.style) === null || _a === void 0 ? void 0 : _a.position) === 'fixed';
+    }, [draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps.style]);
     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 { containerWidth, getResizedColumnWidth, 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;
@@ -35,6 +42,33 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
     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;
+    // Calculate column widths when dragging (since position: fixed breaks colgroup)
+    const draggingColumnWidths = useMemo(() => {
+        if (!isDragging || !containerWidth)
+            return null;
+        // Calculate action columns total width
+        let actionColumnsWidth = 0;
+        if (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+            actionColumnsWidth += DRAG_HANDLE_COLUMN_WIDTH;
+        if (selection)
+            actionColumnsWidth += SELECTION_COLUMN_WIDTH;
+        if (expansion)
+            actionColumnsWidth += EXPANSION_COLUMN_WIDTH;
+        return calculateColumnWidths({
+            actionColumnsWidth,
+            columns,
+            containerWidth,
+            getResizedColumnWidth,
+        });
+    }, [
+        isDragging,
+        containerWidth,
+        columns,
+        draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
+        expansion,
+        getResizedColumnWidth,
+        selection,
+    ]);
     // Check if this row should be highlighted based on highlight mode
     const isRowHighlighted = useMemo(() => {
         if (!highlight)
@@ -50,14 +84,6 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
             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]);
@@ -69,7 +95,7 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
         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 }));
+        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, width: isDragging ? DRAG_HANDLE_COLUMN_WIDTH : undefined }));
     };
     const renderSelectionCell = () => {
         var _a, _b;
@@ -80,7 +106,7 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
         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 }));
+        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, mode: selection.mode, onChange: () => selection.toggleRow(rowKey, record), selected: isSelected, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: isDragging ? SELECTION_COLUMN_WIDTH : undefined }));
     };
     const renderExpandCell = () => {
         var _a;
@@ -94,7 +120,7 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
         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 }));
+        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, width: isDragging ? EXPANSION_COLUMN_WIDTH : undefined }));
     };
     const renderCells = () => {
         return columns.map((column, columnIndex) => {
@@ -105,21 +131,29 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
             // 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));
+            // Render actions cell for TABLE_ACTIONS_KEY column
+            if (column.key === TABLE_ACTIONS_KEY && actions) {
+                return (jsx(TableActionsCell, { actions: actions, className: column.className, columnIndex: columnIndex, fixed: fixedPos !== null && fixedPos !== void 0 ? fixedPos : undefined, fixedOffset: offset, record: record, rowIndex: rowIndex, showShadow: showShadow !== null && showShadow !== void 0 ? showShadow : false, width: draggingColumnWidths === null || draggingColumnWidths === void 0 ? void 0 : draggingColumnWidths.get(column.key) }, column.key));
+            }
+            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, width: draggingColumnWidths === null || draggingColumnWidths === void 0 ? void 0 : draggingColumnWidths.get(column.key) }, 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, {
+    const isZebraRow = zebraStriping && rowIndex % 2 === 1;
+    const isSeparatorRow = separatorAtRowIndexes === null || separatorAtRowIndexes === void 0 ? void 0 : separatorAtRowIndexes.includes(rowIndex);
+    return (jsxs("tr", { "aria-rowindex": rowIndex + 1, "aria-selected": isSelected, className: cx(tableClasses.bodyRow, {
             [tableClasses.bodyRowAdding]: isAdding,
             [tableClasses.bodyRowDeleting]: isDeleting,
+            [tableClasses.bodyRowDragging]: isDragging,
             [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()] }));
+            [tableClasses.bodyRowSelected]: isSelected,
+            [tableClasses.bodyRowSeparator]: isSeparatorRow,
+            [tableClasses.bodyRowZebra]: isZebraRow,
+        }, className), "data-index": rowIndex, "data-row-key": rowKey, onMouseLeave: handleMouseLeave, ref: rowRef, tabIndex: 0, ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps, style: resolvedStyle, children: [renderExpandCell(), renderDragHandleCell(), renderSelectionCell(), renderCells()] }));
 });
 const TableRow = memo(TableRowInner);
 

package/Table/components/TableSelectionCell.d.ts

@@ -1,3 +1,4 @@
+import { type TableSelectionMode } from '@mezzanine-ui/core/table';
 export interface TableSelectionCellProps {
     className?: string;
     disabled?: boolean;
@@ -6,8 +7,12 @@ export interface TableSelectionCellProps {
     hidden?: boolean;
     indeterminate?: boolean;
     isHeader?: boolean;
+    /** Selection mode */
+    mode?: TableSelectionMode;
     onChange: () => void;
     selected: boolean;
     showShadow?: boolean;
+    /** Explicit width for dragging state */
+    width?: number;
 }
 export declare const TableSelectionCell: import("react").NamedExoticComponent<TableSelectionCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/Table/components/TableSelectionCell.js

@@ -5,13 +5,21 @@ 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 Radio from '../../Radio/Radio.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 { className, disabled = false, fixed = false, fixedOffset = 0, hidden = false, indeterminate = false, isHeader = false, mode = 'checkbox', onChange, selected, showShadow = false, width, } = props;
     const CellComponent = isHeader ? 'th' : 'td';
     const cellStyle = {};
+    // Apply explicit width for dragging state
+    if (width !== undefined) {
+        cellStyle.width = width;
+        cellStyle.minWidth = width;
+        cellStyle.maxWidth = width;
+        cellStyle.flexShrink = 0;
+    }
     if (fixed) {
         cellStyle['--fixed-start-offset'] =
             `${fixedOffset}px`;
@@ -22,6 +30,9 @@ const TableSelectionCellInner = forwardRef(function TableSelectionCell(props, re
         if (loading) {
             return jsx(Skeleton, { width: "100%", variant: "body-highlight" });
         }
+        if (mode === 'radio') {
+            return (jsx(Radio, { checked: selected, disabled: disabled, onChange: onChange }));
+        }
         return (jsx(Checkbox, { checked: selected, disabled: disabled, indeterminate: indeterminate, onChange: onChange }));
     };
     return (jsx(CellComponent, { className: cx(isHeader ? tableClasses.headerCell : tableClasses.cell, tableClasses.selectionCell, {

package/Table/components/index.d.ts

@@ -1,3 +1,4 @@
+export { TableActionsCell, type TableActionsCellProps, } from './TableActionsCell';
 export { TableBody, type TableBodyProps } from './TableBody';
 export { TableCell, type TableCellProps } from './TableCell';
 export { TableColGroup, type TableColGroupProps } from './TableColGroup';

package/Table/components/index.js

@@ -1,3 +1,4 @@
+export { TableActionsCell } from './TableActionsCell.js';
 export { TableBody } from './TableBody.js';
 export { TableCell } from './TableCell.js';
 export { TableColGroup } from './TableColGroup.js';

package/Table/hooks/index.d.ts

@@ -1,6 +1,6 @@
 export { useTableSorting, type UseTableSortingOptions, } from './useTableSorting';
 export { useTableSelection, type UseTableSelectionOptions, } from './useTableSelection';
-export { useTableColumns, type UseTableColumnsOptions, } from './useTableColumns';
+export { useTableResizedColumns } from './useTableResizedColumns';
 export { useTableExpansion, type UseTableExpansionOptions, } from './useTableExpansion';
 export { useTableFixedOffsets, type FixedOffsetInfo, type UseTableFixedOffsetsOptions, type UseTableFixedOffsetsReturn, } from './useTableFixedOffsets';
 export { useTableScroll, type UseTableScrollReturn } from './useTableScroll';

package/Table/hooks/index.js

@@ -1,6 +1,6 @@
 export { useTableSorting } from './useTableSorting.js';
 export { useTableSelection } from './useTableSelection.js';
-export { useTableColumns } from './useTableColumns.js';
+export { useTableResizedColumns } from './useTableResizedColumns.js';
 export { useTableExpansion } from './useTableExpansion.js';
 export { useTableFixedOffsets } from './useTableFixedOffsets.js';
 export { useTableScroll } from './useTableScroll.js';

package/Table/hooks/useTableDataSource.d.ts

@@ -25,13 +25,13 @@ export interface UpdateDataSourceOptions {
      * If provided, these items will show the adding animation.
      * If not provided, new items will appear without animation.
      */
-    addedKeys?: (string | number)[];
+    addedKeys?: string[];
     /**
      * Keys of items being removed that should be animated.
      * These items should NOT be in the new data array.
      * The hook will temporarily keep them for animation, then remove after animation completes.
      */
-    removedKeys?: (string | number)[];
+    removedKeys?: string[];
 }
 export interface UseTableDataSourceReturn<T extends TableDataSource> {
     /** Current data source to pass to Table component */

package/Table/hooks/useTableExpansion.js

@@ -25,12 +25,6 @@ function useTableExpansion({ expandable, hasDragHandle, }) {
     }, [expandedRowKeys, isControlled, onExpand, onExpandedRowsChange]);
     const expansionLeftPadding = useMemo(() => {
         let padding = 0;
-        // Number(
-        //   getCSSVariableValue('--mzn-spacing-padding-horizontal-comfort').replace(
-        //     'rem',
-        //     '',
-        //   ),
-        // ) * 16;
         if (hasDragHandle)
             padding += DRAG_HANDLE_COLUMN_WIDTH;
         if (expandable)

package/Table/hooks/useTableFixedOffsets.d.ts

@@ -26,4 +26,4 @@ export interface UseTableFixedOffsetsOptions {
     /** Get computed width for a column (from columnState) */
     getResizedColumnWidth?: (key: string) => number | undefined;
 }
-export declare function useTableFixedOffsets(options: UseTableFixedOffsetsOptions): UseTableFixedOffsetsReturn;
+export declare function useTableFixedOffsets(props: UseTableFixedOffsetsOptions): UseTableFixedOffsetsReturn;

package/Table/hooks/useTableFixedOffsets.js

@@ -10,15 +10,15 @@ const parseFixed = (fixed) => {
         return 'end';
     return null;
 };
-function useTableFixedOffsets(options) {
-    const { expansionLeftPadding = 0 } = useTableSuperContext();
-    const { actionConfig, columns, getResizedColumnWidth } = options;
+function useTableFixedOffsets(props) {
+    const { expansionLeftPadding = 0, hasDragHandleFixed: parentHasDragHandleFixed, } = useTableSuperContext();
+    const { actionConfig, columns, getResizedColumnWidth } = props;
     // Store measured widths
     const [measuredWidths, setMeasuredWidths] = useState(new Map());
-    const { hasDragHandle, hasExpansion, hasSelection } = actionConfig;
+    const { hasDragHandle, hasExpansion, hasSelection, dragHandleFixed, expansionFixed, selectionFixed, } = actionConfig;
     useEffect(() => {
         const innerMap = new Map();
-        if (hasDragHandle) {
+        if (hasDragHandle || parentHasDragHandleFixed) {
             innerMap.set(DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH);
         }
         if (hasExpansion) {
@@ -28,7 +28,7 @@ function useTableFixedOffsets(options) {
             innerMap.set(SELECTION_KEY, SELECTION_COLUMN_WIDTH);
         }
         setMeasuredWidths(innerMap);
-    }, [hasDragHandle, hasExpansion, hasSelection]);
+    }, [hasDragHandle, hasExpansion, hasSelection, parentHasDragHandleFixed]);
     // Get width for a column (prioritize measured, then computed, then defined, then fallback)
     const getWidth = useCallback((key, fallback = 0) => {
         // Get static widths first
@@ -52,17 +52,15 @@ function useTableFixedOffsets(options) {
     const { fixedEndKeys, fixedStartKeys } = useMemo(() => {
         const startKeys = [];
         const endKeys = [];
-        // Action columns first (in order: drag handle, expansion, selection)
-        if (actionConfig.hasDragHandle && actionConfig.dragHandleFixed) {
-            startKeys.push(DRAG_HANDLE_KEY);
-        }
-        if (actionConfig.hasExpansion && actionConfig.expansionFixed) {
+        if (hasExpansion && expansionFixed) {
             startKeys.push(EXPANSION_KEY);
         }
-        if (actionConfig.hasSelection && actionConfig.selectionFixed) {
+        if ((hasDragHandle && dragHandleFixed) || parentHasDragHandleFixed) {
+            startKeys.push(DRAG_HANDLE_KEY);
+        }
+        if (hasSelection && selectionFixed) {
             startKeys.push(SELECTION_KEY);
         }
-        // Then data columns
         columns.forEach((column) => {
             const side = parseFixed(column.fixed);
             if (side === 'start') {
@@ -73,12 +71,20 @@ function useTableFixedOffsets(options) {
             }
         });
         return { fixedEndKeys: endKeys, fixedStartKeys: startKeys };
-    }, [actionConfig, columns]);
+    }, [
+        hasDragHandle,
+        dragHandleFixed,
+        hasExpansion,
+        expansionFixed,
+        hasSelection,
+        selectionFixed,
+        columns,
+        parentHasDragHandleFixed,
+    ]);
     // Calculate all fixed offsets
     const fixedOffsets = useMemo(() => {
         const startOffsets = new Map();
         const endOffsets = new Map();
-        // Calculate start offsets
         let currentStartOffset = 0;
         fixedStartKeys.forEach((key) => {
             startOffsets.set(key, {
@@ -87,7 +93,6 @@ function useTableFixedOffsets(options) {
             });
             currentStartOffset += getWidth(key);
         });
-        // Calculate end offsets (from right to left)
         let currentEndOffset = 0;
         for (let i = fixedEndKeys.length - 1; i >= 0; i--) {
             const key = fixedEndKeys[i];
@@ -99,26 +104,22 @@ function useTableFixedOffsets(options) {
         }
         return { endOffsets, startOffsets };
     }, [fixedEndKeys, fixedStartKeys, getWidth]);
-    // Build ordered list of all columns (for position calculation)
     const allColumnKeys = useMemo(() => {
         const keys = [];
-        // Action columns first
-        if (hasDragHandle) {
-            keys.push(DRAG_HANDLE_KEY);
-        }
         if (hasExpansion) {
             keys.push(EXPANSION_KEY);
         }
+        if (hasDragHandle) {
+            keys.push(DRAG_HANDLE_KEY);
+        }
         if (hasSelection) {
             keys.push(SELECTION_KEY);
         }
-        // Then data columns
         columns.forEach((column) => {
             keys.push(column.key);
         });
         return keys;
     }, [hasDragHandle, hasSelection, hasExpansion, columns]);
-    // Calculate original positions (left edge) for all columns
     const originalPositions = useMemo(() => {
         const positions = new Map();
         let currentPosition = 0;
@@ -128,9 +129,6 @@ function useTableFixedOffsets(options) {
         });
         return positions;
     }, [allColumnKeys, getWidth]);
-    /**
-     * Determine if a column should show shadow.
-     */
     const shouldShowShadow = useCallback((key, scrollLeft, containerWidth) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const offsetInfo = (_a = fixedOffsets.startOffsets.get(key)) !== null && _a !== void 0 ? _a : fixedOffsets.endOffsets.get(key);

package/Table/hooks/useTableResizedColumns.d.ts

@@ -0,0 +1,2 @@
+import type { TableResizedColumnState } from '../TableContext';
+export declare function useTableResizedColumns(): TableResizedColumnState;