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

package/PageToolbar/PageToolbar.d.ts

@@ -62,9 +62,7 @@ export type PageToolbarProps = Omit<NativeElementPropsWithoutKeyAndRef<'div'>, '
      * They usually appear as smaller buttons with only an icon and no text.
      */
     utilities?: (ButtonProps & {
-        icon: {
-            src: IconDefinition;
-        };
+        icon: IconDefinition;
     })[];
 };
 /**
@@ -106,9 +104,7 @@ declare const PageToolbar: import("react").ForwardRefExoticComponent<Omit<Native
      * They usually appear as smaller buttons with only an icon and no text.
      */
     utilities?: (ButtonProps & {
-        icon: {
-            src: IconDefinition;
-        };
+        icon: IconDefinition;
     })[];
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default PageToolbar;

package/PageToolbar/utils.js

@@ -45,12 +45,8 @@ const renderFilterProp = (prop, size) => {
 const renderIconButtonWithProps = (child, size) => {
     const { icon } = child.props;
     return cloneElement(child, {
-        icon: icon
-            ? {
-                ...icon,
-                position: 'icon-only',
-            }
-            : undefined,
+        icon: icon,
+        iconType: icon ? 'icon-only' : undefined,
         size,
         variant: 'base-secondary',
     });
@@ -58,10 +54,7 @@ const renderIconButtonWithProps = (child, size) => {
 const renderIconButtonsProp = (utilities, size) => {
     const result = [];
     utilities === null || utilities === void 0 ? void 0 : utilities.forEach((buttonProps) => {
-        result.push(jsx(Button, { ...buttonProps, size: size, icon: {
-                ...buttonProps.icon,
-                position: 'icon-only',
-            }, variant: "base-secondary" }));
+        result.push(jsx(Button, { ...buttonProps, size: size, icon: buttonProps.icon, iconType: buttonProps.icon ? 'icon-only' : undefined, variant: "base-secondary" }));
     });
     return result;
 };
@@ -94,7 +87,6 @@ const resolvePageToolbarChild = (children, size) => {
     if (children) {
         const flatChildren = flattenChildren(children);
         Children.forEach(flatChildren, (child) => {
-            var _a;
             if (!isValidElement(child)) {
                 return;
             }
@@ -112,7 +104,7 @@ const resolvePageToolbarChild = (children, size) => {
             }
             // is utilities (icon button)
             else if (type === Button &&
-                ((_a = props.icon) === null || _a === void 0 ? void 0 : _a.position) === 'icon-only') {
+                props.iconType === 'icon-only') {
                 utilities.push(renderIconButtonWithProps(child, size));
             }
             // is actions (normal button)

package/Select/index.d.ts

@@ -12,5 +12,3 @@ export { default as OptionGroup } from '../Menu/MenuItemGroup';
 export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
 export type { TreeSelectProps } from './TreeSelect';
 export { default as TreeSelect } from './TreeSelect';
-export type { AutoCompleteProps } from './AutoComplete';
-export { default as AutoComplete } from './AutoComplete';

package/Select/index.js

@@ -5,4 +5,3 @@ export { default } from './Select.js';
 export { default as Option } from './Option.js';
 export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
 export { default as TreeSelect } from './TreeSelect.js';
-export { default as AutoComplete } from './AutoComplete.js';

package/Slider/useSlider.js

@@ -1,4 +1,4 @@
-import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, sortSliderValue, findClosetValueIndex, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
+import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, findClosetValueIndex, sortSliderValue, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
 import { useRef, useState } from 'react';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';
 

package/Table/Table.d.ts

@@ -1,17 +1,25 @@
-import { TableSize, type HighlightMode, type TableColumn, type TableDataSource, type TableDraggable, type TableExpandable, type TableRowSelection, type TableScroll } from '@mezzanine-ui/core/table';
+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 './TableContext';
+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'> {
-    /** Column configuration */
-    columns: TableColumn<T>[];
     /** Data source */
     dataSource: T[];
     /** Props for Empty component when no data */
-    emptyProps?: EmptyProps;
+    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'
      */
@@ -20,23 +28,22 @@ export interface TableBaseProps<T extends TableDataSource = TableDataSource> ext
     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;
-    /**
-     * Whether columns are resizable by user interaction
-     * @default false
-     */
-    resizable?: boolean;
     /**
      * 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
@@ -49,12 +56,42 @@ export interface TableBaseProps<T extends TableDataSource = TableDataSource> ext
     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 interface TableVirtualizedProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+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 */
@@ -62,22 +99,23 @@ export interface TableVirtualizedProps<T extends TableDataSource = TableDataSour
         virtualized: true;
         y: number | string;
     };
-}
+};
 /**
  * Props when virtualized scrolling is disabled or not specified.
  * Draggable is allowed in this mode.
  */
-export interface TableNonVirtualizedProps<T extends TableDataSource = TableDataSource> extends TableBaseProps<T> {
+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.
+ * 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>;
 /**

package/Table/Table.js

@@ -1,36 +1,37 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo, useState, useCallback } from 'react';
-import { tableClasses } from '@mezzanine-ui/core/table';
+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 { DragDropContext, Droppable } from '@hello-pangea/dnd';
-import { TableContext, TableDataContext, TableSuperContext } from './TableContext.js';
+import { TableSuperContext, TableContext, TableDataContext } from './TableContext.js';
 import { TableBody } from './components/TableBody.js';
 import { TableColGroup } from './components/TableColGroup.js';
 import { TableHeader } from './components/TableHeader.js';
 import { TablePagination } from './components/TablePagination.js';
-import { useTableColumns } from './hooks/useTableColumns.js';
+import { useTableResizedColumns } from './hooks/useTableResizedColumns.js';
 import { useTableExpansion } from './hooks/useTableExpansion.js';
 import { useTableFixedOffsets } from './hooks/useTableFixedOffsets.js';
 import { useTableScroll } from './hooks/useTableScroll.js';
 import { useTableSelection } from './hooks/useTableSelection.js';
 import { useTableSorting } from './hooks/useTableSorting.js';
-import { composeRefs } from '../utils/composeRefs.js';
 import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
 import { spacingPrefix } from '@mezzanine-ui/system/spacing';
+import TableBulkActions from './components/TableBulkActions.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import cx from 'clsx';
 
 function TableInner(props, ref) {
-    const { className, columns, dataSource, draggable, emptyProps, expandable, highlight = 'row', loading = false, loadingRowsCount = 10, nested = false, pagination, resizable = false, rowHeightPreset = 'base', rowSelection, scroll, showHeader = true, size = 'main', sticky = true, style, transitionState, ...restProps } = props;
+    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 hostRef = useRef(null);
-    const scrollContainerRef = useRef(null);
-    const tableRef = useRef(null);
-    // mock loading dataSource
+    const composedHostRef = useComposeRefs([ref, hostRef]);
+    /** Feature: Loading */
     const dataSourceForRender = loading
         ? Array.from({ length: Math.max(loadingRowsCount, 1) }).map((_, idx) => ({
-            key: idx,
+            key: `${idx}`,
         }))
         : dataSource;
-    // get row height from preset
+    /** Feature: Row Height Preset */
     const rowHeight = useMemo(() => {
         switch (rowHeightPreset) {
             case 'condensed':
@@ -52,25 +53,55 @@ function TableInner(props, ref) {
                     : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimal`);
         }
     }, [rowHeightPreset, size]);
-    // Highlight state for hover effects
+    /** Feature: Highlight */
     const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
     const [hoveredColumnIndex, setHoveredColumnIndex] = useState(null);
     const setHoveredCell = useCallback((rowIndex, columnIndex) => {
         setHoveredRowIndex(rowIndex);
         setHoveredColumnIndex(columnIndex);
     }, []);
-    // Hooks
+    const highlightValue = useMemo(() => ({
+        columnIndex: hoveredColumnIndex,
+        mode: highlight,
+        rowIndex: hoveredRowIndex,
+        setHoveredCell,
+    }), [highlight, hoveredColumnIndex, hoveredRowIndex, setHoveredCell]);
+    /** Feature: sorting */
     const sortingState = useTableSorting({
         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]);
+    /** Feature: Row selection */
     const selectionState = useTableSelection({
         dataSource,
         rowSelection,
     });
+    /** Feature: Expansion */
     const expansionState = useTableExpansion({
         expandable,
         hasDragHandle: !!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled),
     });
+    /** Feature: Column resized */
+    const columnState = useTableResizedColumns();
+    /** Feature: Scroll and dimensions calculation */
+    const { containerWidth, handleScroll, isScrollingHorizontally, scrollLeft, containerRef: scrollContainerRef, setContainerRef, } = 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),
@@ -79,50 +110,48 @@ function TableInner(props, ref) {
         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 columnState = useTableColumns({
-        actionConfig,
-        columns,
-    });
-    const scrollState = useTableScroll({
-        enabled: !nested,
-    });
-    // Fixed column offset calculations
     const fixedOffsetsState = useTableFixedOffsets({
         actionConfig,
-        columns: columns,
+        columns: columnsWithActions,
         getResizedColumnWidth: columnState.getResizedColumnWidth,
     });
-    // Stabilize draggable object
-    const draggableValue = useMemo(() => draggable
+    /** Feature: Drag n Drop */
+    const handleDragEnd = useCallback((result) => {
+        var _a;
+        if (!result.destination || !draggable)
+            return;
+        const sourceIndex = result.source.index;
+        const destIndex = result.destination.index;
+        if (sourceIndex === destIndex)
+            return;
+        const newData = [...dataSource];
+        const [removed] = newData.splice(sourceIndex, 1);
+        newData.splice(destIndex, 0, removed);
+        (_a = draggable.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(draggable, newData, {
+            draggingId: result.draggableId,
+            fromIndex: sourceIndex,
+            toIndex: destIndex,
+        });
+    }, [dataSource, draggable]);
+    const draggableState = useMemo(() => draggable
         ? {
-            draggingId: null,
-            enabled: true,
+            enabled: draggable.enabled,
             fixed: draggable.fixed,
         }
         : undefined, [draggable]);
-    // Stabilize highlight object
-    const highlightValue = useMemo(() => ({
-        columnIndex: hoveredColumnIndex,
-        mode: highlight,
-        rowIndex: hoveredRowIndex,
-        setHoveredCell,
-    }), [highlight, hoveredColumnIndex, hoveredRowIndex, setHoveredCell]);
-    // Determine if virtual scrolling should be enabled
-    // Requires scroll.virtualized to be true AND scroll.y to be set
-    const virtualScrollEnabled = !!((scroll === null || scroll === void 0 ? void 0 : scroll.virtualized) && (scroll === null || scroll === void 0 ? void 0 : scroll.y));
-    // Context value - cast to any to avoid complex generic issues
+    /** Context values */
     const contextValue = useMemo(() => ({
+        actions: actions,
         columnState,
-        columns: columns,
         dataSource: dataSourceForRender,
-        draggable: draggableValue,
+        draggable: draggableState,
         emptyProps,
         expansion: expansionState,
         fixedOffsets: fixedOffsetsState,
         resizable,
         rowHeight,
         highlight: highlightValue,
-        isScrollingHorizontally: scrollState.isScrollingHorizontally,
+        isScrollingHorizontally: isScrollingHorizontally,
         isInsideExpandedContentArea: nested,
         loading,
         pagination: pagination || undefined,
@@ -130,14 +159,16 @@ function TableInner(props, ref) {
         scrollContainerRef,
         selection: selectionState,
         size,
+        separatorAtRowIndexes,
         sorting: sortingState,
         transitionState,
         virtualScrollEnabled,
+        zebraStriping,
     }), [
+        actions,
         columnState,
-        columns,
         dataSourceForRender,
-        draggableValue,
+        draggableState,
         emptyProps,
         expansionState,
         fixedOffsetsState,
@@ -148,84 +179,149 @@ function TableInner(props, ref) {
         pagination,
         scroll,
         scrollContainerRef,
-        scrollState.isScrollingHorizontally,
+        isScrollingHorizontally,
         selectionState,
         size,
         sortingState,
         transitionState,
         virtualScrollEnabled,
+        zebraStriping,
+        separatorAtRowIndexes,
         nested,
     ]);
     const dataContextValue = useMemo(() => ({
-        columns: columns,
+        columns: columnsWithActions,
         dataSource,
-    }), [columns, dataSource]);
+    }), [columnsWithActions, dataSource]);
     const superContextValue = useMemo(() => {
         var _a;
         return ({
-            containerWidth: scrollState.containerWidth,
+            containerWidth: containerWidth,
             getResizedColumnWidth: columnState.getResizedColumnWidth,
-            scrollLeft: scrollState.scrollLeft,
+            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,
         });
     }, [
-        scrollState.scrollLeft,
+        scrollLeft,
         expansionState === null || expansionState === void 0 ? void 0 : expansionState.expansionLeftPadding,
-        scrollState.containerWidth,
+        containerWidth,
         columnState.getResizedColumnWidth,
+        draggable === null || draggable === void 0 ? void 0 : draggable.enabled,
+        draggable === null || draggable === void 0 ? void 0 : draggable.fixed,
     ]);
-    // Drag and drop handler
-    const handleDragEnd = useCallback((result) => {
-        var _a;
-        if (!result.destination || !draggable)
-            return;
-        const sourceIndex = result.source.index;
-        const destIndex = result.destination.index;
-        if (sourceIndex === destIndex)
-            return;
-        const newData = [...dataSource];
-        const [removed] = newData.splice(sourceIndex, 1);
-        newData.splice(destIndex, 0, removed);
-        (_a = draggable.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(draggable, newData);
-    }, [dataSource, draggable]);
-    const sizeClass = size === 'sub' ? tableClasses.sub : tableClasses.main;
-    // Scroll container style
+    /** Computed styles */
     const scrollContainerStyle = useMemo(() => {
         const containerStyle = {};
         if (scroll === null || scroll === void 0 ? void 0 : scroll.y) {
             containerStyle.maxHeight = scroll.y;
-            containerStyle.overflowY = 'auto';
-        }
-        if (scroll === null || scroll === void 0 ? void 0 : scroll.x) {
-            containerStyle.overflowX = 'auto';
         }
         if (nested) {
             containerStyle.position = 'unset';
             containerStyle.overflow = 'unset';
         }
+        if (minHeight) {
+            containerStyle.minHeight = minHeight;
+        }
         return containerStyle;
-    }, [scroll === null || scroll === void 0 ? void 0 : scroll.x, scroll === null || scroll === void 0 ? void 0 : scroll.y, nested]);
-    // Table style with min-width for horizontal scroll
+    }, [scroll === null || scroll === void 0 ? void 0 : scroll.y, nested, minHeight]);
     const tableStyle = useMemo(() => {
         const baseStyle = {};
-        if (scroll === null || scroll === void 0 ? void 0 : scroll.x) {
-            baseStyle.minWidth = scroll.x;
+        if (fullWidth) {
             baseStyle.width = '100%';
         }
         return baseStyle;
-    }, [scroll === null || scroll === void 0 ? void 0 : scroll.x]);
-    const { setContainerRef } = scrollState;
-    const handleScrollContainerRef = useCallback((element) => {
-        scrollContainerRef.current = element;
+    }, [fullWidth]);
+    /** Scroll Container Ref */
+    const droppableInnerRefSetter = useRef(null);
+    const composedScrollContainerRef = useCallback((element) => {
         setContainerRef(element);
+        if (droppableInnerRefSetter.current) {
+            droppableInnerRefSetter.current(element);
+        }
     }, [setContainerRef]);
-    const mainTable = (jsx(TableContext.Provider, { value: contextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsxs("div", { className: cx(tableClasses.host, className), ref: ref, style: style, ...restProps, children: [jsx("div", { className: cx(tableClasses.scrollContainer, {
-                            [tableClasses.sticky]: !!sticky,
-                        }), onScroll: scrollState.handleScroll, ref: handleScrollContainerRef, style: scrollContainerStyle, children: jsxs("table", { className: cx(tableClasses.root, sizeClass), ref: tableRef, style: tableStyle, children: [jsx(TableColGroup, {}), showHeader && jsx(TableHeader, {}), jsx(TableBody, {})] }) }), pagination && jsx(TablePagination, { ...pagination })] }) }) }));
+    /** Feature: bulk actions */
+    const bulkActionsConfig = useMemo(() => {
+        if (!selectionState || selectionState.mode !== 'checkbox') {
+            return null;
+        }
+        const checkboxConfig = selectionState.config;
+        return {
+            enabled: !!checkboxConfig.bulkActions && selectionState.selectedRowKeys.length,
+            bulkActions: checkboxConfig.bulkActions,
+            onClearSelection: () => checkboxConfig.onChange([], null, []),
+            selectedRowKeys: selectionState.selectedRowKeys,
+        };
+    }, [selectionState]);
+    const [isBulkActionsFixed, setIsBulkActionsFixed] = useState(false);
+    useEffect(() => {
+        if (!(bulkActionsConfig === null || bulkActionsConfig === void 0 ? void 0 : bulkActionsConfig.enabled)) {
+            return;
+        }
+        const calculateFixedState = () => {
+            const { current: hostEl } = hostRef;
+            if (!hostEl)
+                return;
+            const hostRect = hostEl.getBoundingClientRect();
+            const paginationHeightWithPx = hostEl.style.getPropertyValue('--mzn-table-pagination-height');
+            const paginationHeight = paginationHeightWithPx
+                ? Number(paginationHeightWithPx.replace('px', ''))
+                : 0;
+            const viewportHeight = window.innerHeight;
+            const bottomSpacing = getNumericCSSVariablePixelValue(`--${spacingPrefix}-padding-vertical-relaxed`);
+            const bulkActionsFixedBottom = viewportHeight - bottomSpacing;
+            const shouldBeFixed = hostRect.bottom > viewportHeight + paginationHeight &&
+                hostRect.top < bulkActionsFixedBottom;
+            setIsBulkActionsFixed(shouldBeFixed);
+            if (shouldBeFixed) {
+                /** Table 不一定在 viewport 中間 */
+                const centerLeft = hostRect.left + hostRect.width / 2;
+                hostEl.style.setProperty('--mzn-bulk-actions-fixed-left', `${centerLeft}px`);
+            }
+        };
+        /** @NOTE 如果覺得位置更新的不夠即時，再把 throttle 拔掉 (目前先以減少觸發次數做效能優化) */
+        const throttledCalculateFixedState = throttle(calculateFixedState, 50);
+        calculateFixedState();
+        window.addEventListener('scroll', throttledCalculateFixedState, false);
+        window.addEventListener('resize', throttledCalculateFixedState, false);
+        return () => {
+            throttledCalculateFixedState.cancel();
+            window.removeEventListener('scroll', throttledCalculateFixedState, false);
+            window.removeEventListener('resize', throttledCalculateFixedState, false);
+        };
+    }, [bulkActionsConfig === null || bulkActionsConfig === void 0 ? void 0 : bulkActionsConfig.enabled]);
+    /** Get Dynamic Pagination Height */
+    const paginationRef = useRef(null);
+    useEffect(() => {
+        const { current: paginationEl } = paginationRef;
+        if (paginationEl) {
+            const resizeObserver = new ResizeObserver(() => {
+                var _a;
+                (_a = hostRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--mzn-table-pagination-height', `${paginationEl.offsetHeight}px`);
+            });
+            resizeObserver.observe(paginationEl);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+        return;
+    }, []);
+    /** Main render */
+    const renderMainTable = (droppableProvided) => {
+        if (droppableProvided) {
+            droppableInnerRefSetter.current = droppableProvided.innerRef;
+        }
+        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] }) }) }));
+    };
     if (nested) {
-        return mainTable;
+        return renderMainTable();
     }
-    return (jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(Droppable, { droppableId: "mzn-table-v2-dnd", children: (provided) => (jsxs("div", { ...provided.droppableProps, ref: composeRefs([hostRef, provided.innerRef]), children: [jsx(TableSuperContext.Provider, { value: superContextValue, children: mainTable }), provided.placeholder] })) }) }));
+    return (jsx(DragDropContext, { onDragEnd: handleDragEnd, children: jsx(Droppable, { droppableId: "mzn-table-dnd", children: (provided) => (jsx(TableSuperContext.Provider, { value: superContextValue, children: renderMainTable(provided) })) }) }));
 }
 /**
  * Table is a high-performance data table component with support for