@mezzanine-ui/react 0.15.3 → 1.0.0-alpha.0

package/Table/Table.d.ts

@@ -99,7 +99,7 @@ export interface TableWithPagination<T> extends TableBaseProps<T> {
      * `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 />
+     * `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;

package/Table/Table.js

@@ -15,7 +15,7 @@ import { useTableDraggable } from './draggable/useTableDraggable.js';
 import useTableScroll from './useTableScroll.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { composeRefs } from '../utils/composeRefs.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import cx from 'clsx';
 
 const Table = forwardRef(function Table(props, ref) {
@@ -155,7 +155,7 @@ const Table = forwardRef(function Table(props, ref) {
         }
         return undefined;
     }, [bodyRowClassName]);
-    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: {
+    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(Spin, { loading: loading, stretch: true, description: loadingTip, backdropProps: {
                             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
                                             ? {
@@ -178,6 +178,5 @@ const Table = forwardRef(function Table(props, ref) {
                                                         transition: '0.1s',
                                                     } }) }) }) })] })) }) }) }) }) }) }));
 });
-var Table$1 = Table;
 
-export { Table$1 as default };
+export { Table as default };

package/Table/TableBody.js

@@ -1,9 +1,10 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { TableDataContext, TableContext } from './TableContext.js';
 import TableBodyRow from './TableBodyRow.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import Empty from '../Empty/Empty.js';
 import cx from 'clsx';
 
@@ -24,7 +25,7 @@ const TableBody = forwardRef(function TableBody(props, ref) {
     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 === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), 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] }));
+    return (jsxs("tbody", { ...rest, ref: ref, className: cx(tableClasses.body, className), children: [currentDataSource.length ? (currentDataSource.map((rowData, index) => (jsx(TableBodyRow, { className: rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(rowData), 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(Spin, { loading: true }) }) })) : null] }));
 });
 
 export { TableBody as default };

package/Table/TableBodyRow.js

@@ -1,3 +1,4 @@
+'use client';
 import { forwardRef, useContext, useState, useMemo, Fragment, createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';

package/Table/TableCell.js

@@ -20,6 +20,5 @@ const TableCell = forwardRef(function TableCell(props, ref) {
                     }
                 }, onMouseLeave: onMouseLeave, children: children })) })) : (children) }));
 });
-var TableCell$1 = TableCell;
 
-export { TableCell$1 as default };
+export { TableCell as default };

package/Table/TableContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 const TableContext = createContext(null);

package/Table/TableExpandedTable.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';

package/Table/TableHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useMemo } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';

package/Table/draggable/useTableDraggable.d.ts

@@ -10,5 +10,5 @@ export declare function useTableDraggable(props: UseTableDraggable): {
     onBeforeDragStart: (e: {
         draggableId: SetStateAction<string>;
     }) => void;
-    onDragEnd: import("@hello-pangea/dnd").OnDragEndResponder;
+    onDragEnd: import("@hello-pangea/dnd").OnDragEndResponder<string>;
 };

package/Table/editable/TableEditRenderWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { TableComponentContext } from '../TableContext.js';

package/Table/expandable/TableExpandable.js

@@ -18,7 +18,7 @@ const TableExpandable = forwardRef(function TableExpandable(props, ref) {
     };
     return (jsx("div", { ...rest, ref: ref, className: cx(tableClasses.collapseAction, className), children: jsx("div", { className: tableClasses.icon, children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
                     [tableClasses.iconClickable]: expandable,
-                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
+                }), color: expandable ? 'brand' : 'neutral-faint', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
 });
 
 export { TableExpandable as default };

package/Table/index.d.ts

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

package/Table/pagination/TablePagination.d.ts

@@ -4,7 +4,7 @@ export interface TablePaginationProps extends NativeElementPropsWithoutKeyAndRef
     /**
      * body scroll ref
      */
-    bodyRef: RefObject<HTMLDivElement>;
+    bodyRef: RefObject<HTMLDivElement | null>;
 }
 declare const TablePagination: import("react").ForwardRefExoticComponent<TablePaginationProps & import("react").RefAttributes<HTMLDivElement>>;
 export default TablePagination;

package/Table/pagination/TablePagination.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';

package/Table/pagination/useTablePagination.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { TablePagination } from '@mezzanine-ui/core/table';
 export interface UseTablePagination {
-    bodyRef: RefObject<HTMLDivElement>;
+    bodyRef: RefObject<HTMLDivElement | null>;
     current?: TablePagination['current'];
     onChange?: TablePagination['onChange'];
 }

package/Table/pagination/useTablePagination.js

@@ -1,3 +1,4 @@
+'use client';
 import { useContext } from 'react';
 import { useControlValueState } from '../../Form/useControlValueState.js';
 import { useLastCallback } from '../../hooks/useLastCallback.js';

package/Table/refresh/TableRefresh.js

@@ -1,5 +1,7 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useCallback } from 'react';
+import cx from 'clsx';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { ResetIcon } from '@mezzanine-ui/icons';
 import { TableContext } from '../TableContext.js';
@@ -14,8 +16,7 @@ const TableRefresh = forwardRef(function TableRefresh(props, ref) {
         setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [onClick, setLoading]);
-    return (jsx("div", { ref: ref, className: tableClasses.refresh, ...rest, children: jsx(Button, { onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }), children: children || '重新整理' }) }));
+    return (jsx("div", { ref: ref, className: cx(tableClasses.refresh, className), ...rest, children: jsx(Button, { onClick: onRefreshClicked, prefix: jsx(Icon, { icon: ResetIcon }), children: children || '重新整理' }) }));
 });
-var TableRefresh$1 = TableRefresh;
 
-export { TableRefresh$1 as default };
+export { TableRefresh as default };

package/Table/rowSelection/TableRowSelection.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useCallback, useMemo, useEffect, useState } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
@@ -5,9 +6,9 @@ import xor from 'lodash/xor';
 import { MoreVerticalIcon } from '@mezzanine-ui/icons';
 import { TableContext, TableDataContext } from '../TableContext.js';
 import { SELECTED_ALL_KEY } from './useTableRowSelection.js';
+import Checkbox from '../../Checkbox/Checkbox.js';
 import Menu from '../../Menu/Menu.js';
 import MenuItem from '../../Menu/MenuItem.js';
-import Checkbox from '../../Checkbox/Checkbox.js';
 import Dropdown from '../../Dropdown/Dropdown.js';
 import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
@@ -86,7 +87,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 })) })) : null })) : null] }));
+                        }), color: isMenuAllowOpen ? 'brand' : 'neutral-faint', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
 });
 
 export { TableRowSelection as default };

package/Table/sorting/TableSortingIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
@@ -14,7 +15,7 @@ const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
     /** styling */
     const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
     const currentIconStyle = useMemo(() => ({
-        color: currentType === 'none' ? 'secondary' : 'primary',
+        color: currentType === 'none' ? 'neutral' : 'neutral-strong',
         style: {
             transform: `rotate(${90 * (currentType === 'asc' ? -1 : 1)}deg)`,
         },

package/Table/sorting/useTableSorting.js

@@ -56,6 +56,7 @@ function useTableSorting(props) {
             !equalityFn(prevDataSourceProps, dataSourceProp, true)) {
             setDataSource(dataSourceProp);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevDataSourceProps, dataSourceProp]);
     const getNextSortedType = useCallback((currentType) => {
         // none -> desc -> asc -> none

package/Table/useTableFetchMore.js

@@ -39,7 +39,7 @@ function useTableFetchMore(props) {
         if (prevSourceLength !== currentSourceLength) {
             onFetching(false);
         }
-    }, [prevSourceLength, currentSourceLength]);
+    }, [prevSourceLength, currentSourceLength, onFetching]);
     return {
         fetchMore,
         isFetching,

package/Table/useTableScroll.d.ts

@@ -5,12 +5,12 @@ interface TableScrollProps {
     scrollBarSize?: number;
 }
 export default function useTableScroll(props: TableScrollProps): readonly [{
-    ref: import("react").RefObject<HTMLDivElement>;
-    target: import("react").RefObject<HTMLTableElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    target: import("react").RefObject<HTMLTableElement | null>;
     onScroll: UIEventHandler<HTMLDivElement>;
 }, {
-    ref: import("react").RefObject<HTMLDivElement>;
-    trackRef: import("react").RefObject<HTMLDivElement>;
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    trackRef: import("react").RefObject<HTMLDivElement | null>;
     scrollBarSize: number;
     onMouseDown: ({ clientY }: {
         clientY: number;
@@ -20,19 +20,21 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
     onMouseLeave: () => void;
     style: {
         height: string;
-        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -56,7 +58,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -68,8 +69,14 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -145,7 +152,7 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -195,8 +202,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
@@ -277,6 +282,8 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
@@ -285,24 +292,34 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     };
     trackStyle: {
         height: string;
-        ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className?: string | undefined;
         contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "false" | "true") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -326,7 +343,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -338,8 +354,14 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
@@ -415,7 +437,7 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -465,8 +487,6 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
@@ -547,6 +567,8 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
         onScroll?: UIEventHandler<HTMLDivElement> | undefined;
         onScrollCapture?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEnd?: UIEventHandler<HTMLDivElement> | undefined;
+        onScrollEndCapture?: UIEventHandler<HTMLDivElement> | undefined;
         onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
         onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
@@ -555,8 +577,16 @@ export default function useTableScroll(props: TableScrollProps): readonly [{
         onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+        onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     };
 }, boolean];
 export {};

package/Table/useTableScroll.js

@@ -37,7 +37,7 @@ function useTableScroll(props) {
     const tableRef = useRef(null);
     const scrollBarTrackRef = useRef(null);
     const scrollBarRef = useRef(null);
-    const scrollBarDisplayTimer = useRef();
+    const scrollBarDisplayTimer = useRef(undefined);
     const [scrollBarHeight, setScrollBarHeight] = useState(0);
     const [pointerOffset, setPointerOffset] = useState(0);
     const [isHorizontalScrolling, toggleIsHorizontalScrolling] = useState(false);
@@ -77,7 +77,7 @@ function useTableScroll(props) {
             !scrollBarTrackRef.current)
             return;
         /** 觸控螢幕不需要 scroll bar */
-        const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+        const isTouchEnabled = navigator.maxTouchPoints > 0;
         /** firefox 的滾軸只能同時顯示 or 取消，所以乾脆就用原生的（除非能單獨關掉直向的滾軸，只顯示橫向的才行） */
         const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         if (isTouchEnabled || isFirefox)
@@ -98,7 +98,7 @@ function useTableScroll(props) {
                 `${scrollBarSize}px`;
         }
         resetPointerOffset();
-    }, []);
+    }, [resetPointerOffset, scrollBarSize]);
     /** when use mouse to drag scroll bar, get cursor position */
     const onScrollBarMouseDown = useCallback(({ clientY }) => {
         const { current: scrollBar } = scrollBarRef;
@@ -107,7 +107,7 @@ function useTableScroll(props) {
         const { top: initScrollBarTop } = scrollBar.getBoundingClientRect();
         setPointerOffset(clientY - initScrollBarTop);
     }, []);
-    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), []);
+    const onScrollBarMouseUp = useCallback(() => resetPointerOffset(), [resetPointerOffset]);
     /** 偵測 table 高度是否發生變化，有的話就要重新計算 scroll bar 長度 */
     useEffect(() => {
         const { current: table } = tableRef;
@@ -122,7 +122,7 @@ function useTableScroll(props) {
             };
         }
         return () => { };
-    }, []);
+    }, [onSetScrollBarHeight]);
     useEffect(() => {
         const { current: body } = scrollRef;
         const { current: scrollBar } = scrollBarRef;
@@ -208,7 +208,7 @@ function useTableScroll(props) {
             scrollBarRef.current.childNodes[0].style.width =
                 `${scrollBarSize + 6}px`;
         }
-    }, []);
+    }, [scrollBarSize]);
     /** scroll table directly */
     const setScrollBarTop = useCallback(() => {
         if (scrollRef.current) {
@@ -224,7 +224,7 @@ function useTableScroll(props) {
                 scrollBarTrackRef.current.style.height = `${tableHeight - HEADER_DEFAULT_HEIGHT}px`;
             }
         }
-    }, [scrollBarHeight, pointerOffset]);
+    }, [pointerOffset]);
     const onScroll = useCallback((scrollTarget) => {
         /** 使用者開始橫向滾動 */
         if (scrollTarget.target.scrollLeft) {
@@ -270,7 +270,9 @@ function useTableScroll(props) {
             ...defaultScrollBarTrackStyle,
             height: `${(_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) !== null && _b !== void 0 ? _b : 0}px`,
         });
-    }, [scrollBarHeight]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scrollBarHeight]);
     /** composing result */
     const tableScrollContainer = {
         ref: scrollRef,

package/Tabs/Tab.js

@@ -12,6 +12,5 @@ const Tab = forwardRef(function Tab(props, ref) {
             [tabsClasses.tabActive]: active,
         }, className), disabled: disabled, children: children }));
 });
-var Tab$1 = Tab;
 
-export { Tab$1 as default };
+export { Tab as default };

package/Tabs/TabPane.js

@@ -11,9 +11,9 @@ const TabPane = forwardRef(function TabPane(props, ref) {
     /**
      * Ignore it
      */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     tab, ...rest } = props;
     return (jsx("div", { ...rest, ref: ref, className: cx(tabsClasses.pane, className), children: children }));
 });
-var TabPane$1 = TabPane;
 
-export { TabPane$1 as default };
+export { TabPane as default };

package/Tabs/Tabs.js

@@ -18,15 +18,11 @@ const Tabs = forwardRef(function Tabs(props, ref) {
         onChange,
         value: activeKeyProp,
     });
-    let pane;
     const tabs = Children.map(children, (tabPane, index) => {
         var _a;
         const key = (_a = tabPane.key) !== null && _a !== void 0 ? _a : index;
         const { tab } = tabPane.props;
         const active = activeKey.toString() === key.toString();
-        if (active) {
-            pane = tabPane;
-        }
         return cloneElement(tab, {
             key,
             active,
@@ -40,9 +36,17 @@ const Tabs = forwardRef(function Tabs(props, ref) {
             },
         });
     });
+    let pane;
+    Children.forEach(children, (tabPane, index) => {
+        var _a;
+        const child = tabPane;
+        const key = (_a = child.key) !== null && _a !== void 0 ? _a : index;
+        if (activeKey.toString() === key.toString()) {
+            pane = child;
+        }
+    });
     const { isOverflowing, isScrollToBegin, isScrollToEnd, scrollToLeft, scrollToRight, } = useTabsOverflow(tabsRef);
     return (jsxs("div", { ...rest, ref: ref, className: cx(tabsClasses.host, className), children: [jsxs("div", { className: cx(tabsClasses.tabBar, tabBarClassName), children: [jsxs("div", { className: tabsClasses.overflow, children: [isOverflowing && !isScrollToBegin && (jsx("button", { "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button", children: jsx(Icon, { icon: ChevronLeftIcon }) })), jsx("div", { ref: tabsRef, className: tabsClasses.tabs, children: tabs }), isOverflowing && !isScrollToEnd && (jsx("button", { "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button", children: jsx(Icon, { icon: ChevronRightIcon }) }))] }), actions] }), pane] }));
 });
-var Tabs$1 = Tabs;
 
-export { Tabs$1 as default };
+export { Tabs as default };

package/Tabs/index.d.ts

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

package/Tabs/useTabsOverflow.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export default function useTabsOverflow(tabsRef: RefObject<HTMLElement>): {
+export default function useTabsOverflow(tabsRef: RefObject<HTMLElement | null>): {
     isOverflowing: boolean;
     isScrollToBegin: boolean;
     isScrollToEnd: boolean;

package/Tabs/useTabsOverflow.js

@@ -42,13 +42,14 @@ function useTabsOverflow(tabsRef) {
             window.addEventListener('resize', handleOverflowingState);
             tabsRef.current.addEventListener('scroll', handleScrollState);
             return () => {
-                if (tabsRef.current) {
+                const { current: tabsEl } = tabsRef;
+                if (tabsEl) {
                     window.removeEventListener('resize', handleOverflowingState);
-                    tabsRef.current.removeEventListener('scroll', handleScrollState);
+                    tabsEl.removeEventListener('scroll', handleScrollState);
                 }
             };
         }
-    }, [tabsRef.current]);
+    }, [tabsRef]);
     return {
         isOverflowing,
         isScrollToBegin,