@mezzanine-ui/react 0.6.2 → 0.7.1

package/Slider/Slider.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
-import { isRangeSlider, sortSliderValue, sliderClasses, roundToStep } from '@mezzanine-ui/core/slider';
+import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, sortSliderValue, sliderClasses, roundToStep } from '@mezzanine-ui/core/slider';
 import { useSlider } from './useSlider.js';
 import Input from '../Input/Input.js';
 import Tooltip from '../Tooltip/Tooltip.js';
@@ -36,6 +36,22 @@ function SliderComponent(props) {
         }
         return `${value[1]}`;
     });
+    useEffect(() => {
+        if (max > min) {
+            if (isRangeSlider(value)) {
+                if ((value[0] > max && value[1] > max) ||
+                    (value[0] < min && value[1] < min) ||
+                    value[0] < min ||
+                    value[1] > max) {
+                    onChange(fixRangeSliderValue(value, min, max));
+                }
+                return;
+            }
+            if (value < min || value > max) {
+                onChange(fixSingleSliderValue(value, min, max));
+            }
+        }
+    }, [min, max, onChange, value]);
     useEffect(() => {
         if (withInput) {
             if (isRangeSlider(value)) {
@@ -167,6 +183,7 @@ const Slider = forwardRef((props, ref) => {
         return (jsx(SliderComponent, Object.assign({}, props, { innerRef: ref }), void 0));
     }
     return (jsx(SliderComponent, Object.assign({}, props, { innerRef: ref }), void 0));
-});
+});
+var Slider$1 = Slider;
 
-export default Slider;
+export { Slider$1 as default };

package/Slider/useSlider.js

@@ -1,4 +1,4 @@
-import { toSliderCssVars, getPercentage, isRangeSlider, 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';
 
@@ -13,12 +13,14 @@ function useSlider(props) {
         }
         return isRangeSlider(value) ? Math.abs(1 - value.indexOf(anchorValue)) : undefined;
     }
+    const fixedValue = isRangeSlider(value) ? fixRangeSliderValue(value, min, max)
+        : fixSingleSliderValue(value, min, max);
     const cssVars = toSliderCssVars({
-        trackWidth: getPercentage(isRangeSlider(value) ? Math.abs(value[0] - value[1]) : value, min, max),
-        trackPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.min(...value) - min) : 0, min, max),
-        handlerPosition: getPercentage(isRangeSlider(value) ? 0 : value, min, max),
-        handlerStartPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.min(...value) - min) : value, min, max),
-        handlerEndPosition: getPercentage(isRangeSlider(value) ? Math.abs(Math.max(...value) - min) : value, min, max),
+        trackWidth: getPercentage(isRangeSlider(fixedValue) ? Math.abs(fixedValue[0] - fixedValue[1]) : fixedValue - min, min, max),
+        trackPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : 0, min, max),
+        handlerPosition: getPercentage(isRangeSlider(fixedValue) ? 0 : fixedValue - min, min, max),
+        handlerStartPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.min(...fixedValue) - min) : fixedValue, min, max),
+        handlerEndPosition: getPercentage(isRangeSlider(fixedValue) ? Math.abs(Math.max(...fixedValue) - min) : fixedValue, min, max),
     });
     const getRoundedNewValue = (e, railElement) => {
         const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;

package/Stepper/Step.js

@@ -14,6 +14,7 @@ const Step = forwardRef(function Step(props, ref) {
     /** icon and step number */
     const iconRender = (jsx(Typography, Object.assign({ className: stepClasses.iconBackground, variant: "button3" }, { children: completed ? (jsx(Icon, Object.assign({ className: stepClasses.completedIcon, icon: CheckIcon }, completedIconProps), void 0)) : index + 1 }), void 0));
     return (jsxs("div", Object.assign({ className: cx(stepClasses.host, disabled && stepClasses.disabled, className), ref: ref }, rest, { children: [iconRender, /** title (optional) */ title && (jsx(Typography, Object.assign({ className: stepClasses.title, variant: "button2" }, titleProps, { children: title }), void 0)), children] }), void 0));
-});
+});
+var Step$1 = Step;
 
-export default Step;
+export { Step$1 as default };

package/Stepper/Stepper.js

@@ -28,6 +28,7 @@ const Stepper = forwardRef(function Stepper(props, ref) {
         });
     });
     return (jsx("div", Object.assign({ className: cx(stepperClasses.host, className), ref: ref }, rest, { children: stepsWithState }), void 0));
-});
+});
+var Stepper$1 = Stepper;
 
-export default Stepper;
+export { Stepper$1 as default };

package/Switch/Switch.js

@@ -24,6 +24,7 @@ const Switch = forwardRef(function Switch(props, ref) {
             [switchClasses.large]: size === 'large',
         }, className) }, { children: [jsx("span", Object.assign({ className: switchClasses.control }, { children: loading && jsx(Icon, { icon: SwitchSpinnerIcon, spin: true }, void 0) }), void 0),
             jsx("input", Object.assign({}, inputProps, { "aria-checked": checked, "aria-disabled": disabled, checked: checked, className: switchClasses.input, disabled: disabled, onChange: onChange, type: "checkbox" }), void 0)] }), void 0));
-});
+});
+var Switch$1 = Switch;
 
-export default Switch;
+export { Switch$1 as default };

package/Table/Table.d.ts

@@ -2,78 +2,85 @@
 import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
+export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
     /**
      * customized body className
      */
     bodyClassName?: string;
     /**
-     * customized body row className
-     */
+      * 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 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 />
-     */
+      * 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.
-     */
+      * Data record array to be displayed. <br />
+      * Notice that each source should contain `key` or `id` prop as data primary key.
+      */
     dataSource: TableDataSource[];
     /**
-     * props exported from `<Empty />` component.
-     */
+      * 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.
-     */
+      * 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?: TableExpandable<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;
     /**
      * customized header className
      */
     headerClassName?: string;
     /**
-     * Whether table is loading or not
-     */
+      * Whether table is loading or not
+      */
     loading?: boolean;
-    /**
-     * `pagination.show` controls pagination display. <br />
-     * `pagination.current` is the current page number. <br />
-     * `pagination.onChange` is the callback when page number changed. <br />
-     * `pagination.total` is the total amount of your data. <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;
     /**
      * `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.
-     */
+      * 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;
 }
-declare const Table: import("react").ForwardRefExoticComponent<TableProps<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>>;
+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<(TableWithFetchMore<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>) | (TableWithPagination<Record<string, unknown>> & import("react").RefAttributes<HTMLDivElement>)>;
 export default Table;

package/Table/Table.js

@@ -61,26 +61,44 @@ const Table = forwardRef(function Table(props, ref) {
         refreshProp.show) !== null && _a !== void 0 ? _a : false);
     }, [refreshProp === null || refreshProp === void 0 ? void 0 : refreshProp.show]);
     /** context */
-    const tableContextValue = useMemo(() => ({
-        scrollBarSize: 4,
-        emptyProps,
-        rowSelection,
-        sorting: {
-            onSort,
-            onResetAll,
-            sortedOn,
-            sortedType,
-        },
-        loading,
-        setLoading,
-        expanding: expandableProp,
-        fetchMore: onFetchMore ? {
-            onFetchMore,
-            isFetching,
-            isReachEnd,
-        } : undefined,
-        pagination: paginationProp,
-    }), [
+    const tableContextValue = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        return ({
+            scrollBarSize: 4,
+            emptyProps,
+            rowSelection,
+            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: {
+                    boundaryCount: (_d = (_c = paginationProp.options) === null || _c === void 0 ? void 0 : _c.boundaryCount) !== null && _d !== void 0 ? _d : 1,
+                    className: (_e = paginationProp.options) === null || _e === void 0 ? void 0 : _e.className,
+                    disabled: (_g = (_f = paginationProp.options) === null || _f === void 0 ? void 0 : _f.disabled) !== null && _g !== void 0 ? _g : false,
+                    hideNextButton: (_j = (_h = paginationProp.options) === null || _h === void 0 ? void 0 : _h.hideNextButton) !== null && _j !== void 0 ? _j : false,
+                    hidePreviousButton: (_l = (_k = paginationProp.options) === null || _k === void 0 ? void 0 : _k.hidePreviousButton) !== null && _l !== void 0 ? _l : false,
+                    pageSize: (_o = (_m = paginationProp.options) === null || _m === void 0 ? void 0 : _m.pageSize) !== null && _o !== void 0 ? _o : 10,
+                    siblingCount: (_q = (_p = paginationProp.options) === null || _p === void 0 ? void 0 : _p.siblingCount) !== null && _q !== void 0 ? _q : 1,
+                },
+            } : undefined,
+        });
+    }, [
+        dataSource,
         emptyProps,
         expandableProp,
         rowSelection,
@@ -105,7 +123,8 @@ const Table = forwardRef(function Table(props, ref) {
     return (jsx(Loading, Object.assign({ loading: loading, stretch: true, tip: "\u8CC7\u6599\u8F09\u5165\u4E2D..." }, { children: jsx("div", Object.assign({ ref: ref }, rest, { className: cx(tableClasses.host, className), role: "grid" }, { children: jsx(TableContext.Provider, Object.assign({ value: tableContextValue }, { children: jsx(TableDataContext.Provider, Object.assign({ value: tableDataContextValue }, { children: jsxs(TableComponentContext.Provider, Object.assign({ value: tableComponentContextValue }, { children: [isRefreshShow ? (jsx(TableRefresh, { onClick: refreshProp.onClick }, void 0)) : null,
                             jsx(TableHeader, { className: headerClassName }, void 0),
                             jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }, void 0),
-                            (paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.show) ? (jsx(TablePagination, { bodyRef: bodyRef }, void 0)) : null] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
-});
+                            paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef }, void 0)) : null] }), void 0) }), void 0) }), void 0) }), void 0) }), void 0));
+});
+var Table$1 = Table;
 
-export default Table;
+export { Table$1 as default };

package/Table/TableBody.js

@@ -12,12 +12,17 @@ import cx from 'clsx';
 const TableBody = forwardRef(function TableBody(props, ref) {
     const { className, rowClassName, ...rest } = props;
     const { dataSource = [], } = useContext(TableDataContext) || {};
-    const { emptyProps, scrollBarSize, fetchMore, } = useContext(TableContext) || {};
+    const { emptyProps, fetchMore, scrollBarSize, pagination, } = useContext(TableContext) || {};
     const [tableBody, scrollElement] = useTableScroll();
     const composedRefs = useComposeRefs([ref, tableBody.ref]);
     /** customizing empty */
     const { className: emptyComponentClassName = '', children: emptyComponentChildren = '查無資料', fullHeight: emptyComponentFullHeight = true, ...restEmptyProps } = emptyProps || {};
-    return (jsxs("div", Object.assign({}, rest, { ref: composedRefs, className: cx(tableClasses.body, className), onScroll: tableBody.onScroll, role: "rowgroup" }, { children: [dataSource.length ? dataSource.map((rowData) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData }, (rowData.key || rowData.id)))) : (jsx(Empty, Object.assign({}, restEmptyProps, { className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight }, { children: emptyComponentChildren }), void 0)),
+    /** 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("div", Object.assign({}, rest, { ref: composedRefs, className: cx(tableClasses.body, className), onScroll: tableBody.onScroll, role: "rowgroup" }, { children: [currentDataSource.length ? currentDataSource.map((rowData) => (jsx(TableBodyRow, { className: rowClassName, rowData: rowData }, (rowData.key || rowData.id)))) : (jsx(Empty, Object.assign({}, restEmptyProps, { className: cx(tableClasses.bodyEmpty, emptyComponentClassName), fullHeight: emptyComponentFullHeight }, { children: emptyComponentChildren }), void 0)),
             (fetchMore === null || fetchMore === void 0 ? void 0 : fetchMore.isFetching) ? (jsx("div", Object.assign({ className: tableClasses.bodyFetchMore }, { children: jsx(Loading, { loading: true }, void 0) }), void 0)) : null,
             jsx("div", Object.assign({ ref: scrollElement.ref, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1 }, { children: jsx("div", { style: {
                         width: `${scrollBarSize}px`,
@@ -26,6 +31,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
                         backgroundColor: '#7d7d7d',
                         transition: '0.1s',
                     } }, void 0) }), void 0)] }), void 0));
-});
+});
+var TableBody$1 = TableBody;
 
-export default TableBody;
+export { TableBody$1 as default };

package/Table/TableBodyRow.js

@@ -58,6 +58,7 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
                         return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || rowData[column.dataIndex] }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
                     })] }), void 0),
             renderedExpandedContent ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : null] }, void 0));
-});
+});
+var TableBodyRow$1 = TableBodyRow;
 
-export default TableBodyRow;
+export { TableBodyRow$1 as default };

package/Table/TableCell.js

@@ -18,6 +18,7 @@ const TableCell = forwardRef(function TableCell(props, ref) {
                             onMouseEnter(e);
                     }
                 }, onMouseLeave: onMouseLeave }, { children: children }), void 0)) }), void 0)) : children }), void 0));
-});
+});
+var TableCell$1 = TableCell;
 
-export default TableCell;
+export { TableCell$1 as default };

package/Table/TableHeader.js

@@ -42,6 +42,7 @@ const TableHeader = forwardRef(function TableHeader(props, ref) {
                 return (jsx("div", Object.assign({ className: cx(tableClasses.headerCellWrapper, column.headerClassName), style: getColumnStyle(column) }, { children: jsxs(TableCell, Object.assign({ ellipsis: false, role: "columnheader", style: getCellStyle(column) }, { children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title,
                             typeof column.sorter === 'function' ? (jsx(TableSortingIcon, { column: column }, void 0)) : null] }), void 0) }), `${column.dataIndex}-${column.title}`));
             })] }), void 0));
-});
+});
+var TableHeader$1 = TableHeader;
 
-export default TableHeader;
+export { TableHeader$1 as default };

package/Table/editable/TableEditRenderWrapper.js

@@ -12,4 +12,4 @@ function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCel
     return (jsx(Fragment, { children: children }, void 0));
 }
 
-export default TableEditRenderWrapper;
+export { TableEditRenderWrapper as default };

package/Table/expandable/TableExpandable.js

@@ -10,6 +10,7 @@ const TableExpandable = forwardRef(function TableExpandable(props, ref) {
     return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.collapseAction, className) }, { children: jsx("div", Object.assign({ className: tableClasses.icon }, { children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
                     [tableClasses.iconClickable]: expandable,
                 }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: () => expandable && (setExpanded === null || setExpanded === void 0 ? void 0 : setExpanded(!expanded)), style: { transform: `rotate(${expanded ? '180deg' : '0'})` } }, void 0)) : null }), void 0) }), void 0));
-});
+});
+var TableExpandable$1 = TableExpandable;
 
-export default TableExpandable;
+export { TableExpandable$1 as default };

package/Table/pagination/TablePagination.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
-import { TableContext, TableDataContext } from '../TableContext.js';
+import { TableContext } from '../TableContext.js';
 import { useTablePagination } from './useTablePagination.js';
 import Pagination from '../../Pagination/Pagination.js';
 import cx from 'clsx';
@@ -9,19 +9,18 @@ import cx from 'clsx';
 const TablePagination = forwardRef(function TablePagination(props, ref) {
     const { className, bodyRef, ...rest } = props;
     const { pagination, } = useContext(TableContext) || {};
-    const { dataSource = [], } = useContext(TableDataContext) || {};
-    const [currentPage, setCurrentPage, options] = useTablePagination({
+    const { current: currentPageProp, onChange: onChangePageProp, total, options: paginationOptions = {}, } = pagination || {};
+    const [currentPage, setCurrentPage] = useTablePagination({
         bodyRef,
-        current: pagination === null || pagination === void 0 ? void 0 : pagination.current,
-        dataSource,
-        onChange: pagination === null || pagination === void 0 ? void 0 : pagination.onChange,
-        options: pagination === null || pagination === void 0 ? void 0 : pagination.options,
-        total: pagination === null || pagination === void 0 ? void 0 : pagination.total,
+        current: currentPageProp,
+        onChange: onChangePageProp,
     });
-    const currentStartCount = (options.pageSize * (currentPage - 1)) + 1;
-    const currentEndCount = Math.min(options.pageSize * currentPage, options.total);
-    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.pagination, className) }, { children: [jsx("span", Object.assign({ className: tableClasses.paginationIndicator }, { children: `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${options.total} 筆資料` }), void 0),
-            jsx("div", Object.assign({ className: tableClasses.paginationActions }, { children: jsx(Pagination, { boundaryCount: options.boundaryCount, className: options.className, current: currentPage, disabled: options.disabled, hideNextButton: options.hideNextButton, hidePreviousButton: options.hidePreviousButton, onChange: setCurrentPage, pageSize: options.pageSize, siblingCount: options.siblingCount, total: options.total }, void 0) }), void 0)] }), void 0));
-});
+    const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, pageSize: pageSizeProp, siblingCount, } = paginationOptions;
+    const currentStartCount = (pageSizeProp * (currentPage - 1)) + 1;
+    const currentEndCount = Math.min(pageSizeProp * currentPage, total);
+    return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tableClasses.pagination, className) }, { children: [jsx("span", Object.assign({ className: tableClasses.paginationIndicator }, { children: `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), void 0),
+            jsx("div", Object.assign({ className: tableClasses.paginationActions }, { children: jsx(Pagination, { boundaryCount: boundaryCount, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, onChange: setCurrentPage, pageSize: pageSizeProp, siblingCount: siblingCount, total: total }, void 0) }), void 0)] }), void 0));
+});
+var TablePagination$1 = TablePagination;
 
-export default TablePagination;
+export { TablePagination$1 as default };

package/Table/pagination/useTablePagination.d.ts

@@ -1,16 +1,8 @@
 import { RefObject } from 'react';
-import { TablePagination, TableDataSource } from '@mezzanine-ui/core/table';
-export interface UseTablePagination extends Omit<TablePagination, 'show'> {
+import { TablePagination } from '@mezzanine-ui/core/table';
+export interface UseTablePagination {
     bodyRef: RefObject<HTMLDivElement>;
-    dataSource: TableDataSource[];
+    current?: TablePagination['current'];
+    onChange?: TablePagination['onChange'];
 }
-export declare function useTablePagination(props: UseTablePagination): readonly [number, (c: number) => void, {
-    boundaryCount: number;
-    className: string | undefined;
-    disabled: boolean;
-    hideNextButton: boolean;
-    hidePreviousButton: boolean;
-    pageSize: number;
-    siblingCount: number;
-    total: number;
-}];
+export declare function useTablePagination(props: UseTablePagination): readonly [number, (c: number) => void];

package/Table/pagination/useTablePagination.js

@@ -1,12 +1,11 @@
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { useControlValueState } from '../../Form/useControlValueState.js';
 import { useLastCallback } from '../../hooks/useLastCallback.js';
 import { TableContext } from '../TableContext.js';
 
 const equalityFn = (a, b) => a === b;
 function useTablePagination(props) {
-    const { bodyRef, current: currentProp, dataSource, onChange: onChangeProp, options: optionsProp, total: totalProp, } = props;
-    const { boundaryCount = 1, className, disabled = false, hideNextButton = false, hidePreviousButton = false, pageSize: pageSizeProp, siblingCount = 1, } = optionsProp || {};
+    const { bodyRef, current: currentProp, onChange: onChangeProp, } = props;
     const { sorting, } = useContext(TableContext) || {};
     const [current, setCurrent] = useControlValueState({
         defaultValue: 1,
@@ -24,26 +23,7 @@ function useTablePagination(props) {
         }
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newCurrent);
     });
-    const pageSize = useMemo(() => (pageSizeProp !== null && pageSizeProp !== void 0 ? pageSizeProp : dataSource.length), [pageSizeProp, dataSource.length]);
-    const total = useMemo(() => (totalProp !== null && totalProp !== void 0 ? totalProp : (dataSource.length / pageSize)), [totalProp, dataSource.length, pageSize]);
-    const defaultOptions = useMemo(() => ({
-        boundaryCount,
-        className,
-        disabled,
-        hideNextButton,
-        hidePreviousButton,
-        pageSize,
-        siblingCount,
-        total,
-    }), [
-        boundaryCount,
-        className,
-        disabled,
-        hideNextButton,
-        hidePreviousButton,
-        siblingCount,
-    ]);
-    return [current, onChange, defaultOptions];
+    return [current, onChange];
 }
 
 export { useTablePagination };

package/Table/refresh/TableRefresh.js

@@ -18,6 +18,7 @@ const TableRefresh = forwardRef(function TableRefresh(props, ref) {
         setLoading,
     ]);
     return (jsx("div", Object.assign({ ref: ref, className: tableClasses.refresh }, rest, { children: jsx(Button, Object.assign({ onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }, void 0) }, { children: children || '重新整理' }), void 0) }), void 0));
-});
+});
+var TableRefresh$1 = TableRefresh;
 
-export default TableRefresh;
+export { TableRefresh$1 as default };

package/Table/rowSelection/TableRowSelection.js

@@ -81,6 +81,7 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
                     } }, { children: (dropdownRef) => (jsx(Icon, { ref: dropdownRef, className: cx(tableClasses.icon, {
                             [tableClasses.iconClickable]: isMenuAllowOpen,
                         }), color: isMenuAllowOpen ? 'primary' : 'disabled', icon: MoreVerticalIcon, onClick: onIconClicked }, void 0)) }), void 0)) : null }), void 0)] }), void 0));
-});
+});
+var TableRowSelection$1 = TableRowSelection;
 
-export default TableRowSelection;
+export { TableRowSelection$1 as default };

package/Table/sorting/TableSortingIcon.js

@@ -23,6 +23,7 @@ const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
             evt.stopPropagation();
             (_a = sorting === null || sorting === void 0 ? void 0 : sorting.onSort) === null || _a === void 0 ? void 0 : _a.call(sorting, column);
         }, style: currentIconStyle.style }), void 0));
-});
+});
+var TableSortingIcon$1 = TableSortingIcon;
 
-export default TableSortingIcon;
+export { TableSortingIcon$1 as default };

package/Table/useTableScroll.d.ts

@@ -120,10 +120,10 @@ export default function useTableScroll(): readonly [{
         onCompositionStartCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
         onCompositionUpdate?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
         onCompositionUpdateCapture?: ((event: import("react").CompositionEvent<HTMLDivElement>) => void) | undefined;
-        onFocus?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
-        onFocusCapture?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
-        onBlur?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
-        onBlurCapture?: ((event: import("react").FocusEvent<HTMLDivElement>) => void) | undefined;
+        onFocus?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onFocusCapture?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onBlur?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+        onBlurCapture?: ((event: import("react").FocusEvent<HTMLDivElement, Element>) => void) | undefined;
         onChange?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
         onChangeCapture?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;
         onBeforeInput?: ((event: import("react").FormEvent<HTMLDivElement>) => void) | undefined;

package/Table/useTableScroll.js

@@ -167,4 +167,4 @@ function useTableScroll() {
     return [tableBody, scrollElement];
 }
 
-export default useTableScroll;
+export { useTableScroll as default };

package/Tabs/Tab.js

@@ -11,6 +11,7 @@ const Tab = forwardRef(function Tab(props, ref) {
     return (jsx("button", Object.assign({}, rest, { ref: ref, type: "button", "aria-disabled": disabled, className: cx(tabsClasses.tab, {
             [tabsClasses.tabActive]: active,
         }, className), disabled: disabled }, { children: children }), void 0));
-});
+});
+var Tab$1 = Tab;
 
-export default Tab;
+export { Tab$1 as default };

package/Tabs/TabPane.js

@@ -13,6 +13,7 @@ const TabPane = forwardRef(function TabPane(props, ref) {
      */
     tab, ...rest } = props;
     return (jsx("div", Object.assign({}, rest, { ref: ref, className: cx(tabsClasses.pane, className) }, { children: children }), void 0));
-});
+});
+var TabPane$1 = TabPane;
 
-export default TabPane;
+export { TabPane$1 as default };

package/Tabs/Tabs.js

@@ -44,6 +44,7 @@ const Tabs = forwardRef(function Tabs(props, ref) {
     return (jsxs("div", Object.assign({}, rest, { ref: ref, className: cx(tabsClasses.host, className) }, { children: [jsxs("div", Object.assign({ className: cx(tabsClasses.tabBar, tabBarClassName) }, { children: [jsxs("div", Object.assign({ className: tabsClasses.overflow }, { children: [isOverflowing && !isScrollToBegin && (jsx("button", Object.assign({ "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button" }, { children: jsx(Icon, { icon: ChevronLeftIcon }, void 0) }), void 0)),
                             jsx("div", Object.assign({ ref: tabsRef, className: tabsClasses.tabs }, { children: tabs }), void 0),
                             isOverflowing && !isScrollToEnd && (jsx("button", Object.assign({ "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button" }, { children: jsx(Icon, { icon: ChevronRightIcon }, void 0) }), void 0))] }), void 0), actions] }), void 0), pane] }), void 0));
-});
+});
+var Tabs$1 = Tabs;
 
-export default Tabs;
+export { Tabs$1 as default };

package/Tabs/useTabsOverflow.js

@@ -55,4 +55,4 @@ function useTabsOverflow(tabsRef) {
     };
 }
 
-export default useTabsOverflow;
+export { useTabsOverflow as default };

package/Tag/Tag.js

@@ -18,6 +18,7 @@ const Tag = forwardRef(function Tag(props, ref) {
                         onClose(event);
                     }
                 }, tabIndex: -1 }, void 0))] }), void 0));
-});
+});
+var Tag$1 = Tag;
 
-export default Tag;
+export { Tag$1 as default };