@mezzanine-ui/react 0.13.10 → 0.13.11

package/Table/Table.d.ts

@@ -1,110 +1,110 @@
-import { ReactNode } from 'react';
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
-import { EmptyProps } from '../Empty';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role' | 'draggable'> {
-    /**
-     * customized body className
-     */
-    bodyClassName?: string;
-    /**
-      * customized body row className
-      */
-    bodyRowClassName?: string;
-    /**
-      * Columns of table <br />
-      * `column.render` allowed customizing the column body cell rendering. <br />
-      * `column.renderTitle` allowed customizing the column header cell rendering. <br />
-      * `column.sorter` is the sorting method that you want to apply to your column. <br />
-      * `column.onSorted` is the callback triggered whenever sort icon clicked.
-      */
-    columns: TableColumn<T>[];
-    /**
-      * Custom table components <br />
-      */
-    components?: TableComponents;
-    /**
-      * Data record array to be displayed. <br />
-      * Notice that each source should contain `key` or `id` prop as data primary key.
-      */
-    dataSource: TableDataSource[];
-    /**
-     * Draggable table row. This feature allows sort items by mouse dragging. Not supported when `fetchMore` is enabled and also buggy when use finger touch (mobile device).
-     * When `draggable.enabled` is true, draggable will be enabled.
-     * `draggable.onDragEnd` return new dataSource for you
-     */
-    draggable?: TableDraggable;
-    /**
-      * props exported from `<Empty />` component.
-      */
-    emptyProps?: EmptyProps;
-    /**
-      * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
-      * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
-      */
-    expandable?: Omit<TableExpandable<T>, 'expandedRowRender'> & {
-        expandedRowRender(record: T): ReactNode | ExpandRowBySources;
-    };
-    /**
-     * customized header className
-     */
-    headerClassName?: string;
-    /**
-      * Whether table is loading or not
-      */
-    loading?: boolean;
-    /**
-     * When loading is true, show specific loadingTip
-     * @default '資料載入中...'
-     */
-    loadingTip?: string;
-    /**
-     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
-     * `refresh.onClick` is the callback of the refresh button.
-     */
-    refresh?: TableRefreshType;
-    /**
-      * Enable row selection feature <br />
-      * `rowSelection.selectedRowKey` is the dataSource keys that are currently selected. <br />
-      * `rowSelection.onChange` is the callback when selection changed. <br />
-      * `rowSelection.actions` are the actions that you want to do for selected data.
-      */
-    rowSelection?: TableRowSelection;
-    /**
-     * Enable table scroll feature <br />
-     * `scroll.x` set horizontal scrolling, can also be used to specify the width of the scroll area <br />
-     * `scroll.y` Set vertical scrolling, can also be used to specify the height of the scroll area <br />
-     * `scroll.fixedFirstColumn` set first column fixed when horizontal scrolling.
-     */
-    scroll?: TableScrolling;
-    /**
-     * customize scroll container className
-     */
-    scrollContainerClassName?: string;
-}
-export interface TableWithFetchMore<T> extends TableBaseProps<T> {
-    /**
-     * If `fetchMore.callback` is given, table will automatically trigger it when scrolling position reach end. <br />
-     * If `fetchMore.isReachEnd` is true, table will stop triggering callback. <br />
-     * If `fetchMore.isFetching` is true, a loading spinner will display at the end of table and stop triggering callback.
-     * <br />
-     * Notice that when `fetchMore.isFetching` is `undefined`, table will take control of it when source length changed.
-     */
-    fetchMore?: TableFetchMore;
-    pagination?: undefined;
-}
-export interface TableWithPagination<T> extends TableBaseProps<T> {
-    /**
-     * `pagination.current` is the current page number. (required) <br />
-     * `pagination.onChange` is the callback when page number changed. (required) <br />
-     * `pagination.disableAutoSlicing` set this to true if you don't want auto data slicing. <br />
-     * `pagination.total` is the total amount of your data. (default will be dataSource length) <br />
-     * `pagination.options` is the <Pagination /> component props. <br />
-     * Notice that if `pagination` object is given, table will disable fetchMore and use pagination instead.
-     */
-    pagination?: TablePaginationType;
-    fetchMore?: undefined;
-}
-export declare type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
-declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLTableElement>>;
-export default Table;
+import { ReactNode } from 'react';
+import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
+import { EmptyProps } from '../Empty';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role' | 'draggable'> {
+    /**
+     * customized body className
+     */
+    bodyClassName?: string;
+    /**
+      * customized body row className
+      */
+    bodyRowClassName?: string;
+    /**
+      * Columns of table <br />
+      * `column.render` allowed customizing the column body cell rendering. <br />
+      * `column.renderTitle` allowed customizing the column header cell rendering. <br />
+      * `column.sorter` is the sorting method that you want to apply to your column. <br />
+      * `column.onSorted` is the callback triggered whenever sort icon clicked.
+      */
+    columns: TableColumn<T>[];
+    /**
+      * Custom table components <br />
+      */
+    components?: TableComponents;
+    /**
+      * Data record array to be displayed. <br />
+      * Notice that each source should contain `key` or `id` prop as data primary key.
+      */
+    dataSource: TableDataSource[];
+    /**
+     * Draggable table row. This feature allows sort items by mouse dragging. Not supported when `fetchMore` is enabled and also buggy when use finger touch (mobile device).
+     * When `draggable.enabled` is true, draggable will be enabled.
+     * `draggable.onDragEnd` return new dataSource for you
+     */
+    draggable?: TableDraggable;
+    /**
+      * props exported from `<Empty />` component.
+      */
+    emptyProps?: EmptyProps;
+    /**
+      * When `expandable.rowExpandable` is given, it will control whether row data is expandable or not
+      * `expandable.expandedRowRender` is a callback to helps you decides what data should be rendered.
+      */
+    expandable?: Omit<TableExpandable<T>, 'expandedRowRender'> & {
+        expandedRowRender(record: T): ReactNode | ExpandRowBySources;
+    };
+    /**
+     * customized header className
+     */
+    headerClassName?: string;
+    /**
+      * Whether table is loading or not
+      */
+    loading?: boolean;
+    /**
+     * When loading is true, show specific loadingTip
+     * @default '資料載入中...'
+     */
+    loadingTip?: string;
+    /**
+     * `refresh.show` is true, refresh button will display at the top-start of table. <br />
+     * `refresh.onClick` is the callback of the refresh button.
+     */
+    refresh?: TableRefreshType;
+    /**
+      * Enable row selection feature <br />
+      * `rowSelection.selectedRowKey` is the dataSource keys that are currently selected. <br />
+      * `rowSelection.onChange` is the callback when selection changed. <br />
+      * `rowSelection.actions` are the actions that you want to do for selected data.
+      */
+    rowSelection?: TableRowSelection;
+    /**
+     * Enable table scroll feature <br />
+     * `scroll.x` set horizontal scrolling, can also be used to specify the width of the scroll area <br />
+     * `scroll.y` Set vertical scrolling, can also be used to specify the height of the scroll area <br />
+     * `scroll.fixedFirstColumn` set first column fixed when horizontal scrolling.
+     */
+    scroll?: TableScrolling;
+    /**
+     * customize scroll container className
+     */
+    scrollContainerClassName?: string;
+}
+export interface TableWithFetchMore<T> extends TableBaseProps<T> {
+    /**
+     * If `fetchMore.callback` is given, table will automatically trigger it when scrolling position reach end. <br />
+     * If `fetchMore.isReachEnd` is true, table will stop triggering callback. <br />
+     * If `fetchMore.isFetching` is true, a loading spinner will display at the end of table and stop triggering callback.
+     * <br />
+     * Notice that when `fetchMore.isFetching` is `undefined`, table will take control of it when source length changed.
+     */
+    fetchMore?: TableFetchMore;
+    pagination?: undefined;
+}
+export interface TableWithPagination<T> extends TableBaseProps<T> {
+    /**
+     * `pagination.current` is the current page number. (required) <br />
+     * `pagination.onChange` is the callback when page number changed. (required) <br />
+     * `pagination.disableAutoSlicing` set this to true if you don't want auto data slicing. <br />
+     * `pagination.total` is the total amount of your data. (default will be dataSource length) <br />
+     * `pagination.options` is the <Pagination /> component props. <br />
+     * Notice that if `pagination` object is given, table will disable fetchMore and use pagination instead.
+     */
+    pagination?: TablePaginationType;
+    fetchMore?: undefined;
+}
+export type TableProps<T> = TableWithFetchMore<T> | TableWithPagination<T>;
+declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLTableElement>>;
+export default Table;

package/Table/Table.js

@@ -18,152 +18,152 @@ import { composeRefs } from '../utils/composeRefs.js';
 import Loading from '../Loading/Loading.js';
 import cx from 'clsx';
 
-const Table = forwardRef(function Table(props, ref) {
-    var _a;
-    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, draggable: draggableProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, loadingTip = '資料載入中...', pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, scroll: scrollProp, scrollContainerClassName, ...rest } = props;
-    const bodyRef = useRef(null);
-    /** Feature rowSelection */
-    const [selectedRowKeys, setSelectedRowKey] = useTableRowSelection({
-        selectedRowKey: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.selectedRowKey,
-        onChange: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.onChange,
-        dataSource: dataSourceProp,
-    });
-    const rowSelection = useMemo(() => (rowSelectionProp ? {
-        selectedRowKeys,
-        onChange: setSelectedRowKey,
-        actions: rowSelectionProp.actions,
-    } : undefined), [
-        rowSelectionProp,
-        selectedRowKeys,
-        setSelectedRowKey,
-    ]);
-    /** Feature sorting */
-    const [dataSource, onSort, { sortedOn, sortedType, onResetAll, setDataSource, }] = useTableSorting({
-        dataSource: dataSourceProp,
-    });
-    /** Feature loading */
-    const [loading, setLoading] = useTableLoading({
-        loading: loadingProp,
-    });
-    /** Feature fetchMore */
-    const { fetchMore: onFetchMore, isFetching, isReachEnd, } = useTableFetchMore({
-        callback: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.callback,
-        dataSource,
-        /** when pagination is given, fetchMore feature should be disabled */
-        disabled: !!paginationProp,
-        isReachEnd: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isReachEnd,
-        isFetching: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isFetching,
-    });
-    /** Feature refresh */
-    const isRefreshShow = useMemo(() => {
-        var _a;
-        return (
-        /** @default false */
-        (_a = refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show) !== null && _a !== void 0 ? _a : false);
-    }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
-    /** Feature Scrolling */
-    const [scrollBody, scrollElement, isHorizontalScrolling] = useTableScroll({
-        onFetchMore,
-        loading,
-        scrollBarSize: 4,
-    });
-    /** Feature drag and drop */
-    const { draggingId, onBeforeDragStart, onDragEnd, } = useTableDraggable({
-        dataSource,
-        setDataSource,
-        draggable: draggableProp,
-    });
-    /** context */
-    const tableContextValue = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return ({
-            emptyProps,
-            rowSelection,
-            isHorizontalScrolling,
-            sorting: {
-                onSort,
-                onResetAll,
-                sortedOn,
-                sortedType,
-            },
-            loading,
-            setLoading,
-            expanding: expandableProp,
-            fetchMore: onFetchMore ? {
-                onFetchMore,
-                isFetching,
-                isReachEnd,
-            } : undefined,
-            pagination: paginationProp ? {
-                current: paginationProp.current,
-                disableAutoSlicing: (_a = paginationProp.disableAutoSlicing) !== null && _a !== void 0 ? _a : false,
-                onChange: paginationProp.onChange,
-                total: (_b = paginationProp.total) !== null && _b !== void 0 ? _b : dataSource.length,
-                options: {
-                    ...((_c = paginationProp.options) !== null && _c !== void 0 ? _c : {}),
-                    boundaryCount: (_e = (_d = paginationProp.options) === null || _d === void 0 ? void 0 : _d.boundaryCount) !== null && _e !== void 0 ? _e : 1,
-                    pageSize: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.pageSize) !== null && _g !== void 0 ? _g : 10,
-                    siblingCount: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.siblingCount) !== null && _j !== void 0 ? _j : 1,
-                },
-            } : undefined,
-            scroll: scrollProp,
-            draggable: draggableProp ? {
-                ...draggableProp,
-                draggingId,
-            } : undefined,
-        });
-    }, [
-        dataSource,
-        emptyProps,
-        expandableProp,
-        rowSelection,
-        onSort,
-        onResetAll,
-        sortedOn,
-        sortedType,
-        loading,
-        setLoading,
-        onFetchMore,
-        isFetching,
-        isReachEnd,
-        paginationProp,
-        isHorizontalScrolling,
-        scrollProp,
-        draggableProp,
-        draggingId,
-    ]);
-    const tableDataContextValue = useMemo(() => ({
-        columns,
-        dataSource,
-    }), [columns, dataSource]);
-    const tableComponentContextValue = useMemo(() => {
-        var _a;
-        return ({
-            bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
-        });
-    }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
-    const tableRefs = useComposeRefs([ref, scrollBody.target]);
-    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
-                            className: tableClasses.loading,
-                        }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll ? {
-                                            '--table-scroll-x': tableContextValue.scroll.x
-                                                ? `${tableContextValue.scroll.x}px`
-                                                : '100%',
-                                            '--table-scroll-y': tableContextValue.scroll.y
-                                                ? `${tableContextValue.scroll.y}px`
-                                                : 'unset',
-                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
-                                                width: '100%',
-                                                height: '100%',
-                                                position: 'relative',
-                                            }, children: jsx("div", { ref: scrollElement.ref, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, className: "mzn-table-scroll-bar", children: jsx("div", { style: {
-                                                        width: `${scrollElement.scrollBarSize}px`,
-                                                        height: '100%',
-                                                        borderRadius: '10px',
-                                                        backgroundColor: '#7d7d7d',
-                                                        transition: '0.1s',
-                                                    } }) }) }) })] })) }) }) }) }) }) }));
-});
+const Table = forwardRef(function Table(props, ref) {
+    var _a;
+    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, draggable: draggableProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, loadingTip = '資料載入中...', pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, scroll: scrollProp, scrollContainerClassName, ...rest } = props;
+    const bodyRef = useRef(null);
+    /** Feature rowSelection */
+    const [selectedRowKeys, setSelectedRowKey] = useTableRowSelection({
+        selectedRowKey: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.selectedRowKey,
+        onChange: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.onChange,
+        dataSource: dataSourceProp,
+    });
+    const rowSelection = useMemo(() => (rowSelectionProp ? {
+        selectedRowKeys,
+        onChange: setSelectedRowKey,
+        actions: rowSelectionProp.actions,
+    } : undefined), [
+        rowSelectionProp,
+        selectedRowKeys,
+        setSelectedRowKey,
+    ]);
+    /** Feature sorting */
+    const [dataSource, onSort, { sortedOn, sortedType, onResetAll, setDataSource, }] = useTableSorting({
+        dataSource: dataSourceProp,
+    });
+    /** Feature loading */
+    const [loading, setLoading] = useTableLoading({
+        loading: loadingProp,
+    });
+    /** Feature fetchMore */
+    const { fetchMore: onFetchMore, isFetching, isReachEnd, } = useTableFetchMore({
+        callback: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.callback,
+        dataSource,
+        /** when pagination is given, fetchMore feature should be disabled */
+        disabled: !!paginationProp,
+        isReachEnd: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isReachEnd,
+        isFetching: fetchMoreProp === null || fetchMoreProp === void 0 ? void 0 : fetchMoreProp.isFetching,
+    });
+    /** Feature refresh */
+    const isRefreshShow = useMemo(() => {
+        var _a;
+        return (
+        /** @default false */
+        (_a = refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show) !== null && _a !== void 0 ? _a : false);
+    }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
+    /** Feature Scrolling */
+    const [scrollBody, scrollElement, isHorizontalScrolling] = useTableScroll({
+        onFetchMore,
+        loading,
+        scrollBarSize: 4,
+    });
+    /** Feature drag and drop */
+    const { draggingId, onBeforeDragStart, onDragEnd, } = useTableDraggable({
+        dataSource,
+        setDataSource,
+        draggable: draggableProp,
+    });
+    /** context */
+    const tableContextValue = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return ({
+            emptyProps,
+            rowSelection,
+            isHorizontalScrolling,
+            sorting: {
+                onSort,
+                onResetAll,
+                sortedOn,
+                sortedType,
+            },
+            loading,
+            setLoading,
+            expanding: expandableProp,
+            fetchMore: onFetchMore ? {
+                onFetchMore,
+                isFetching,
+                isReachEnd,
+            } : undefined,
+            pagination: paginationProp ? {
+                current: paginationProp.current,
+                disableAutoSlicing: (_a = paginationProp.disableAutoSlicing) !== null && _a !== void 0 ? _a : false,
+                onChange: paginationProp.onChange,
+                total: (_b = paginationProp.total) !== null && _b !== void 0 ? _b : dataSource.length,
+                options: {
+                    ...((_c = paginationProp.options) !== null && _c !== void 0 ? _c : {}),
+                    boundaryCount: (_e = (_d = paginationProp.options) === null || _d === void 0 ? void 0 : _d.boundaryCount) !== null && _e !== void 0 ? _e : 1,
+                    pageSize: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.pageSize) !== null && _g !== void 0 ? _g : 10,
+                    siblingCount: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.siblingCount) !== null && _j !== void 0 ? _j : 1,
+                },
+            } : undefined,
+            scroll: scrollProp,
+            draggable: draggableProp ? {
+                ...draggableProp,
+                draggingId,
+            } : undefined,
+        });
+    }, [
+        dataSource,
+        emptyProps,
+        expandableProp,
+        rowSelection,
+        onSort,
+        onResetAll,
+        sortedOn,
+        sortedType,
+        loading,
+        setLoading,
+        onFetchMore,
+        isFetching,
+        isReachEnd,
+        paginationProp,
+        isHorizontalScrolling,
+        scrollProp,
+        draggableProp,
+        draggingId,
+    ]);
+    const tableDataContextValue = useMemo(() => ({
+        columns,
+        dataSource,
+    }), [columns, dataSource]);
+    const tableComponentContextValue = useMemo(() => {
+        var _a;
+        return ({
+            bodyCell: (_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell,
+        });
+    }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
+    const tableRefs = useComposeRefs([ref, scrollBody.target]);
+    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsx(DragDropContext, { onBeforeDragStart: onBeforeDragStart, onDragEnd: onDragEnd, children: jsx(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
+                            className: tableClasses.loading,
+                        }, children: jsx(Droppable, { droppableId: "mzn-table-dnd", isDropDisabled: !(draggableProp === null || draggableProp === void 0 ? void 0 : draggableProp.enabled), children: (provided) => (jsxs(Fragment, { children: [jsx("div", { ...provided.droppableProps, ref: composeRefs([scrollBody.ref, provided.innerRef]), className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll ? {
+                                            '--table-scroll-x': tableContextValue.scroll.x
+                                                ? `${tableContextValue.scroll.x}px`
+                                                : '100%',
+                                            '--table-scroll-y': tableContextValue.scroll.y
+                                                ? `${tableContextValue.scroll.y}px`
+                                                : 'unset',
+                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { "aria-label": "Refresh", children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, "aria-label": "Scroll Track", style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
+                                                width: '100%',
+                                                height: '100%',
+                                                position: 'relative',
+                                            }, children: jsx("div", { ref: scrollElement.ref, "aria-label": "Scroll Bar", onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, className: "mzn-table-scroll-bar", children: jsx("div", { style: {
+                                                        width: `${scrollElement.scrollBarSize}px`,
+                                                        height: '100%',
+                                                        borderRadius: '10px',
+                                                        backgroundColor: '#7d7d7d',
+                                                        transition: '0.1s',
+                                                    } }) }) }) })] })) }) }) }) }) }) }));
+});
 var Table$1 = Table;
 
 export { Table$1 as default };

package/Table/TableBody.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBodyProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * customize row className
-     */
-    rowClassName?: string;
-}
-declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
-export default TableBody;
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableBodyProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * customize row className
+     */
+    rowClassName?: string;
+}
+declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export default TableBody;

package/Table/TableBody.js

@@ -7,19 +7,19 @@ import Loading from '../Loading/Loading.js';
 import Empty from '../Empty/Empty.js';
 import cx from 'clsx';
 
-const TableBody = forwardRef(function TableBody(props, ref) {
-    const { className, rowClassName, ...rest } = props;
-    const { dataSource = [], } = useContext(TableDataContext) || {};
-    const { emptyProps, fetchMore, pagination, } = useContext(TableContext) || {};
-    /** customizing empty */
-    const { className: emptyComponentClassName = '', children: emptyComponentChildren = '查無資料', fullHeight: emptyComponentFullHeight = true, ...restEmptyProps } = emptyProps || {};
-    /** pagination feature */
-    const { current: currentPage, disableAutoSlicing, total, options: paginationOptions, } = pagination || {};
-    const currentStartCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage ? ((paginationOptions.pageSize) * (currentPage - 1)) : 0;
-    const currentEndCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage && total ? (Math.min(((paginationOptions.pageSize) * currentPage), total)) : 0;
-    const currentDataSource = pagination && !disableAutoSlicing ? (dataSource.slice(currentStartCount, currentEndCount)) : dataSource;
-    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { children: jsx(Loading, { loading: true }) }) })) : null] }));
-});
+const TableBody = forwardRef(function TableBody(props, ref) {
+    const { className, rowClassName, ...rest } = props;
+    const { dataSource = [], } = useContext(TableDataContext) || {};
+    const { emptyProps, fetchMore, pagination, } = useContext(TableContext) || {};
+    /** customizing empty */
+    const { className: emptyComponentClassName = '', children: emptyComponentChildren = '查無資料', fullHeight: emptyComponentFullHeight = true, ...restEmptyProps } = emptyProps || {};
+    /** pagination feature */
+    const { current: currentPage, disableAutoSlicing, total, options: paginationOptions, } = pagination || {};
+    const currentStartCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage ? ((paginationOptions.pageSize) * (currentPage - 1)) : 0;
+    const currentEndCount = (paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSize) && currentPage && total ? (Math.min(((paginationOptions.pageSize) * currentPage), total)) : 0;
+    const currentDataSource = pagination && !disableAutoSlicing ? (dataSource.slice(currentStartCount, currentEndCount)) : dataSource;
+    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData, rowIndex: index }, (rowData.key || rowData.id)))) : (jsx("tr", { children: jsx("td", { children: jsx(Empty, { ...restEmptyProps, className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight, children: emptyComponentChildren }) }) })), (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("tr", { className: tableClasses.bodyFetchMore, children: jsx("td", { "aria-label": "Loading", children: jsx(Loading, { loading: true }) }) })) : null] }));
+});
 var TableBody$1 = TableBody;
 
 export { TableBody$1 as default };

package/Table/TableBodyRow.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { TableDataSource } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBodyRowProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * table body row dataSource
-     */
-    rowData: TableDataSource;
-    rowIndex: number;
-}
-declare const TableBodyRow: import("react").ForwardRefExoticComponent<TableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
-export default TableBodyRow;
+/// <reference types="react" />
+import { TableDataSource } from '@mezzanine-ui/core/table';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableBodyRowProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * table body row dataSource
+     */
+    rowData: TableDataSource;
+    rowIndex: number;
+}
+declare const TableBodyRow: import("react").ForwardRefExoticComponent<TableBodyRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+export default TableBodyRow;