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

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, DRAG_HANDLE_KEY, DRAG_HANDLE_COLUMN_WIDTH, EXPANSION_KEY, EXPANSION_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: [renderDragHandleCell(), renderExpandCell(), 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) {
+        if ((hasDragHandle && dragHandleFixed) || parentHasDragHandleFixed) {
             startKeys.push(DRAG_HANDLE_KEY);
         }
-        if (actionConfig.hasExpansion && actionConfig.expansionFixed) {
+        if (hasExpansion && expansionFixed) {
             startKeys.push(EXPANSION_KEY);
         }
-        if (actionConfig.hasSelection && actionConfig.selectionFixed) {
+        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,10 +104,8 @@ 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);
         }
@@ -112,13 +115,11 @@ function useTableFixedOffsets(options) {
         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;

package/Table/hooks/useTableResizedColumns.js

@@ -0,0 +1,22 @@
+'use client';
+import { useState, useCallback } from 'react';
+
+function useTableResizedColumns() {
+    const [resizedColumnWidths, setResizedColumnWidths] = useState(new Map());
+    const getResizedColumnWidth = useCallback((key) => {
+        return resizedColumnWidths.get(key);
+    }, [resizedColumnWidths]);
+    const setResizedColumnWidth = useCallback((key, width) => {
+        setResizedColumnWidths((prev) => {
+            const next = new Map(prev);
+            next.set(key, width);
+            return next;
+        });
+    }, []);
+    return {
+        getResizedColumnWidth,
+        setResizedColumnWidth,
+    };
+}
+
+export { useTableResizedColumns };

package/Table/hooks/useTableScroll.d.ts

@@ -4,7 +4,9 @@ export interface UseTableScrollReturn {
     handleScroll: (event: React.UIEvent<HTMLDivElement>) => void;
     isScrollingHorizontally: boolean;
     scrollLeft: number;
-    /** Set refs for measuring container width */
+    /** Ref object for internal use */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Callback ref setter that should be used for the scroll container */
     setContainerRef: (element: HTMLDivElement | null) => void;
 }
 export declare function useTableScroll({ enabled, }: {

package/Table/hooks/useTableScroll.js

@@ -6,45 +6,51 @@ function useTableScroll({ enabled, }) {
     const [scrollLeft, setScrollLeft] = useState(0);
     const [containerWidth, setContainerWidth] = useState(0);
     const containerRef = useRef(null);
-    const setContainerRef = useCallback((element) => {
-        containerRef.current = element;
-    }, []);
+    const resizeObserverRef = useRef(null);
     const measureDimensions = useCallback(() => {
         if (containerRef.current) {
             const newContainerWidth = containerRef.current.clientWidth;
             setContainerWidth((prev) => prev !== newContainerWidth ? newContainerWidth : prev);
         }
     }, []);
+    // Callback ref that sets up ResizeObserver when element is attached
+    const setContainerRef = useCallback((element) => {
+        // Clean up previous observer
+        if (resizeObserverRef.current) {
+            resizeObserverRef.current.disconnect();
+            resizeObserverRef.current = null;
+        }
+        containerRef.current = element;
+        if (element && enabled) {
+            // Measure immediately
+            measureDimensions();
+            // Set up ResizeObserver
+            resizeObserverRef.current = new ResizeObserver(() => {
+                measureDimensions();
+            });
+            resizeObserverRef.current.observe(element);
+        }
+    }, [enabled, measureDimensions]);
     const handleScroll = useCallback((event) => {
         const target = event.currentTarget;
         const newScrollLeft = target.scrollLeft;
         setScrollLeft(newScrollLeft);
         setIsScrollingHorizontally(newScrollLeft > 0);
     }, []);
-    // Set up ResizeObserver to track dimension changes
+    // Cleanup on unmount
     useEffect(() => {
-        const { current: container } = containerRef;
-        if (!container || !enabled)
-            return;
-        const resizeObserver = new ResizeObserver(() => {
-            measureDimensions();
-        });
-        resizeObserver.observe(container);
         return () => {
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-    }, [measureDimensions, enabled]);
-    // Initial measurement after mount
-    useEffect(() => {
-        if (enabled) {
-            measureDimensions();
-        }
-    }, [measureDimensions, enabled]);
+    }, []);
     return useMemo(() => ({
         containerWidth,
         handleScroll,
         isScrollingHorizontally,
         scrollLeft,
+        containerRef,
         setContainerRef,
     }), [
         containerWidth,

package/Table/hooks/useTableSelection.js

@@ -3,28 +3,44 @@ import { useMemo, useCallback } from 'react';
 import { getRowKey } from '@mezzanine-ui/core/table';
 
 function useTableSelection({ dataSource, rowSelection, }) {
-    const { selectedRowKeys = [], isCheckboxDisabled, onChange, onSelectAll, preserveSelectedRowKeys = false, } = rowSelection || {};
+    var _a;
+    // Extract common props
+    const { onChange, mode = 'checkbox' } = rowSelection || {};
+    const selections = mode === 'radio'
+        ? rowSelection.selectedRowKey
+        : rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys;
+    const isSelectionDisabled = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.isSelectionDisabled;
+    const onSelectAll = mode === 'radio' ? undefined : rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onSelectAll;
+    const preserveSelectedRowKeys = mode === 'radio' ? false : ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.preserveSelectedRowKeys) !== null && _a !== void 0 ? _a : false);
+    const selectedRowKeys = useMemo(() => {
+        var _a;
+        if (mode === 'radio') {
+            const key = selections;
+            return key !== undefined ? [key] : [];
+        }
+        return (_a = selections) !== null && _a !== void 0 ? _a : [];
+    }, [mode, selections]);
     const selectableKeys = useMemo(() => {
         if (!rowSelection)
             return [];
         return dataSource
             .filter((record) => {
-            if (!isCheckboxDisabled)
+            if (!isSelectionDisabled)
                 return true;
-            const disabled = isCheckboxDisabled(record);
+            const disabled = isSelectionDisabled(record);
             return !disabled;
         })
             .map((record) => getRowKey(record));
-    }, [dataSource, isCheckboxDisabled, rowSelection]);
+    }, [dataSource, isSelectionDisabled, rowSelection]);
     const isRowSelected = useCallback((key) => {
         return selectedRowKeys.includes(key);
     }, [selectedRowKeys]);
     const isRowDisabled = useCallback((record) => {
-        if (!isCheckboxDisabled)
+        if (!isSelectionDisabled)
             return false;
-        const disabled = isCheckboxDisabled(record);
+        const disabled = isSelectionDisabled(record);
         return disabled;
-    }, [isCheckboxDisabled]);
+    }, [isSelectionDisabled]);
     const isAllSelected = useMemo(() => {
         if (!selectableKeys.length)
             return false;
@@ -37,13 +53,20 @@ function useTableSelection({ dataSource, rowSelection, }) {
         return selectedCount > 0 && selectedCount < selectableKeys.length;
     }, [selectableKeys, selectedRowKeys]);
     const toggleRow = useCallback((key) => {
+        // Radio mode: only one selection allowed
+        if (mode === 'radio') {
+            const selectedRow = dataSource.find((r) => getRowKey(r) === key) || null;
+            onChange === null || onChange === void 0 ? void 0 : onChange(key, selectedRow);
+            return;
+        }
+        // Checkbox mode: toggle selection
         const newKeys = selectedRowKeys.includes(key)
             ? selectedRowKeys.filter((k) => k !== key)
             : [...selectedRowKeys, key];
         const selectedRow = dataSource.find((r) => getRowKey(r) === key) || null;
         const selectedRows = dataSource.filter((r) => newKeys.includes(getRowKey(r)));
         onChange === null || onChange === void 0 ? void 0 : onChange(newKeys, selectedRow, selectedRows);
-    }, [selectedRowKeys, dataSource, onChange]);
+    }, [mode, selectedRowKeys, dataSource, onChange]);
     const toggleAll = useCallback(() => {
         let newKeys;
         let type;
@@ -85,6 +108,7 @@ function useTableSelection({ dataSource, rowSelection, }) {
         isIndeterminate,
         isRowDisabled,
         isRowSelected,
+        mode,
         selectedRowKeys,
         toggleAll,
         toggleRow,

package/Table/hooks/useTableVirtualization.d.ts

@@ -3,7 +3,7 @@ import { type TableDataSource } from '@mezzanine-ui/core/table';
 export interface UseTableVirtualizationOptions<T extends TableDataSource> {
     dataSource: T[];
     enabled?: boolean;
-    isRowExpanded?: (key: string | number) => boolean;
+    isRowExpanded?: (key: string) => boolean;
     overscan?: number;
     scrollContainerRef: React.RefObject<HTMLDivElement | null>;
 }