@mezzanine-ui/react 0.6.4

package/Table/TableCell.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import Tooltip from '../Tooltip/Tooltip.js';
+import cx from 'clsx';
+
+const TableCell = forwardRef(function TableCell(props, ref) {
+    const { children, className, ellipsis = true, forceShownTooltipWhenHovered = false, role = 'gridcell', tooltipTitle, ...rest } = props;
+    const ellipsisRef = useRef(null);
+    return (jsx("div", Object.assign({ ref: ref }, rest, { className: cx(tableClasses.cell, className), role: role }, { children: ellipsis || forceShownTooltipWhenHovered ? (jsx(Tooltip, Object.assign({ title: `${tooltipTitle}`, options: {
+                placement: 'top-start',
+            } }, { children: ({ onMouseEnter, onMouseLeave }) => (jsx("div", Object.assign({ ref: ellipsisRef, className: ellipsis ? tableClasses.cellEllipsis : '', onMouseEnter: (e) => {
+                    if (ellipsisRef.current) {
+                        const { current: el } = ellipsisRef;
+                        const isOverflow = forceShownTooltipWhenHovered || (el.scrollWidth > el.offsetWidth);
+                        /** display tooltip only when content is overflow */
+                        if (isOverflow)
+                            onMouseEnter(e);
+                    }
+                }, onMouseLeave: onMouseLeave }, { children: children }), void 0)) }), void 0)) : children }), void 0));
+});
+
+export default TableCell;

package/Table/TableContext.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
+import { EmptyProps } from '../Empty';
+/** typeof rowSelection */
+export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'> {
+    selectedRowKeys: string[];
+    onChange(v: string): void;
+}
+/** typeof sorting */
+export interface SortingContext {
+    onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'dataIndex' | 'sorter' | 'onSorted'>): void;
+    onResetAll(): void;
+    sortedOn: string;
+    sortedType: string;
+}
+/** typeof loading */
+export interface LoadingContext {
+    setLoading(l: boolean): void;
+}
+/** typeof fetchMore */
+export interface FetchMoreContext {
+    onFetchMore(): void;
+    isFetching: boolean;
+    isReachEnd: boolean;
+}
+export interface TableContextProps {
+    scrollBarSize?: number;
+    emptyProps?: EmptyProps;
+    rowSelection?: RowSelectionContext;
+    sorting?: SortingContext;
+    loading?: boolean;
+    setLoading?(l: boolean): void;
+    expanding?: TableExpandable<TableRecord<unknown>>;
+    fetchMore?: FetchMoreContext;
+    pagination?: TablePagination;
+}
+export declare const TableContext: import("react").Context<TableContextProps | null>;
+export interface TableDataContextProps {
+    columns: TableColumn<TableRecord<unknown>>[];
+    dataSource: TableDataSource[];
+}
+export declare const TableDataContext: import("react").Context<TableDataContextProps | null>;
+export interface TableComponentContextProps {
+    bodyCell?: any;
+}
+export declare const TableComponentContext: import("react").Context<TableComponentContextProps | null>;

package/Table/TableContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const TableContext = createContext(null);
+const TableDataContext = createContext(null);
+const TableComponentContext = createContext(null);
+
+export { TableComponentContext, TableContext, TableDataContext };

package/Table/TableHeader.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const TableHeader: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export default TableHeader;

package/Table/TableHeader.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { TableContext, TableDataContext } from './TableContext.js';
+import { SELECTED_ALL_KEY } from './rowSelection/useTableRowSelection.js';
+import TableCell from './TableCell.js';
+import TableRowSelection from './rowSelection/TableRowSelection.js';
+import TableSortingIcon from './sorting/TableSortingIcon.js';
+import TableExpandable from './expandable/TableExpandable.js';
+import cx from 'clsx';
+
+const TableHeader = forwardRef(function TableHeader(props, ref) {
+    const { className, ...rest } = props;
+    const { rowSelection, expanding, } = useContext(TableContext) || {};
+    const { columns, } = useContext(TableDataContext) || {};
+    /** styling */
+    const getColumnStyle = useCallback((column) => {
+        let style = {};
+        if (column.width) {
+            style = {
+                ...style,
+                width: column.width,
+                maxWidth: column.width,
+            };
+        }
+        return style;
+    }, []);
+    const getCellStyle = useCallback((column) => {
+        let style = {};
+        if (column.align) {
+            style = {
+                ...style,
+                justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
+            };
+        }
+        return style;
+    }, []);
+    return (jsxs("div", Object.assign({ ref: ref }, rest, { className: cx(tableClasses.header, className), role: "rowgroup" }, { children: [rowSelection ? (jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }, void 0)) : null,
+            expanding && !rowSelection ? (jsx(TableExpandable, { showIcon: false }, void 0)) : null,
+            (columns !== null && columns !== void 0 ? columns : []).map((column) => {
+                var _a;
+                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));
+});
+
+export default TableHeader;

package/Table/editable/TableEditRenderWrapper.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TableColumn, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface EditableBodyCellProps extends NativeElementPropsWithoutKeyAndRef<'div'>, TableColumn<TableRecord<unknown>> {
+    rowData: TableDataSource;
+}
+declare function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }: EditableBodyCellProps): JSX.Element;
+export default TableEditRenderWrapper;

package/Table/editable/TableEditRenderWrapper.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, Fragment } from 'react';
+import { TableComponentContext } from '../TableContext.js';
+
+function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }) {
+    var _a;
+    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, Object.assign({}, customProps, rest, { dataIndex: dataIndex, editable: editable, rowData: rowData }, { children: children }), void 0));
+    }
+    return (jsx(Fragment, { children: children }, void 0));
+}
+
+export default TableEditRenderWrapper;

package/Table/expandable/TableExpandable.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface TableExpandableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * whether is expandable or not
+     * @default true
+     */
+    expandable?: boolean;
+    /**
+     * whether is expanded or not
+     */
+    expanded?: boolean;
+    /**
+     * toggle expanded
+     */
+    setExpanded?(e: boolean): void;
+    /**
+     * show icon or not
+     * @default true
+     */
+    showIcon?: boolean;
+}
+declare const TableExpandable: import("react").ForwardRefExoticComponent<TableExpandableProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableExpandable;

package/Table/expandable/TableExpandable.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { ChevronDownIcon } from '@mezzanine-ui/icons';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+const TableExpandable = forwardRef(function TableExpandable(props, ref) {
+    const { className, expandable = true, expanded, setExpanded, showIcon = true, ...rest } = props;
+    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));
+});
+
+export default TableExpandable;

package/Table/index.d.ts

@@ -0,0 +1,4 @@
+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';

package/Table/index.js

@@ -0,0 +1,3 @@
+export { default } from './Table.js';
+export { default as TableRefresh } from './refresh/TableRefresh.js';
+export { default as TableCell } from './TableCell.js';

package/Table/pagination/TablePagination.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface TablePaginationProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * body scroll ref
+     */
+    bodyRef: RefObject<HTMLDivElement>;
+}
+declare const TablePagination: import("react").ForwardRefExoticComponent<TablePaginationProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TablePagination;

package/Table/pagination/TablePagination.js

@@ -0,0 +1,27 @@
+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 { useTablePagination } from './useTablePagination.js';
+import Pagination from '../../Pagination/Pagination.js';
+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({
+        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,
+    });
+    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));
+});
+
+export default TablePagination;

package/Table/pagination/useTablePagination.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { TablePagination, TableDataSource } from '@mezzanine-ui/core/table';
+export interface UseTablePagination extends Omit<TablePagination, 'show'> {
+    bodyRef: RefObject<HTMLDivElement>;
+    dataSource: TableDataSource[];
+}
+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;
+}];

package/Table/pagination/useTablePagination.js

@@ -0,0 +1,49 @@
+import { useContext, useMemo } 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 { sorting, } = useContext(TableContext) || {};
+    const [current, setCurrent] = useControlValueState({
+        defaultValue: 1,
+        equalityFn,
+        value: currentProp,
+    });
+    const onChange = useLastCallback((newCurrent) => {
+        var _a, _b;
+        if (!equalityFn(current, newCurrent)) {
+            setCurrent(newCurrent);
+            /** reset body scroll position when page changed */
+            (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+            /** reset sorting status */
+            (_b = sorting === null || sorting === void 0 ? void 0 : sorting.onResetAll) === null || _b === void 0 ? void 0 : _b.call(sorting);
+        }
+        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];
+}
+
+export { useTablePagination };

package/Table/refresh/TableRefresh.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface TableRefreshProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    /**
+     * callback when button is clicked
+     */
+    onClick?(e: MouseEvent): void;
+}
+declare const TableRefresh: import("react").ForwardRefExoticComponent<TableRefreshProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableRefresh;

package/Table/refresh/TableRefresh.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { ResetIcon } from '@mezzanine-ui/icons';
+import { TableContext } from '../TableContext.js';
+import Button from '../../Button/Button.js';
+import Icon from '../../Icon/Icon.js';
+
+const TableRefresh = forwardRef(function TableRefresh(props, ref) {
+    const { className, children, onClick, ...rest } = props;
+    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,
+    ]);
+    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));
+});
+
+export default TableRefresh;

package/Table/rowSelection/TableRowSelection.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface TableRowSelectionProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * row key to control checkbox
+     */
+    rowKey: string;
+    /**
+     * show dropdown icon or not
+     * @default false
+     */
+    showDropdownIcon?: boolean;
+    /**
+     * function to get check status
+     */
+    setChecked?(c: boolean): void;
+}
+declare const TableRowSelection: import("react").ForwardRefExoticComponent<TableRowSelectionProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableRowSelection;

package/Table/rowSelection/TableRowSelection.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback, useMemo, useEffect, useState } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { MoreVerticalIcon } from '@mezzanine-ui/icons';
+import { TableContext, TableDataContext } from '../TableContext.js';
+import { SELECTED_ALL_KEY } from './useTableRowSelection.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';
+
+const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
+    var _a;
+    const { rowKey, setChecked, showDropdownIcon, ...rest } = props;
+    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);
+    }, [rowSelection, rowKey]);
+    const checkboxStatus = useMemo(() => {
+        var _a;
+        const selectedRowKeys = (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
+        if (!selectedRowKeys.length)
+            return 'none';
+        if (selectedRowKeys.length === dataSource.length)
+            return 'all';
+        return 'indeterminate';
+    }, [rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.selectedRowKeys, dataSource.length]);
+    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 name = isHeaderCheckbox ? '選擇全部' : '選擇';
+    /** parent callbacks */
+    useEffect(() => {
+        setChecked === null || setChecked === void 0 ? void 0 : setChecked(checked);
+    }, [checked, setChecked]);
+    /** If expandable icon existed, it will affect row selection styling (only when dropdown icon is hidden) */
+    const hiddenIconWithExpandableStyle = useMemo(() => {
+        if (!expanding || showDropdownIcon)
+            return {};
+        return {
+            host: {
+                paddingRight: 0,
+            },
+            icon: {
+                width: 0,
+            },
+        };
+    }, [showDropdownIcon, expanding]);
+    /** menu */
+    const [open, toggleOpen] = useState(false);
+    const isMenuAllowOpen = checked || indeterminate;
+    const onIconClicked = useCallback((evt) => {
+        evt.stopPropagation();
+        if (isMenuAllowOpen)
+            toggleOpen((prev) => !prev);
+    }, [isMenuAllowOpen]);
+    const onMenuItemClicked = (evt, action) => {
+        var _a;
+        evt.stopPropagation();
+        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, rowSelection.selectedRowKeys);
+        toggleOpen(false);
+    };
+    const actionMenu = (jsx(Menu, Object.assign({ size: "medium" }, { children: ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.actions) !== null && _a !== void 0 ? _a : []).map(((action) => (jsx(MenuItem, Object.assign({ className: action.className, onClick: (evt) => onMenuItemClicked(evt, action) }, { children: action.text }), action.key)))) }), void 0));
+    return (jsxs("div", Object.assign({ ref: ref }, rest, { className: tableClasses.selections, style: hiddenIconWithExpandableStyle.host }, { children: [jsx(Checkbox, { checked: checked, disabled: false, indeterminate: indeterminate, inputProps: {
+                    name,
+                }, onChange: onSelected, size: "medium" }, void 0),
+            jsx("div", Object.assign({ className: tableClasses.icon, style: hiddenIconWithExpandableStyle.icon }, { children: showDropdownIcon ? (jsx(Dropdown, Object.assign({ menu: actionMenu, onClose: () => toggleOpen(false), popperProps: {
+                        open,
+                        options: {
+                            placement: 'bottom-start',
+                        },
+                    } }, { 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));
+});
+
+export default TableRowSelection;

package/Table/rowSelection/useTableRowSelection.d.ts

@@ -0,0 +1,6 @@
+import { TableRowSelection, TableDataSource } from '@mezzanine-ui/core/table';
+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) => void];

package/Table/rowSelection/useTableRowSelection.js

@@ -0,0 +1,53 @@
+import { useControlValueState } from '../../Form/useControlValueState.js';
+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]);
+};
+const SELECTED_ALL_KEY = 'MZN-TABLE-ROW-SELECTION-ALL';
+function useTableRowSelection(props) {
+    const { selectedRowKey: selectedRowKeyProp, onChange: onChangeProp, dataSource, } = props;
+    const [selectedRowKey, setSelectedRowKey] = useControlValueState({
+        defaultValue: [],
+        equalityFn,
+        value: selectedRowKeyProp,
+    });
+    const onChange = useLastCallback((rowKey) => {
+        if (!dataSource.length)
+            return;
+        const allSourceKeys = dataSource.map((source) => (source.key || source.id));
+        let nextSelectedRowKey = selectedRowKey;
+        if (rowKey === SELECTED_ALL_KEY) {
+            if (equalityFn(selectedRowKey, allSourceKeys)) {
+                nextSelectedRowKey = [];
+            }
+            else {
+                nextSelectedRowKey = allSourceKeys;
+            }
+        }
+        else {
+            const existedRowKeyIdx = selectedRowKey.findIndex((key) => key === rowKey);
+            if (~existedRowKeyIdx) {
+                nextSelectedRowKey = [
+                    ...selectedRowKey.slice(0, existedRowKeyIdx),
+                    ...selectedRowKey.slice(existedRowKeyIdx + 1),
+                ];
+            }
+            else {
+                nextSelectedRowKey = [
+                    ...selectedRowKey,
+                    rowKey,
+                ];
+            }
+        }
+        setSelectedRowKey(nextSelectedRowKey);
+        if (onChangeProp) {
+            onChangeProp(nextSelectedRowKey);
+        }
+    });
+    return [selectedRowKey, onChange];
+}
+
+export { SELECTED_ALL_KEY, useTableRowSelection };

package/Table/sorting/TableSortingIcon.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TableColumn, TableRecord } from '@mezzanine-ui/core/table';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface TableSortingIconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
+    /**
+     * current table column
+     */
+    column: TableColumn<TableRecord<unknown>>;
+}
+declare const TableSortingIcon: import("react").ForwardRefExoticComponent<TableSortingIconProps & import("react").RefAttributes<HTMLElement>>;
+export default TableSortingIcon;

package/Table/sorting/TableSortingIcon.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useMemo } from 'react';
+import { tableClasses } from '@mezzanine-ui/core/table';
+import { ArrowRightIcon } from '@mezzanine-ui/icons';
+import { TableContext } from '../TableContext.js';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
+    const { className, column, ...rest } = props;
+    const { sorting, } = useContext(TableContext) || {};
+    const { dataIndex, } = column;
+    /** styling */
+    const currentType = (dataIndex === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
+    const currentIconStyle = useMemo(() => ({
+        color: currentType === 'none' ? 'secondary' : 'primary',
+        style: {
+            transform: `rotate(${90 * (currentType === 'asc' ? -1 : 1)}deg)`,
+        },
+    }), [currentType]);
+    return (jsx(Icon, Object.assign({}, rest, { ref: ref, className: cx(tableClasses.icon, tableClasses.iconClickable, className), color: currentIconStyle.color, icon: ArrowRightIcon, onClick: (evt) => {
+            var _a;
+            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));
+});
+
+export default TableSortingIcon;

package/Table/sorting/useTableSorting.d.ts

@@ -0,0 +1,10 @@
+import { TableDataSource, TableColumn } from '@mezzanine-ui/core/table';
+export interface UseTableSorting {
+    dataSource: TableDataSource[];
+}
+export declare type SortedType = 'desc' | 'asc' | 'none';
+export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<Record<string, unknown>>, "dataIndex" | "sorter" | "onSorted">) => void, {
+    readonly sortedOn: string;
+    readonly sortedType: SortedType;
+    readonly onResetAll: () => void;
+}];