@mezzanine-ui/react 0.14.10 → 0.15.0

package/Table/editable/TableEditRenderWrapper.js

@@ -4,12 +4,12 @@ import { TableComponentContext } from '../TableContext.js';
 
 function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }) {
     var _a;
-    const { bodyCell: BodyCell, } = useContext(TableComponentContext) || {};
+    const { bodyCell: BodyCell } = useContext(TableComponentContext) || {};
     const customProps = (_a = setCellProps === null || setCellProps === void 0 ? void 0 : setCellProps(rowData)) !== null && _a !== void 0 ? _a : {};
     if (typeof BodyCell === 'function') {
         return (jsx(BodyCell, { ...customProps, ...rest, dataIndex: dataIndex, editable: editable, rowData: rowData, children: children }));
     }
-    return (jsx(Fragment, { children: children }));
+    return jsx(Fragment, { children: children });
 }
 
 export { TableEditRenderWrapper as default };

package/Table/index.d.ts

@@ -1,7 +1,7 @@
-export { TableProps, default, } from './Table';
+export { TableProps, default } from './Table';
 export { TableRefreshProps, default as TableRefresh, } from './refresh/TableRefresh';
-export { TableCellProps, default as TableCell, } from './TableCell';
-export { EditableBodyCellProps, } from './editable/TableEditRenderWrapper';
-export { useTableDraggable, } from './draggable/useTableDraggable';
+export { TableCellProps, default as TableCell } from './TableCell';
+export { EditableBodyCellProps } from './editable/TableEditRenderWrapper';
+export { useTableDraggable } from './draggable/useTableDraggable';
 export { useTableRowSelection, SELECTED_ALL_KEY, } from './rowSelection/useTableRowSelection';
-export { default as useTableScroll, } from './useTableScroll';
+export { default as useTableScroll } from './useTableScroll';

package/Table/pagination/TablePagination.js

@@ -9,7 +9,7 @@ import cx from 'clsx';
 const TablePagination = forwardRef(function TablePagination(props, ref) {
     var _a;
     const { className, bodyRef, ...rest } = props;
-    const { pagination, } = useContext(TableContext) || {};
+    const { pagination } = useContext(TableContext) || {};
     const { current: currentPageProp, onChange: onChangePageProp, total, options: paginationOptions = {}, } = pagination || {};
     const [currentPage, setCurrentPage] = useTablePagination({
         bodyRef,
@@ -17,7 +17,7 @@ const TablePagination = forwardRef(function TablePagination(props, ref) {
         onChange: onChangePageProp,
     });
     const { boundaryCount, className: paginationClassName, disabled, hideNextButton, hidePreviousButton, jumperButtonText, jumperHintText, jumperInputPlaceholder, onChangePageSize, pageSize: pageSizeProp, pageSizeLabel, pageSizeOptions, pageSizeUnit, renderPageSizeOptionName, renderPaginationSummary, showJumper, showPageSizeOptions, siblingCount, } = paginationOptions;
-    const currentStartCount = (pageSizeProp * (currentPage - 1)) + 1;
+    const currentStartCount = pageSizeProp * (currentPage - 1) + 1;
     const currentEndCount = Math.min(pageSizeProp * currentPage, total);
     return (jsxs("div", { ...rest, ref: ref, className: cx(tableClasses.pagination, className), children: [jsx("span", { className: tableClasses.paginationIndicator, children: (_a = renderPaginationSummary === null || renderPaginationSummary === void 0 ? void 0 : renderPaginationSummary(currentStartCount, currentEndCount)) !== null && _a !== void 0 ? _a : `目前顯示 ${currentStartCount} - ${currentEndCount} 筆，共 ${total} 筆資料` }), jsx("div", { className: tableClasses.paginationActions, children: jsx(Pagination, { boundaryCount: boundaryCount, buttonText: jumperButtonText, className: paginationClassName, current: currentPage, disabled: disabled, hideNextButton: hideNextButton, hidePreviousButton: hidePreviousButton, hintText: jumperHintText, inputPlaceholder: jumperInputPlaceholder, onChange: setCurrentPage, onChangePageSize: onChangePageSize, pageSize: pageSizeProp, pageSizeLabel: pageSizeLabel, pageSizeOptions: pageSizeOptions, pageSizeUnit: pageSizeUnit, renderPageSizeOptionName: renderPageSizeOptionName, showJumper: showJumper, showPageSizeOptions: showPageSizeOptions, siblingCount: siblingCount, total: total }) })] }));
 });

package/Table/pagination/useTablePagination.d.ts

@@ -5,4 +5,4 @@ export interface UseTablePagination {
     current?: TablePagination['current'];
     onChange?: TablePagination['onChange'];
 }
-export declare function useTablePagination(props: UseTablePagination): readonly [number, (c: number) => ReturnType<(c: number) => void>];
+export declare function useTablePagination(props: UseTablePagination): readonly [number, (c: number) => void];

package/Table/pagination/useTablePagination.js

@@ -5,8 +5,8 @@ import { TableContext } from '../TableContext.js';
 
 const equalityFn = (a, b) => a === b;
 function useTablePagination(props) {
-    const { bodyRef, current: currentProp, onChange: onChangeProp, } = props;
-    const { sorting, } = useContext(TableContext) || {};
+    const { bodyRef, current: currentProp, onChange: onChangeProp } = props;
+    const { sorting } = useContext(TableContext) || {};
     const [current, setCurrent] = useControlValueState({
         defaultValue: 1,
         equalityFn,

package/Table/refresh/TableRefresh.js

@@ -8,15 +8,12 @@ import Icon from '../../Icon/Icon.js';
 
 const TableRefresh = forwardRef(function TableRefresh(props, ref) {
     const { className, children, onClick, ...rest } = props;
-    const { setLoading, } = useContext(TableContext) || {};
+    const { setLoading } = useContext(TableContext) || {};
     const onRefreshClicked = useCallback((e) => {
         e.stopPropagation();
         setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    }, [
-        onClick,
-        setLoading,
-    ]);
+    }, [onClick, setLoading]);
     return (jsx("div", { ref: ref, className: tableClasses.refresh, ...rest, children: jsx(Button, { onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }), children: children || '重新整理' }) }));
 });
 var TableRefresh$1 = TableRefresh;

package/Table/rowSelection/TableRowSelection.js

@@ -15,8 +15,8 @@ import cx from 'clsx';
 const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
     var _a, _b, _c;
     const { rowKey, setChecked, showDropdownIcon, ...rest } = props;
-    const { rowSelection, expanding, } = useContext(TableContext) || {};
-    const { dataSource = [], } = useContext(TableDataContext) || {};
+    const { rowSelection, expanding } = useContext(TableContext) || {};
+    const { dataSource = [] } = useContext(TableDataContext) || {};
     /** checkbox methods/state */
     const onSelected = useCallback(() => {
         rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange(rowKey);
@@ -30,15 +30,18 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
         if (selectedRowKeys.length === validDataSource.length)
             return 'all';
         return 'indeterminate';
-    }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys, dataSource]);
-    const selfChecked = useMemo(() => {
-        var _a;
-        return (((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : []).some((key) => key === rowKey));
-    }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, rowKey]);
+    }, [
+        rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys,
+        rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys,
+        dataSource,
+    ]);
+    const selfChecked = useMemo(() => { var _a; return ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : []).some((key) => key === rowKey); }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, rowKey]);
     /** checkbox props */
     const isHeaderCheckbox = rowKey === SELECTED_ALL_KEY;
     const checked = isHeaderCheckbox ? checkboxStatus === 'all' : selfChecked;
-    const indeterminate = isHeaderCheckbox ? checkboxStatus === 'indeterminate' : false;
+    const indeterminate = isHeaderCheckbox
+        ? checkboxStatus === 'indeterminate'
+        : false;
     const name = isHeaderCheckbox ? '選擇全部' : '選擇';
     /** parent callbacks */
     useEffect(() => {
@@ -71,7 +74,7 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
         (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, rowSelection.selectedRowKeys);
         toggleOpen(false);
     };
-    const actionMenu = (jsx(Menu, { size: "medium", children: ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) !== null && _a !== void 0 ? _a : []).map(((action) => (jsx(MenuItem, { className: action.className, onClick: (evt) => onMenuItemClicked(evt, action), children: action.text }, action.key)))) }));
+    const actionMenu = (jsx(Menu, { size: "medium", children: ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) !== null && _a !== void 0 ? _a : []).map((action) => (jsx(MenuItem, { className: action.className, onClick: (evt) => onMenuItemClicked(evt, action), children: action.text }, action.key))) }));
     return (jsxs("div", { ref: ref, ...rest, className: tableClasses.selections, style: hiddenIconWithExpandableStyle.host, children: [jsx(Checkbox, { checked: checked, disabled: ((_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.disabledRowKeys) === null || _b === void 0 ? void 0 : _b.length)
                     ? rowSelection.disabledRowKeys.includes(rowKey)
                     : false, indeterminate: indeterminate, inputProps: {

package/Table/rowSelection/useTableRowSelection.d.ts

@@ -3,4 +3,4 @@ export declare const SELECTED_ALL_KEY = "MZN-TABLE-ROW-SELECTION-ALL";
 export interface UseTableRowSelection extends Omit<TableRowSelection, 'actions'> {
     dataSource: TableDataSource[];
 }
-export declare function useTableRowSelection(props: UseTableRowSelection): readonly [string[], (v: string) => ReturnType<(v: string) => void>];
+export declare function useTableRowSelection(props: UseTableRowSelection): readonly [string[], (v: string) => void];

package/Table/rowSelection/useTableRowSelection.js

@@ -5,7 +5,8 @@ import { useLastCallback } from '../../hooks/useLastCallback.js';
 const equalityFn = (a, b) => {
     const sortedA = a.sort();
     const sortedB = b.sort();
-    return sortedA.length === sortedB.length && sortedA.every((v, idx) => v === sortedB[idx]);
+    return (sortedA.length === sortedB.length &&
+        sortedA.every((v, idx) => v === sortedB[idx]));
 };
 const SELECTED_ALL_KEY = 'MZN-TABLE-ROW-SELECTION-ALL';
 function useTableRowSelection(props) {
@@ -38,10 +39,7 @@ function useTableRowSelection(props) {
                 ];
             }
             else {
-                nextSelectedRowKey = [
-                    ...selectedRowKey,
-                    rowKey,
-                ];
+                nextSelectedRowKey = [...selectedRowKey, rowKey];
             }
         }
         setSelectedRowKey(nextSelectedRowKey);

package/Table/sorting/TableSortingIcon.js

@@ -9,8 +9,8 @@ import cx from 'clsx';
 const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
     const { className, column, ...rest } = props;
     const uniqueId = useMemo(() => `${crypto.getRandomValues(new Uint32Array(5))[0]}`, []);
-    const { sorting, } = useContext(TableContext) || {};
-    const { key = uniqueId, } = column;
+    const { sorting } = useContext(TableContext) || {};
+    const { key = uniqueId } = column;
     /** styling */
     const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
     const currentIconStyle = useMemo(() => ({

package/Table/sorting/useTableSorting.d.ts

@@ -3,7 +3,7 @@ export interface UseTableSorting {
     dataSource: TableDataSource[];
 }
 export type SortedType = 'desc' | 'asc' | 'none';
-export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "key" | "dataIndex" | "sorter" | "onSorted">) => ReturnType<(v: Pick<TableColumn<TableRecord<unknown>>, "key" | "dataIndex" | "sorter" | "onSorted">) => void>, {
+export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "key" | "dataIndex" | "sorter" | "onSorted">) => void, {
     readonly sortedOn: string;
     readonly sortedType: SortedType;
     readonly onResetAll: () => void;

package/Table/sorting/useTableSorting.js

@@ -37,7 +37,7 @@ const equalityFn = (a, b, deepCompare = false) => {
     return false;
 };
 function useTableSorting(props) {
-    const { dataSource: dataSourceProp, } = props;
+    const { dataSource: dataSourceProp } = props;
     const [sortedOn, setSortedOn] = useState('');
     const [sortedType, setSortedType] = useState('none');
     const [dataSource, setDataSource] = useControlValueState({
@@ -52,7 +52,8 @@ function useTableSorting(props) {
          * @NOTE 條件1: 如果一開始就有傳入值，則直接同步 dataSource
          * @NOTE 條件2: 深度比較舊 dataSourceProp 跟新的是否有不同，如果有則同步
          */
-        if (!dataSource.length || !equalityFn(prevDataSourceProps, dataSourceProp, true)) {
+        if (!dataSource.length ||
+            !equalityFn(prevDataSourceProps, dataSourceProp, true)) {
             setDataSource(dataSourceProp);
         }
     }, [prevDataSourceProps, dataSourceProp]);
@@ -91,9 +92,10 @@ function useTableSorting(props) {
                     if (typeof sorter === 'function') {
                         console.warn('When using a `sorter` function, please provide the `dataIndex` to make sure it worked as expected.');
                         // sort by given sorter
-                        newSource = newSource.sort((a, b) => (
+                        newSource = newSource.sort((a, b) => 
                         // reverse result when sorted type is ascending
-                        (sorter(get(a, dataIndex || ''), get(b, dataIndex || ''))) * (nextSortedType === 'asc' ? -1 : 1)));
+                        sorter(get(a, dataIndex || ''), get(b, dataIndex || '')) *
+                            (nextSortedType === 'asc' ? -1 : 1));
                     }
                     // map back the data source
                     onMappingSources(newSource);
@@ -108,7 +110,11 @@ function useTableSorting(props) {
             }
         }
     });
-    return [dataSource, onChange, { sortedOn, sortedType, onResetAll, setDataSource }];
+    return [
+        dataSource,
+        onChange,
+        { sortedOn, sortedType, onResetAll, setDataSource },
+    ];
 }
 
 export { useTableSorting };

package/Table/useTableFetchMore.d.ts

@@ -4,7 +4,7 @@ export interface UseTableFetchMore extends TableFetchMore {
     disabled?: boolean;
 }
 export declare function useTableFetchMore(props: UseTableFetchMore): {
-    readonly fetchMore: (() => ReturnType<() => void>) | undefined;
+    readonly fetchMore: (() => void) | undefined;
     readonly isFetching: boolean;
     readonly isReachEnd: boolean;
 };

package/Table/useTableFetchMore.js

@@ -31,7 +31,7 @@ function useTableFetchMore(props) {
         if (isReachEnd)
             onFetching(false);
     });
-    const fetchMore = (callbackProp && !disabled ? onFetchMore : undefined);
+    const fetchMore = callbackProp && !disabled ? onFetchMore : undefined;
     /** check source length and reset states */
     const prevSourceLength = usePreviousValue(dataSource.length);
     const currentSourceLength = useMemo(() => dataSource.length, [dataSource.length]);

package/Table/useTableLoading.d.ts

@@ -2,4 +2,4 @@ export declare const SELECTED_ALL_KEY = "MZN-TABLE-ROW-SELECTION-ALL";
 export interface UseTableLoading {
     loading?: boolean;
 }
-export declare function useTableLoading(props: UseTableLoading): readonly [boolean, (l: boolean) => ReturnType<(l: boolean) => void>];
+export declare function useTableLoading(props: UseTableLoading): readonly [boolean, (l: boolean) => void];

package/Table/useTableLoading.js

@@ -3,7 +3,7 @@ import { useLastCallback } from '../hooks/useLastCallback.js';
 
 const equalityFn = (a, b) => a === b;
 function useTableLoading(props) {
-    const { loading: loadingProp, } = props;
+    const { loading: loadingProp } = props;
     const [loading, setLoading] = useControlValueState({
         defaultValue: false,
         equalityFn,

package/Table/useTableScroll.js

@@ -32,7 +32,7 @@ const defaultScrollBarStyle = {
     backgroundColor: 'transparent',
 };
 function useTableScroll(props) {
-    const { onFetchMore, loading, scrollBarSize = 4, } = props;
+    const { onFetchMore, loading, scrollBarSize = 4 } = props;
     const scrollRef = useRef(null);
     const tableRef = useRef(null);
     const scrollBarTrackRef = useRef(null);
@@ -46,10 +46,11 @@ function useTableScroll(props) {
         /** @NOTE Scroll bar 高度為可視區域的百分比 */
         if (!scrollRef.current)
             return;
-        const { scrollHeight, clientHeight: tableHeight, } = scrollRef.current;
+        const { scrollHeight, clientHeight: tableHeight } = scrollRef.current;
         const bodyHeight = scrollHeight - HEADER_DEFAULT_HEIGHT;
         const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
-        const nextHeight = Math.max((viewAreaHeight - (SCROLL_BAR_MAX_END_SPACING * 2)) * (viewAreaHeight / bodyHeight), tableHeight / 10);
+        const nextHeight = Math.max((viewAreaHeight - SCROLL_BAR_MAX_END_SPACING * 2) *
+            (viewAreaHeight / bodyHeight), tableHeight / 10);
         setScrollBarHeight(nextHeight);
     }, []);
     /** display/hide scroll bar */
@@ -71,10 +72,12 @@ function useTableScroll(props) {
         }, SCROLL_BAR_DISPLAY_TIMES);
     }, []);
     const onDisplayScrollBar = useCallback(() => {
-        if (!scrollBarRef.current || !scrollRef.current || !scrollBarTrackRef.current)
+        if (!scrollBarRef.current ||
+            !scrollRef.current ||
+            !scrollBarTrackRef.current)
             return;
         /** 觸控螢幕不需要 scroll bar */
-        const isTouchEnabled = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+        const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
         /** firefox 的滾軸只能同時顯示 or 取消，所以乾脆就用原生的（除非能單獨關掉直向的滾軸，只顯示橫向的才行） */
         const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         if (isTouchEnabled || isFirefox)
@@ -91,7 +94,8 @@ function useTableScroll(props) {
     /** scroll bar style reset when mouse leave */
     const onScrollBarLeave = useCallback(() => {
         if (scrollBarRef.current) {
-            scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize}px`;
+            scrollBarRef.current.childNodes[0].style.width =
+                `${scrollBarSize}px`;
         }
         resetPointerOffset();
     }, []);
@@ -127,12 +131,12 @@ function useTableScroll(props) {
             return;
         /** 游標在滾軸上長按並移動 */
         function onMouseMove({ clientY }) {
-            const { scrollHeight, clientHeight: tableHeight, } = body;
+            const { scrollHeight, clientHeight: tableHeight } = body;
             if (!pointerOffset)
                 return;
             // keep scroll bar display when moving
             window.requestAnimationFrame(onDisplayScrollBar);
-            const { top: tableTop, } = body.getBoundingClientRect();
+            const { top: tableTop } = body.getBoundingClientRect();
             /** Table 最大滾動距離 */
             const maxScrollDistance = scrollHeight - tableHeight;
             /** 游標在 scroll bar 上的位置 */
@@ -145,20 +149,21 @@ function useTableScroll(props) {
             const clampScrollBarTop = Math.min(Math.max(scrollBarCurrentPosition, 0), // min boundary
             maxScrollBarDistance);
             scrollBar.style.setProperty('transform', `translate3d(0, ${clampScrollBarTop}px, 0)`);
-            body.scrollTop = ((clampScrollBarTop * maxScrollDistance) / maxScrollBarDistance);
+            body.scrollTop =
+                (clampScrollBarTop * maxScrollDistance) / maxScrollBarDistance;
         }
         /** 在滾軸滑軌上點擊，直接滾動到指定位置上 */
         function onMouseClick({ clientY }) {
             if (!scrollBar)
                 return;
-            const { scrollHeight, clientHeight: tableHeight, } = body;
+            const { scrollHeight, clientHeight: tableHeight } = body;
             // keep scroll bar display when moving
             window.requestAnimationFrame(onDisplayScrollBar);
-            const { top: tableTop, } = body.getBoundingClientRect();
+            const { top: tableTop } = body.getBoundingClientRect();
             /** Table 最大滾動距離 */
             const maxScrollDistance = scrollHeight - tableHeight;
             /** 游標在 Track 上的位置 */
-            const scrollBarCurrentPosition = clientY - (tableTop + HEADER_DEFAULT_HEIGHT) - (scrollBarHeight / 2);
+            const scrollBarCurrentPosition = clientY - (tableTop + HEADER_DEFAULT_HEIGHT) - scrollBarHeight / 2;
             /** 可視區域高度 */
             const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
             /** 最大滑動距離 */
@@ -167,7 +172,8 @@ function useTableScroll(props) {
             const clampScrollBarTop = Math.min(Math.max(scrollBarCurrentPosition, 0), // min boundary
             maxScrollBarDistance);
             scrollBar.style.setProperty('transform', `translate3d(0, ${clampScrollBarTop}px, 0)`);
-            body.scrollTop = ((clampScrollBarTop * maxScrollDistance) / maxScrollBarDistance);
+            body.scrollTop =
+                (clampScrollBarTop * maxScrollDistance) / maxScrollBarDistance;
         }
         /** 游標移動到滾軸/滑軌上方時 */
         function onMouseOver() {
@@ -199,7 +205,8 @@ function useTableScroll(props) {
     /** scroll bar fatter when mouse enter */
     const onScrollBarEnter = useCallback(() => {
         if (scrollBarRef.current) {
-            scrollBarRef.current.childNodes[0].style.width = `${scrollBarSize + 6}px`;
+            scrollBarRef.current.childNodes[0].style.width =
+                `${scrollBarSize + 6}px`;
         }
     }, []);
     /** scroll table directly */
@@ -210,7 +217,7 @@ function useTableScroll(props) {
             if (scrollBarRef.current && !pointerOffset) {
                 const bodyHeight = scrollHeight - HEADER_DEFAULT_HEIGHT;
                 const viewAreaHeight = tableHeight - HEADER_DEFAULT_HEIGHT;
-                const distance = Math.max((viewAreaHeight * Math.max((scrollTop / bodyHeight), 0)), 0);
+                const distance = Math.max(viewAreaHeight * Math.max(scrollTop / bodyHeight, 0), 0);
                 scrollBarRef.current.style.transform = `translate3d(0, ${distance}px, 0)`;
             }
             if (scrollBarTrackRef.current) {
@@ -229,23 +236,30 @@ function useTableScroll(props) {
         if (loading)
             return;
         if (scrollRef.current) {
-            const { clientHeight, scrollTop, scrollHeight, } = scrollRef.current;
+            const { clientHeight, scrollTop, scrollHeight } = scrollRef.current;
             /** 如果不需要滾動，則不需要觸發 */
             if (clientHeight >= scrollHeight)
                 return;
             window.requestAnimationFrame(onDisplayScrollBar);
             /** @Note safari specific bug fix for scroll bouncing */
-            const belowBottom = scrollTop > (scrollHeight - clientHeight);
+            const belowBottom = scrollTop > scrollHeight - clientHeight;
             if (belowBottom)
                 return;
             window.requestAnimationFrame(setScrollBarTop);
             /** trigger fetchMore when scrolling */
-            if ((scrollHeight - (scrollTop + clientHeight)) < FETCH_MORE_TRIGGER_AT_BOTTOM) {
+            if (scrollHeight - (scrollTop + clientHeight) <
+                FETCH_MORE_TRIGGER_AT_BOTTOM) {
                 onFetchMore === null || onFetchMore === void 0 ? void 0 : onFetchMore();
             }
         }
         window.requestAnimationFrame(onHideScrollBar);
-    }, [loading, setScrollBarTop, onDisplayScrollBar, onFetchMore, onHideScrollBar]);
+    }, [
+        loading,
+        setScrollBarTop,
+        onDisplayScrollBar,
+        onFetchMore,
+        onHideScrollBar,
+    ]);
     const scrollBarStyle = useMemo(() => ({
         ...defaultScrollBarStyle,
         height: `${scrollBarHeight}px`,

package/Tabs/index.d.ts

@@ -1,3 +1,3 @@
-export { TabProps, default as Tab, } from './Tab';
-export { TabPaneProps, default as TabPane, } from './TabPane';
-export { TabsChild, TabsProps, default, } from './Tabs';
+export { TabProps, default as Tab } from './Tab';
+export { TabPaneProps, default as TabPane } from './TabPane';
+export { TabsChild, TabsProps, default } from './Tabs';

package/Tag/Tag.js

@@ -10,7 +10,7 @@ import cx from 'clsx';
  * The react component for `mezzanine` tag.
  */
 const Tag = forwardRef(function Tag(props, ref) {
-    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { size: globalSize } = useContext(MezzanineConfig);
     const { children, className, closable = false, disabled = false, onClose, size = globalSize, ...rest } = props;
     return (jsxs("span", { ...rest, ref: ref, "aria-disabled": disabled, className: cx(tagClasses.host, tagClasses.size(size), {
             [tagClasses.disabled]: disabled,

package/Tag/index.d.ts

@@ -1,2 +1,2 @@
-export type { TagSize, } from '@mezzanine-ui/core/tag';
-export { TagProps, default, } from './Tag';
+export type { TagSize } from '@mezzanine-ui/core/tag';
+export { TagProps, default } from './Tag';

package/TextField/TextField.js

@@ -11,9 +11,9 @@ import cx from 'clsx';
  * The react component for `mezzanine` input.
  */
 const TextField = forwardRef(function TextField(props, ref) {
-    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { size: globalSize } = useContext(MezzanineConfig);
     const { active = false, children, className, clearable = false, disabled = false, error = false, fullWidth, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, role: roleProp, size = globalSize, suffix, suffixActionIcon, ...rest } = props;
-    const { role, onClick, onKeyDown, } = useTextFieldControl({
+    const { role, onClick, onKeyDown } = useTextFieldControl({
         onClick: onClickProps,
         onKeyDown: onKeyDownProps,
     });
@@ -30,11 +30,12 @@ const TextField = forwardRef(function TextField(props, ref) {
             [textFieldClasses.fullWidth]: fullWidth,
             [textFieldClasses.withPrefix]: prefix,
             [textFieldClasses.withSuffix]: suffix || suffixActionIcon,
-        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), children, suffix && jsx("div", { className: textFieldClasses.suffix, children: suffix }), suffixActionIcon && cloneElement(suffixActionIcon, {
-                className: cx(textFieldClasses.actionIcon, suffixActionIcon.props.className),
-                role: 'button',
-                tabIndex: -1,
-            }), clearable && (jsx(Icon, { className: textFieldClasses.clearIcon, icon: TimesIcon, onClick: (event) => {
+        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), children, suffix && jsx("div", { className: textFieldClasses.suffix, children: suffix }), suffixActionIcon &&
+                cloneElement(suffixActionIcon, {
+                    className: cx(textFieldClasses.actionIcon, suffixActionIcon.props.className),
+                    role: 'button',
+                    tabIndex: -1,
+                }), clearable && (jsx(Icon, { className: textFieldClasses.clearIcon, icon: TimesIcon, onClick: (event) => {
                     if (!disabled && onClear) {
                         onClear(event);
                     }

package/TextField/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextFieldSize, } from '@mezzanine-ui/core/text-field';
+export type { TextFieldSize } from '@mezzanine-ui/core/text-field';
 export { TextFieldProps, default } from './TextField';

package/TextField/useTextFieldControl.js

@@ -1,5 +1,5 @@
 function useTextFieldControl(props) {
-    const { onClick = undefined, onKeyDown = undefined, } = props || {};
+    const { onClick = undefined, onKeyDown = undefined } = props || {};
     const getRole = () => {
         if (typeof onClick !== 'undefined')
             return 'button';

package/Textarea/Textarea.js

@@ -12,11 +12,11 @@ import cx from 'clsx';
  * The react component for `mezzanine` textarea.
  */
 const Textarea = forwardRef(function Textarea(props, ref) {
-    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { size: globalSize } = useContext(MezzanineConfig);
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
     const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, maxLength, onChange: onChangeProp, placeholder, readOnly = false, required = requiredFromFormControl || false, rows, size = globalSize, textareaRef: textareaRefProp, textareaProps, value: valueProp, } = props;
     const textareaRef = useRef(null);
-    const [value, onChange, onClear,] = useInputWithClearControlValue({
+    const [value, onChange, onClear] = useInputWithClearControlValue({
         defaultValue,
         onChange: onChangeProp,
         ref: textareaRef,

package/TimePanel/index.d.ts

@@ -1,3 +1,3 @@
 export { TimePanelActionProps, default as TimePanelAction, } from './TimePanelAction';
 export { TimePanelColumnProps, default as TimePanelColumn, } from './TimePanelColumn';
-export { TimePanelProps, default, } from './TimePanel';
+export { TimePanelProps, default } from './TimePanel';

package/TimePicker/TimePicker.js

@@ -16,7 +16,7 @@ import { FormControlContext } from '../Form/FormControlContext.js';
  */
 const TimePicker = forwardRef(function TimePicker(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { defaultTimeFormat, } = useCalendarContext();
+    const { defaultTimeFormat } = useCalendarContext();
     const { className, clearable = true, confirmText, defaultValue, disabled = disabledFromFormControl, error = severity === 'error' || false, format = defaultTimeFormat, fullWidth = fullWidthFromFormControl, hideHour, hideMinute, hideSecond, hourPrefix, hourStep, inputProps, minutePrefix, minuteStep, onChange: onChangeProp, onPanelToggle: onPanelToggleProp, placeholder, popperProps, prefix, readOnly, required = requiredFromFormControl, secondPrefix, secondStep, size: sizeProp, value: valueProp, } = props;
     const { onBlur: onBlurProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, size: inputSize = format.length + 2, ...restInputProp } = inputProps || {};
     const formats = useMemo(() => [format], [format]);
@@ -106,7 +106,7 @@ const TimePicker = forwardRef(function TimePicker(props, ref) {
         }
         onPanelToggle(!open);
     };
-    const suffixActionIcon = (jsx(Icon, { icon: ClockIcon, onClick: onIconClick }));
+    const suffixActionIcon = jsx(Icon, { icon: ClockIcon, onClick: onIconClick });
     return (jsxs(Fragment, { children: [jsx(PickerTrigger, { ref: triggerComposedRef, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, onChange: onInputChange, onClear: onClear, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, size: sizeProp, suffixActionIcon: suffixActionIcon, value: inputValue }), jsx(TimePickerPanel, { ref: panelRef, anchor: anchorRef, confirmText: confirmText, hideHour: hideHour, hideMinute: hideMinute, hideSecond: hideSecond, hourPrefix: hourPrefix, hourStep: hourStep, minutePrefix: minutePrefix, minuteStep: minuteStep, onChange: onChange, onConfirm: onConfirm, open: open, popperProps: popperProps, secondPrefix: secondPrefix, secondStep: secondStep, value: internalValue })] }));
 });
 var TimePicker$1 = TimePicker;

package/TimePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { TimePickerPanelProps, default as TimePickerPanel, } from './TimePickerPanel';
-export { TimePickerProps, default, } from './TimePicker';
+export { TimePickerProps, default } from './TimePicker';

package/Tooltip/Tooltip.d.ts

@@ -15,7 +15,7 @@ export interface TooltipProps extends Omit<PopperProps, 'children' | 'title'> {
     mouseLeaveDelay?: number;
     /**
      * title of tooltip
-    */
+     */
     title?: ReactNode;
 }
 /**

package/Tooltip/Tooltip.js

@@ -20,7 +20,7 @@ const Tooltip = forwardRef(function Tooltip(props, ref) {
     const { modifiers = [] } = options;
     const tooltipRef = useRef(null);
     const composedRef = useComposeRefs([ref, tooltipRef]);
-    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible, } = useDelayMouseEnterLeave({
+    const { anchor, onLeave, onPopperEnter, onTargetEnter, visible } = useDelayMouseEnterLeave({
         mouseLeaveDelay,
     });
     /** tooltip shown only when title existed && visible is true */
@@ -28,10 +28,11 @@ const Tooltip = forwardRef(function Tooltip(props, ref) {
     return (jsxs(Fragment, { children: [jsx(Popper, { ...rest, ref: composedRef, anchor: anchorProp || anchor, className: cx(tooltipClasses.host, className), onMouseEnter: onPopperEnter, onMouseLeave: onLeave, open: isTooltipVisible, options: {
                     ...options,
                     modifiers: [...modifiers, offsetModifier],
-                }, children: title }), typeof children === 'function' && children({
-                onMouseEnter: onTargetEnter,
-                onMouseLeave: onLeave,
-            })] }));
+                }, children: title }), typeof children === 'function' &&
+                children({
+                    onMouseEnter: onTargetEnter,
+                    onMouseLeave: onLeave,
+                })] }));
 });
 var Tooltip$1 = Tooltip;
 

package/Tooltip/index.d.ts

@@ -1 +1 @@
-export { default, TooltipProps, } from './Tooltip';
+export { default, TooltipProps } from './Tooltip';

package/Tooltip/useDelayMouseEnterLeave.js

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 
 function useDelayMouseEnterLeave(opt) {
-    const { mouseLeaveDelay = 0.1, } = opt || {};
+    const { mouseLeaveDelay = 0.1 } = opt || {};
     /** state that control tooltip visible/invisible */
     const [visible, setVisible] = useState(false);
     /** tooltip reference anchor */

package/Transition/Collapse.js

@@ -33,7 +33,9 @@ const Collapse = forwardRef(function Collapse(props, ref) {
     const { autoTransitionDuration, addEndListener } = useAutoTransitionDuration(duration);
     const nodeRef = useRef(null);
     const wrapperRef = useRef(null);
-    const collapsedHeight = typeof collapsedHeightProp === 'number' ? `${collapsedHeightProp}px` : collapsedHeightProp;
+    const collapsedHeight = typeof collapsedHeightProp === 'number'
+        ? `${collapsedHeightProp}px`
+        : collapsedHeightProp;
     const getWrapperHeight = () => { var _a; return ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0; };
     const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
         delay,