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

package/Table/Table.d.ts

@@ -1,123 +1,5 @@
-import { TableSize, type HighlightMode, type TableActions, type TableActionsWithMinWidth, type TableColumn, type TableColumnWithMinWidth, type TableDataSource, type TableDraggable, type TableExpandable, type TableRowSelection, type TableScroll } from '@mezzanine-ui/core/table';
-import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import type { TableTransitionState } from './hooks/useTableDataSource';
-import { TablePaginationProps } from './components/TablePagination';
-import type { EmptyProps } from '../Empty';
-export interface TableBaseProps<T extends TableDataSource = TableDataSource> extends Omit<NativeElementPropsWithoutKeyAndRef<'table'>, 'children' | 'draggable' | 'summary' | 'onChange'> {
-    /** Data source */
-    dataSource: T[];
-    /** Props for Empty component when no data */
-    emptyProps?: EmptyProps & {
-        height?: number | string;
-    };
-    /** Expandable row configuration */
-    expandable?: TableExpandable<T>;
-    /**
-     * Whether the table should stretch to fill its container width.
-     * When true, the table will always be 100% width of its container.
-     * Note: If the sum of all column widths is less than the table width,
-     * columns will be proportionally stretched to fill the remaining space.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /** Highlight mode for hover effects
-     * @default 'row'
-     */
-    highlight?: HighlightMode;
-    /** Loading state */
-    loading?: boolean;
-    /** Number of rows to display when loading */
-    loadingRowsCount?: number;
-    /** Minimum height of the table */
-    minHeight?: number | string;
-    /**
-     * Whether the table is nested inside an expanded row content area
-     */
-    nested?: boolean;
-    /** Pagination configuration */
-    pagination?: TablePaginationProps;
-    /**
-     * Row height preset token.
-     */
-    rowHeightPreset?: 'base' | 'condensed' | 'detailed' | 'roomy';
-    /** Row selection configuration */
-    rowSelection?: TableRowSelection<T>;
-    /** Row indexes where a separator border should be displayed */
-    separatorAtRowIndexes?: number[];
-    /** Show header row */
-    showHeader?: boolean;
-    /** Custom size variant
-     * @default 'main'
-     */
-    size?: TableSize;
-    /** Whether to enable sticky header
-     *  @default true
-     */
-    sticky?: boolean;
-    /** Transition state for row add/remove animations (from useTableDataSource hook) */
-    transitionState?: TableTransitionState;
-    /** Enable zebra striping for alternating row backgrounds */
-    zebraStriping?: boolean;
-}
-/**
- * Props when resizable is enabled.
- * Requires minWidth on all columns.
- */
-export interface TableResizableProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
-    /** Actions column configuration - minWidth required when resizable */
-    actions?: TableActionsWithMinWidth<T>;
-    /** Column configuration - minWidth required for each column when resizable */
-    columns: TableColumnWithMinWidth<T>[];
-    /**
-     * Whether columns are resizable by user interaction
-     */
-    resizable: true;
-}
-/**
- * Props when resizable is disabled or not specified.
- */
-export interface TableNonResizableProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
-    /** Actions column configuration */
-    actions?: TableActions<T>;
-    /** Column configuration */
-    columns: TableColumn<T>[];
-    /**
-     * Whether columns are resizable by user interaction
-     * @default false
-     */
-    resizable?: false;
-}
-/**
- * Props when virtualized scrolling is enabled.
- * Draggable is not allowed in this mode.
- */
-export type TableVirtualizedProps<T extends TableDataSource = TableDataSource> = (TableResizableProps<T> | TableNonResizableProps<T>) & {
-    /** Draggable row configuration - not available when virtualized is enabled */
-    draggable?: never;
-    /** Scroll configuration with virtualized enabled */
-    scroll: TableScroll & {
-        virtualized: true;
-        y: number | string;
-    };
-};
-/**
- * Props when virtualized scrolling is disabled or not specified.
- * Draggable is allowed in this mode.
- */
-export type TableNonVirtualizedProps<T extends TableDataSource = TableDataSource> = (TableResizableProps<T> | TableNonResizableProps<T>) & {
-    /** Draggable row configuration */
-    draggable?: TableDraggable<T>;
-    /** Scroll configuration for scrolling (virtualized defaults to false) */
-    scroll?: TableScroll & {
-        virtualized?: false;
-    };
-};
-/**
- * TableProps - discriminated union to ensure draggable and virtualized
- * scrolling are mutually exclusive at the type level, and resizable
- * requires minWidth on all columns.
- */
-export type TableProps<T extends TableDataSource = TableDataSource> = TableVirtualizedProps<T> | TableNonVirtualizedProps<T>;
+import { type TableDataSource } from '@mezzanine-ui/core/table';
+import type { TableProps } from './typings';
 /**
  * Table is a high-performance data table component with support for
  * virtual scrolling, column resizing, fixed columns, row selection,

package/Table/Table.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import throttle from 'lodash/throttle';
-import { TABLE_ACTIONS_KEY, tableClasses } from '@mezzanine-ui/core/table';
+import { TOGGLEABLE_COLUMN_WIDTH, TOGGLEABLE_KEY, COLLECTABLE_COLUMN_WIDTH, COLLECTABLE_KEY, TABLE_ACTIONS_KEY, tableClasses } from '@mezzanine-ui/core/table';
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { TableSuperContext, TableContext, TableDataContext } from './TableContext.js';
 import { TableBody } from './components/TableBody.js';
@@ -19,10 +19,11 @@ import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value
 import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import TableBulkActions from './components/TableBulkActions.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Scrollbar from '../Scrollbar/Scrollbar.js';
 import cx from 'clsx';
 
 function TableInner(props, ref) {
-    const { actions, className, columns, dataSource, draggable, emptyProps, expandable, fullWidth = false, highlight = 'row', loading = false, loadingRowsCount = 10, minHeight, nested = false, pagination, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, transitionState, zebraStriping, separatorAtRowIndexes, ...restProps } = props;
+    const { actions, className, columns, dataSource, draggable, emptyProps, expandable, fullWidth = false, highlight = 'row', loading = false, loadingRowsCount = 10, minHeight, nested = false, pagination, pinnable, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, toggleable, collectable, transitionState, zebraStriping, separatorAtRowIndexes, ...restProps } = props;
     const hostRef = useRef(null);
     const composedHostRef = useComposeRefs([ref, hostRef]);
     /** Feature: Loading */
@@ -71,19 +72,50 @@ function TableInner(props, ref) {
         columns,
     });
     /** Feature: Actions column */
-    const columnsWithActions = useMemo(() => {
-        var _a;
-        if (!actions)
-            return columns;
-        const actionsColumn = {
-            ...actions,
-            align: (_a = actions.align) !== null && _a !== void 0 ? _a : 'end',
-            ellipsis: false,
-            key: TABLE_ACTIONS_KEY,
-            render: () => null, // Placeholder, actual rendering is handled in TableRow
-        };
-        return [...columns, actionsColumn];
-    }, [actions, columns]);
+    const columnsWithRightControls = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const result = [...columns];
+        // Add toggleable column (rightControl area - after data columns)
+        if (toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled) {
+            const toggleableColumn = {
+                align: (_a = toggleable.align) !== null && _a !== void 0 ? _a : 'start',
+                ellipsis: false,
+                fixed: toggleable.fixed ? 'end' : undefined,
+                key: TOGGLEABLE_KEY,
+                render: () => null, // Placeholder, actual rendering is handled in TableRow
+                title: toggleable.title,
+                width: (_b = toggleable.minWidth) !== null && _b !== void 0 ? _b : TOGGLEABLE_COLUMN_WIDTH,
+                minWidth: (_c = toggleable.minWidth) !== null && _c !== void 0 ? _c : TOGGLEABLE_COLUMN_WIDTH,
+            };
+            result.push(toggleableColumn);
+        }
+        // Add collectable column (rightControl area - after toggleable)
+        if (collectable === null || collectable === void 0 ? void 0 : collectable.enabled) {
+            const collectableColumn = {
+                align: (_d = collectable.align) !== null && _d !== void 0 ? _d : 'start',
+                ellipsis: false,
+                fixed: collectable.fixed ? 'end' : undefined,
+                key: COLLECTABLE_KEY,
+                render: () => null, // Placeholder, actual rendering is handled in TableRow
+                title: collectable.title,
+                width: (_e = collectable === null || collectable === void 0 ? void 0 : collectable.minWidth) !== null && _e !== void 0 ? _e : COLLECTABLE_COLUMN_WIDTH,
+                minWidth: (_f = collectable === null || collectable === void 0 ? void 0 : collectable.minWidth) !== null && _f !== void 0 ? _f : COLLECTABLE_COLUMN_WIDTH,
+            };
+            result.push(collectableColumn);
+        }
+        // Add actions column (rightmost)
+        if (actions) {
+            const actionsColumn = {
+                ...actions,
+                align: (_g = actions.align) !== null && _g !== void 0 ? _g : 'end',
+                ellipsis: false,
+                key: TABLE_ACTIONS_KEY,
+                render: () => null, // Placeholder, actual rendering is handled in TableRow
+            };
+            result.push(actionsColumn);
+        }
+        return result;
+    }, [actions, collectable, columns, toggleable]);
     /** Feature: Row selection */
     const selectionState = useTableSelection({
         dataSource,
@@ -92,27 +124,54 @@ function TableInner(props, ref) {
     /** Feature: Expansion */
     const expansionState = useTableExpansion({
         expandable,
-        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
+        hasDragOrPinHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled),
     });
     /** Feature: Column resized */
     const columnState = useTableResizedColumns();
     /** Feature: Scroll and dimensions calculation */
-    const { containerWidth, handleScroll, isScrollingHorizontally, scrollLeft, containerRef: scrollContainerRef, setContainerRef, } = useTableScroll({
+    const { containerWidth, handleScrollbarScroll, handleViewportReady, isContainerReady, isScrollingHorizontally, scrollLeft, containerRef: scrollContainerRef, } = useTableScroll({
         enabled: !nested,
     });
     const virtualScrollEnabled = useMemo(() => !!((scroll === null || scroll === void 0 ? void 0 : scroll.virtualized) && (scroll === null || scroll === void 0 ? void 0 : scroll.y)), [scroll === null || scroll === void 0 ? void 0 : scroll.virtualized, scroll === null || scroll === void 0 ? void 0 : scroll.y]);
     /** Feature: Column fixed */
-    const actionConfig = useMemo(() => ({
-        hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
-        dragHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed),
-        hasExpansion: !!expandable,
-        expansionFixed: !!(expandable === null || expandable === void 0 ? void 0 : expandable.fixed),
-        hasSelection: !!rowSelection,
-        selectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed),
-    }), [draggable === null || draggable === void 0 ? void 0 : draggable.enabled, draggable === null || draggable === void 0 ? void 0 : draggable.fixed, expandable, rowSelection]);
+    const actionConfig = useMemo(() => {
+        var _a, _b;
+        return ({
+            hasDragOrPinHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled),
+            dragOrPinHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.fixed) || !!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed),
+            dragOrPinHandleType: (draggable === null || draggable === void 0 ? void 0 : draggable.enabled)
+                ? 'drag'
+                : (pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled)
+                    ? 'pin'
+                    : undefined,
+            hasExpansion: !!expandable,
+            expansionFixed: !!(expandable === null || expandable === void 0 ? void 0 : expandable.fixed),
+            hasSelection: !!rowSelection,
+            selectionFixed: !!(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.fixed),
+            hasToggleable: !!(toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled),
+            toggleableMinWidth: (_a = toggleable === null || toggleable === void 0 ? void 0 : toggleable.minWidth) !== null && _a !== void 0 ? _a : TOGGLEABLE_COLUMN_WIDTH,
+            toggleableFixed: !!(toggleable === null || toggleable === void 0 ? void 0 : toggleable.fixed),
+            hasCollectable: !!(collectable === null || collectable === void 0 ? void 0 : collectable.enabled),
+            collectableMinWidth: (_b = collectable === null || collectable === void 0 ? void 0 : collectable.minWidth) !== null && _b !== void 0 ? _b : COLLECTABLE_COLUMN_WIDTH,
+            collectableFixed: !!(collectable === null || collectable === void 0 ? void 0 : collectable.fixed),
+        });
+    }, [
+        collectable === null || collectable === void 0 ? void 0 : collectable.enabled,
+        collectable === null || collectable === void 0 ? void 0 : collectable.minWidth,
+        collectable === null || collectable === void 0 ? void 0 : collectable.fixed,
+        draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
+        draggable === null || draggable === void 0 ? void 0 : draggable.fixed,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed,
+        expandable,
+        rowSelection,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.enabled,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.minWidth,
+        toggleable === null || toggleable === void 0 ? void 0 : toggleable.fixed,
+    ]);
     const fixedOffsetsState = useTableFixedOffsets({
         actionConfig,
-        columns: columnsWithActions,
+        columns: columnsWithRightControls,
         getResizedColumnWidth: columnState.getResizedColumnWidth,
     });
     /** Feature: Drag n Drop */
@@ -139,60 +198,96 @@ function TableInner(props, ref) {
             fixed: draggable.fixed,
         }
         : undefined, [draggable]);
+    const pinnableState = useMemo(() => pinnable
+        ? {
+            enabled: pinnable.enabled,
+            fixed: pinnable.fixed,
+            pinnedRowKeys: pinnable.pinnedRowKeys,
+            onPinChange: pinnable.onPinChange,
+        }
+        : undefined, [pinnable]);
+    const toggleableState = useMemo(() => toggleable
+        ? {
+            enabled: toggleable.enabled,
+            fixed: toggleable.fixed,
+            isRowDisabled: toggleable.isRowDisabled,
+            onToggleChange: toggleable.onToggleChange,
+            title: toggleable.title,
+            toggledRowKeys: toggleable.toggledRowKeys,
+        }
+        : undefined, [toggleable]);
+    const collectableState = useMemo(() => collectable
+        ? {
+            enabled: collectable.enabled,
+            collectedRowKeys: collectable.collectedRowKeys,
+            fixed: collectable.fixed,
+            isRowDisabled: collectable.isRowDisabled,
+            onCollectChange: collectable.onCollectChange,
+            title: collectable.title,
+        }
+        : undefined, [collectable]);
     /** Context values */
     const contextValue = useMemo(() => ({
         actions: actions,
+        collectable: collectableState,
         columnState,
         dataSource: dataSourceForRender,
         draggable: draggableState,
         emptyProps,
         expansion: expansionState,
         fixedOffsets: fixedOffsetsState,
-        resizable,
-        rowHeight,
         highlight: highlightValue,
-        isScrollingHorizontally: isScrollingHorizontally,
+        isContainerReady,
         isInsideExpandedContentArea: nested,
+        isScrollingHorizontally: isScrollingHorizontally,
         loading,
         pagination: pagination || undefined,
+        pinnable: pinnableState,
+        resizable,
+        rowHeight,
         scroll,
         scrollContainerRef,
         selection: selectionState,
-        size,
         separatorAtRowIndexes,
+        size,
         sorting: sortingState,
+        toggleable: toggleableState,
         transitionState,
         virtualScrollEnabled,
         zebraStriping,
     }), [
         actions,
+        collectableState,
         columnState,
         dataSourceForRender,
         draggableState,
         emptyProps,
         expansionState,
         fixedOffsetsState,
-        resizable,
-        rowHeight,
         highlightValue,
+        isContainerReady,
+        isScrollingHorizontally,
         loading,
+        nested,
         pagination,
+        pinnableState,
+        resizable,
+        rowHeight,
         scroll,
         scrollContainerRef,
-        isScrollingHorizontally,
         selectionState,
+        separatorAtRowIndexes,
         size,
         sortingState,
+        toggleableState,
         transitionState,
         virtualScrollEnabled,
         zebraStriping,
-        separatorAtRowIndexes,
-        nested,
     ]);
     const dataContextValue = useMemo(() => ({
-        columns: columnsWithActions,
+        columns: columnsWithRightControls,
         dataSource,
-    }), [columnsWithActions, dataSource]);
+    }), [columnsWithRightControls, dataSource]);
     const superContextValue = useMemo(() => {
         var _a;
         return ({
@@ -200,7 +295,8 @@ function TableInner(props, ref) {
             getResizedColumnWidth: columnState.getResizedColumnWidth,
             scrollLeft: scrollLeft,
             expansionLeftPadding: (_a = expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding) !== null && _a !== void 0 ? _a : 0,
-            hasDragHandleFixed: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) && draggable.fixed,
+            hasDragOrPinHandleFixed: (!!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled) && draggable.fixed) ||
+                (!!(pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled) && pinnable.fixed),
         });
     }, [
         scrollLeft,
@@ -209,22 +305,17 @@ function TableInner(props, ref) {
         columnState.getResizedColumnWidth,
         draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
         draggable === null || draggable === void 0 ? void 0 : draggable.fixed,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.enabled,
+        pinnable === null || pinnable === void 0 ? void 0 : pinnable.fixed,
     ]);
     /** Computed styles */
     const scrollContainerStyle = useMemo(() => {
         const containerStyle = {};
-        if (scroll === null || scroll === void 0 ? void 0 : scroll.y) {
-            containerStyle.maxHeight = scroll.y;
-        }
-        if (nested) {
-            containerStyle.position = 'unset';
-            containerStyle.overflow = 'unset';
-        }
         if (minHeight) {
             containerStyle.minHeight = minHeight;
         }
         return containerStyle;
-    }, [scroll === null || scroll === void 0 ? void 0 : scroll.y, nested, minHeight]);
+    }, [minHeight]);
     const tableStyle = useMemo(() => {
         const baseStyle = {};
         if (fullWidth) {
@@ -234,12 +325,18 @@ function TableInner(props, ref) {
     }, [fullWidth]);
     /** Scroll Container Ref */
     const droppableInnerRefSetter = useRef(null);
-    const composedScrollContainerRef = useCallback((element) => {
-        setContainerRef(element);
+    // Handler for Scrollbar's onViewportReady - composes with handleViewportReady and droppable innerRef
+    const handleScrollbarViewportReady = useCallback((viewport, instance) => {
+        handleViewportReady(viewport, instance);
+        // Also set droppable innerRef to viewport element for DnD
         if (droppableInnerRefSetter.current) {
-            droppableInnerRefSetter.current(element);
+            droppableInnerRefSetter.current(viewport);
         }
-    }, [setContainerRef]);
+    }, [handleViewportReady]);
+    // Scrollbar events for OverlayScrollbars
+    const scrollbarEvents = useMemo(() => ({
+        scroll: handleScrollbarScroll,
+    }), [handleScrollbarScroll]);
     /** Feature: bulk actions */
     const bulkActionsConfig = useMemo(() => {
         if (!selectionState || selectionState.mode !== 'checkbox') {
@@ -314,9 +411,7 @@ function TableInner(props, ref) {
         else {
             droppableInnerRefSetter.current = null;
         }
-        return (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: composedHostRef, style: style, ...restProps, children: [jsx("div", { ...droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.droppableProps, className: cx(tableClasses.scrollContainer, {
-                                [tableClasses.sticky]: !!sticky,
-                            }), onScroll: handleScroll, ref: droppableProvided ? composedScrollContainerRef : setContainerRef, style: scrollContainerStyle, children: jsxs("table", { className: cx(tableClasses.root, size === 'sub' ? tableClasses.sub : tableClasses.main), style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {}), (droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.placeholder) ? (jsx("tbody", { children: droppableProvided.placeholder })) : null] }) }), pagination && (jsx(TablePagination, { ...pagination, ref: paginationRef })), (bulkActionsConfig === null || bulkActionsConfig === void 0 ? void 0 : bulkActionsConfig.enabled) ? (jsx(TableBulkActions, { bulkActions: bulkActionsConfig.bulkActions, isFixed: isBulkActionsFixed, onClearSelection: bulkActionsConfig.onClearSelection, selectedRowKeys: bulkActionsConfig.selectedRowKeys })) : null] }) }) }));
+        return (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: composedHostRef, style: style, ...restProps, children: [jsx(Scrollbar, { ...droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.droppableProps, className: sticky ? tableClasses.sticky : undefined, defer: false, disabled: nested, events: scrollbarEvents, onViewportReady: handleScrollbarViewportReady, style: scrollContainerStyle, maxHeight: scroll === null || scroll === void 0 ? void 0 : scroll.y, children: jsxs("table", { className: cx(tableClasses.root, size === 'sub' ? tableClasses.sub : tableClasses.main), style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {}), (droppableProvided === null || droppableProvided === void 0 ? void 0 : droppableProvided.placeholder) ? (jsx("tbody", { children: droppableProvided.placeholder })) : null] }) }), pagination && (jsx(TablePagination, { ...pagination, ref: paginationRef })), (bulkActionsConfig === null || bulkActionsConfig === void 0 ? void 0 : bulkActionsConfig.enabled) ? (jsx(TableBulkActions, { bulkActions: bulkActionsConfig.bulkActions, isFixed: isBulkActionsFixed, onClearSelection: bulkActionsConfig.onClearSelection, selectedRowKeys: bulkActionsConfig.selectedRowKeys })) : null] }) }) }));
     };
     if (nested) {
         return renderMainTable();

package/Table/TableContext.d.ts

@@ -1,4 +1,4 @@
-import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll, TableSelectionMode } from '@mezzanine-ui/core/table';
+import type { HighlightMode, TableSize, TableActionsBase, TableColumn, TableDataSource, TableExpandable, TableRowSelection, TableScroll, TableSelectionMode, TableCollectable, TableToggleable, TablePinnable, TableDraggable } from '@mezzanine-ui/core/table';
 import type { EmptyProps } from '../Empty';
 import type { PaginationProps } from '../Pagination';
 import type { UseTableFixedOffsetsReturn } from './hooks/useTableFixedOffsets';
@@ -32,11 +32,6 @@ export interface TableResizedColumnState {
     getResizedColumnWidth: (key: string) => number | undefined;
     setResizedColumnWidth: (key: string, width: number) => void;
 }
-/** Draggable state */
-export interface TableDraggableState {
-    enabled: boolean;
-    fixed?: boolean | 'start';
-}
 /** Highlight state for hover effects */
 export interface TableHighlightState {
     columnIndex: number | null;
@@ -47,30 +42,34 @@ export interface TableHighlightState {
 /** Main table context */
 export interface TableContextValue<T extends TableDataSource = TableDataSource> {
     actions?: TableActionsBase<T>;
+    collectable?: TableCollectable<T>;
     columnState?: TableResizedColumnState;
     dataSource: T[];
-    draggable?: TableDraggableState;
+    draggable?: Omit<TableDraggable<T>, 'onDragEnd'>;
     emptyProps?: EmptyProps & {
         height?: number | string;
     };
     expansion?: TableExpansionState<T>;
     fixedOffsets?: UseTableFixedOffsetsReturn;
-    resizable?: boolean;
-    rowHeight: number;
     highlight?: TableHighlightState;
+    isContainerReady?: boolean;
+    isInsideExpandedContentArea?: boolean;
     isScrollingHorizontally?: boolean;
     loading?: boolean;
     pagination?: PaginationProps;
-    size?: TableSize;
+    pinnable?: TablePinnable;
+    resizable?: boolean;
+    rowHeight: number;
     scroll?: TableScroll;
     scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
     selection?: TableSelectionState<T>;
     separatorAtRowIndexes?: number[];
+    size?: TableSize;
     sorting?: TableSortingState;
+    toggleable?: TableToggleable<T>;
     transitionState?: TableTransitionState;
     virtualScrollEnabled?: boolean;
     zebraStriping?: boolean;
-    isInsideExpandedContentArea?: boolean;
 }
 export declare const TableContext: import("react").Context<TableContextValue<TableDataSource> | null>;
 export declare function useTableContext<T extends TableDataSource = TableDataSource>(): TableContextValue<T>;
@@ -86,7 +85,7 @@ export interface TableSuperContextValue {
     getResizedColumnWidth?: (key: string) => number | undefined;
     scrollLeft?: number;
     expansionLeftPadding?: number;
-    hasDragHandleFixed?: boolean;
+    hasDragOrPinHandleFixed?: boolean;
 }
 export declare const TableSuperContext: import("react").Context<TableSuperContextValue | null>;
 export declare function useTableSuperContext(): TableSuperContextValue;

package/Table/components/TableActionsCell.js

@@ -4,7 +4,8 @@ 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 { DotHorizontalIcon } from '@mezzanine-ui/icons';
+import Dropdown from '../../Dropdown/Dropdown.js';
 import cx from 'clsx';
 
 const TableActionsCellInner = forwardRef(function TableActionsCell(props, ref) {
@@ -67,10 +68,17 @@ const TableActionsCellInner = forwardRef(function TableActionsCell(props, ref) {
             [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, _d;
+        }, className), onMouseEnter: handleMouseEnter, ref: ref, style: cellStyle, children: jsx("div", { className: cx(tableClasses.cellContent, alignClass), children: jsx("div", { className: tableClasses.actionsCell, children: actionItems.map((item, actionIndex) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
                     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'}-${((_d = (_c = item.icon) === null || _c === void 0 ? void 0 : _c.src) === null || _d === void 0 ? void 0 : _d.name) || 'icon'}-${rowIndex}`));
+                    const baseKey = `${item.name || 'name'}-${((_c = item.icon) === null || _c === void 0 ? void 0 : _c.name) || 'icon'}-${rowIndex}-${actionIndex}`;
+                    if (item.type === 'dropdown') {
+                        const dropdownItem = item;
+                        return (jsx(Dropdown, { type: "default", maxHeight: dropdownItem.maxHeight, onSelect: (option) => dropdownItem.onSelect(option, record, rowIndex), options: dropdownItem.options, placement: (_d = dropdownItem.placement) !== null && _d !== void 0 ? _d : 'bottom-end', children: jsx(Button, { iconType: "icon-only", icon: (_e = dropdownItem === null || dropdownItem === void 0 ? void 0 : dropdownItem.icon) !== null && _e !== void 0 ? _e : DotHorizontalIcon, size: "sub", type: "button", variant: (_f = dropdownItem.variant) !== null && _f !== void 0 ? _f : 'base-text-link', children: dropdownItem.name }) }, baseKey));
+                    }
+                    // Default to button type
+                    const buttonItem = item;
+                    return (jsx(Button, { disabled: isDisabled, icon: buttonItem.icon, iconType: buttonItem.iconType, onClick: () => buttonItem.onClick(record, rowIndex), size: "sub", type: "button", variant: (_g = buttonItem.variant) !== null && _g !== void 0 ? _g : actions.variant, children: buttonItem.name }, baseKey));
                 }) }) }) }));
 });
 const TableActionsCell = memo(TableActionsCellInner);

package/Table/components/TableBody.js

@@ -13,7 +13,7 @@ import Fade from '../../Transition/Fade.js';
 import cx from 'clsx';
 
 const TableBodyInner = forwardRef(function TableBody(_, ref) {
-    const { dataSource, draggable, emptyProps, expansion, loading, scrollContainerRef, selection, size, virtualScrollEnabled, } = useTableContext();
+    const { dataSource, draggable, emptyProps, expansion, isContainerReady, loading, scrollContainerRef, selection, size, virtualScrollEnabled, } = useTableContext();
     const { columns } = useTableDataContext();
     /** Feature: Empty State */
     const isEmpty = useMemo(() => !dataSource.length, [dataSource.length]);
@@ -21,6 +21,7 @@ const TableBodyInner = forwardRef(function TableBody(_, ref) {
     const virtualization = useTableVirtualization({
         dataSource,
         enabled: virtualScrollEnabled,
+        isContainerReady,
         isRowExpanded: expansion === null || expansion === void 0 ? void 0 : expansion.isRowExpanded,
         scrollContainerRef: scrollContainerRef,
     });

package/Table/components/TableBulkActions.js

@@ -20,25 +20,7 @@ function TableBulkActions(props) {
         : `${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, { icon: {
-                        position: 'trailing',
-                        src: CloseIcon,
-                    }, onClick: onClearSelection, size: "sub", type: "button", variant: "inverse", children: label }) }), jsxs("div", { className: tableClasses.bulkActionsActionArea, children: [mainActions.map((action, index) => (jsx(Button, { icon: action.icon
-                            ? {
-                                position: 'leading',
-                                src: action.icon,
-                            }
-                            : undefined, 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, { icon: destructiveAction.icon
-                                    ? {
-                                        position: 'leading',
-                                        src: destructiveAction.icon,
-                                    }
-                                    : undefined, 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", icon: overflowAction.icon
-                                        ? {
-                                            position: 'leading',
-                                            src: overflowAction.icon,
-                                        }
-                                        : undefined, children: overflowAction.label }) })] }))] })] }));
+        }), 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/TableColGroup.d.ts

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