@mezzanine-ui/react 0.13.10 → 0.13.12

package/Table/TableBodyRow.js

@@ -13,51 +13,51 @@ import AccordionDetails from '../Accordion/AccordionDetails.js';
 import { composeRefs } from '../utils/composeRefs.js';
 import cx from 'clsx';
 
-const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
-    const { className, rowData, rowIndex, ...rest } = props;
-    const { rowSelection, expanding, isHorizontalScrolling, scroll, draggable, } = useContext(TableContext) || {};
-    const { columns, } = useContext(TableDataContext) || {};
-    /** Feature rowSelection */
-    const [selected, setSelected] = useState(false);
-    /** Feature expandable */
-    const [expanded, setExpanded] = useState(false);
-    const isExpandable = useMemo(() => {
-        var _a, _b;
-        return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.rowExpandable) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : false);
-    }, [expanding, rowData]);
-    const renderedExpandedContent = useMemo(() => {
-        var _a, _b;
-        return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.expandedRowRender) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : null);
-    }, [expanding, rowData]);
-    /** Feature scrolling */
-    const isFirstColumnShouldSticky = useMemo(() => {
-        var _a;
-        /** 前面有 action 時不可 sticky */
-        if (rowSelection || expanding)
-            return false;
-        return ((_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false);
-    }, [
-        rowSelection,
-        expanding,
-        scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
-    ]);
-    return (jsxs(Fragment, { children: [jsx(Draggable, { index: rowIndex, draggableId: rowData.key || rowData.id, isDragDisabled: !(draggable === null || draggable === void 0 ? void 0 : draggable.enabled), children: (draggableProvided) => (jsxs("tr", { ...rest, ...draggableProvided.draggableProps, ...draggableProvided.dragHandleProps, ref: composeRefs([ref, draggableProvided.innerRef]), className: cx(tableClasses.bodyRow, {
-                        [tableClasses.bodyRowHighlight]: selected || expanded,
-                        [tableClasses.bodyRowDragging]: (draggable === null || draggable === void 0 ? void 0 : draggable.draggingId)
-                            && draggable.draggingId === (rowData.key || rowData.id),
-                    }, className), children: [rowSelection ? (jsx("td", { className: tableClasses.bodyRowCellWrapper, style: {
-                                flex: 'unset',
-                                minWidth: 'unset',
-                            }, children: jsx(TableRowSelection, { rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }) })) : null, expanding ? (jsx("td", { className: tableClasses.bodyRowCellWrapper, style: {
-                                flex: 'unset',
-                                minWidth: 'unset',
-                            }, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
-                            var _a, _b, _c, _d;
-                            const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                            const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
-                            return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}`));
-                        })] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
-});
+const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
+    const { className, rowData, rowIndex, ...rest } = props;
+    const { rowSelection, expanding, isHorizontalScrolling, scroll, draggable, } = useContext(TableContext) || {};
+    const { columns, } = useContext(TableDataContext) || {};
+    /** Feature rowSelection */
+    const [selected, setSelected] = useState(false);
+    /** Feature expandable */
+    const [expanded, setExpanded] = useState(false);
+    const isExpandable = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.rowExpandable) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : false);
+    }, [expanding, rowData]);
+    const renderedExpandedContent = useMemo(() => {
+        var _a, _b;
+        return ((_b = (_a = expanding === null || expanding === void 0 ? void 0 : expanding.expandedRowRender) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData)) !== null && _b !== void 0 ? _b : null);
+    }, [expanding, rowData]);
+    /** Feature scrolling */
+    const isFirstColumnShouldSticky = useMemo(() => {
+        var _a;
+        /** 前面有 action 時不可 sticky */
+        if (rowSelection || expanding)
+            return false;
+        return ((_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false);
+    }, [
+        rowSelection,
+        expanding,
+        scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
+    ]);
+    return (jsxs(Fragment, { children: [jsx(Draggable, { index: rowIndex, draggableId: rowData.key || rowData.id, isDragDisabled: !(draggable === null || draggable === void 0 ? void 0 : draggable.enabled), children: (draggableProvided) => (jsxs("tr", { ...rest, ...draggableProvided.draggableProps, ...draggableProvided.dragHandleProps, ref: composeRefs([ref, draggableProvided.innerRef]), className: cx(tableClasses.bodyRow, {
+                        [tableClasses.bodyRowHighlight]: selected || expanded,
+                        [tableClasses.bodyRowDragging]: (draggable === null || draggable === void 0 ? void 0 : draggable.draggingId)
+                            && draggable.draggingId === (rowData.key || rowData.id),
+                    }, className), children: [rowSelection ? (jsx("td", { "aria-label": "Selection", className: tableClasses.bodyRowCellWrapper, style: {
+                                flex: 'unset',
+                                minWidth: 'unset',
+                            }, children: jsx(TableRowSelection, { rowKey: (rowData.key || rowData.id), setChecked: (status) => setSelected(status), showDropdownIcon: false }) })) : null, expanding ? (jsx("td", { "aria-label": "Expand", className: tableClasses.bodyRowCellWrapper, style: {
+                                flex: 'unset',
+                                minWidth: 'unset',
+                            }, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
+                            var _a, _b, _c, _d;
+                            const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                            const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
+                            return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}-${(rowData.key || rowData.id)}`));
+                        })] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
+});
 var TableBodyRow$1 = TableBodyRow;
 
 export { TableBodyRow$1 as default };

package/Table/TableCell.d.ts

@@ -1,20 +1,20 @@
-/// <reference types="react" />
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableCellProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * whether cell content should be ellipsis
-     * @default true
-     */
-    ellipsis?: boolean;
-    /**
-     * whether tooltip is force to shown when hovered
-     * @default false
-     */
-    forceShownTooltipWhenHovered?: boolean;
-    /**
-     * tooltip title that you want to display
-     */
-    tooltipTitle?: string | number;
-}
-declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableCell;
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableCellProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * whether cell content should be ellipsis
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * whether tooltip is force to shown when hovered
+     * @default false
+     */
+    forceShownTooltipWhenHovered?: boolean;
+    /**
+     * tooltip title that you want to display
+     */
+    tooltipTitle?: string | number;
+}
+declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableCell;

package/Table/TableCell.js

@@ -4,21 +4,21 @@ 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, tooltipTitle, ...rest } = props;
-    const ellipsisRef = useRef(null);
-    return (jsx("div", { ref: ref, ...rest, className: cx(tableClasses.cell, className), children: ellipsis || forceShownTooltipWhenHovered ? (jsx(Tooltip, { title: `${tooltipTitle}`, options: {
-                placement: 'top-start',
-            }, children: ({ onMouseEnter, onMouseLeave }) => (jsx("div", { 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 })) })) : children }));
-});
+const TableCell = forwardRef(function TableCell(props, ref) {
+    const { children, className, ellipsis = true, forceShownTooltipWhenHovered = false, tooltipTitle, ...rest } = props;
+    const ellipsisRef = useRef(null);
+    return (jsx("div", { ref: ref, ...rest, className: cx(tableClasses.cell, className), children: ellipsis || forceShownTooltipWhenHovered ? (jsx(Tooltip, { title: `${tooltipTitle}`, options: {
+                placement: 'top-start',
+            }, children: ({ onMouseEnter, onMouseLeave }) => (jsx("div", { 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 })) })) : children }));
+});
 var TableCell$1 = TableCell;
 
 export { TableCell$1 as default };

package/Table/TableContext.d.ts

@@ -1,52 +1,52 @@
-import { ReactNode } from 'react';
-import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources, TableScrolling, TableDraggable } 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 {
-    isHorizontalScrolling?: boolean;
-    emptyProps?: EmptyProps;
-    rowSelection?: RowSelectionContext;
-    sorting?: SortingContext;
-    loading?: boolean;
-    setLoading?(l: boolean): void;
-    expanding?: Omit<TableExpandable<TableRecord<unknown>>, 'expandedRowRender'> & {
-        expandedRowRender(record: TableRecord<unknown>): ReactNode | ExpandRowBySources;
-    };
-    fetchMore?: FetchMoreContext;
-    pagination?: TablePagination;
-    scroll?: TableScrolling;
-    draggable?: TableDraggable & {
-        draggingId: string;
-    };
-}
-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>;
+import { ReactNode } from 'react';
+import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources, TableScrolling, TableDraggable } 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 {
+    isHorizontalScrolling?: boolean;
+    emptyProps?: EmptyProps;
+    rowSelection?: RowSelectionContext;
+    sorting?: SortingContext;
+    loading?: boolean;
+    setLoading?(l: boolean): void;
+    expanding?: Omit<TableExpandable<TableRecord<unknown>>, 'expandedRowRender'> & {
+        expandedRowRender(record: TableRecord<unknown>): ReactNode | ExpandRowBySources;
+    };
+    fetchMore?: FetchMoreContext;
+    pagination?: TablePagination;
+    scroll?: TableScrolling;
+    draggable?: TableDraggable & {
+        draggingId: string;
+    };
+}
+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

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

package/Table/TableExpandedTable.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { TableDataSource, ExpandedTableColumn } from '@mezzanine-ui/core/table';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableExpandedTableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    renderedExpandedContent: {
-        dataSource: TableDataSource[];
-        columns?: ExpandedTableColumn[];
-        className?: string;
-    };
-}
-declare const TableExpandedTable: import("react").ForwardRefExoticComponent<TableExpandedTableProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TableExpandedTable;
+/// <reference types="react" />
+import { TableDataSource, ExpandedTableColumn } from '@mezzanine-ui/core/table';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TableExpandedTableProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    renderedExpandedContent: {
+        dataSource: TableDataSource[];
+        columns?: ExpandedTableColumn[];
+        className?: string;
+    };
+}
+declare const TableExpandedTable: import("react").ForwardRefExoticComponent<TableExpandedTableProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableExpandedTable;

package/Table/TableExpandedTable.js

@@ -7,20 +7,20 @@ import TableCell from './TableCell.js';
 import TableExpandable from './expandable/TableExpandable.js';
 import cx from 'clsx';
 
-const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
-    const { renderedExpandedContent, } = props;
-    const { columns, } = useContext(TableDataContext) || {};
-    return (jsx("div", { className: tableClasses.bodyRowExpandedTable, children: renderedExpandedContent.dataSource.map((source, sourceIndex) => {
-            var _a;
-            return (jsxs("div", { ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow, renderedExpandedContent.className), role: "row", children: [jsx(TableExpandable, { showIcon: false }), ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : [])
-                        .map((column, index) => {
-                        var _a, _b, _c, _d;
-                        const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
-                    })] }, (source.key || source.id)));
-        }) }));
-});
+const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
+    const { renderedExpandedContent, } = props;
+    const { columns, } = useContext(TableDataContext) || {};
+    return (jsx("div", { className: tableClasses.bodyRowExpandedTable, children: renderedExpandedContent.dataSource.map((source, sourceIndex) => {
+            var _a;
+            return (jsxs("div", { ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow, renderedExpandedContent.className), role: "row", children: [jsx(TableExpandable, { showIcon: false }), ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : [])
+                        .map((column, index) => {
+                        var _a, _b, _c, _d;
+                        const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
+                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
+                    })] }, (source.key || source.id)));
+        }) }));
+});
 var TableExpandedTable$1 = TableExpandedTable;
 
 export { TableExpandedTable$1 as default };

package/Table/TableHeader.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-declare const TableHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"div"> & import("react").RefAttributes<HTMLTableRowElement>>;
-export default TableHeader;
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+declare const TableHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"div"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export default TableHeader;

package/Table/TableHeader.js

@@ -9,26 +9,26 @@ 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, isHorizontalScrolling, scroll, expanding, } = useContext(TableContext) || {};
-    const { columns, } = useContext(TableDataContext) || {};
-    const isFirstColumnShouldSticky = useMemo(() => {
-        var _a;
-        /** 前面有 action 時不可 sticky */
-        if (rowSelection || expanding)
-            return false;
-        return ((_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false);
-    }, [
-        rowSelection,
-        expanding,
-        scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
-    ]);
-    return (jsx("thead", { className: tableClasses.headerFixed, children: jsxs("tr", { ref: ref, ...rest, className: cx(tableClasses.header, className), children: [rowSelection ? (jsx("th", { style: { display: 'flex' }, children: jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }) })) : null, expanding && !rowSelection ? (jsx("th", { style: { display: 'flex' }, children: jsx(TableExpandable, { showIcon: false }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
-                    var _a;
-                    return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${column.dataIndex}-${column.title}`));
-                })] }) }));
-});
+const TableHeader = forwardRef(function TableHeader(props, ref) {
+    const { className, ...rest } = props;
+    const { rowSelection, isHorizontalScrolling, scroll, expanding, } = useContext(TableContext) || {};
+    const { columns, } = useContext(TableDataContext) || {};
+    const isFirstColumnShouldSticky = useMemo(() => {
+        var _a;
+        /** 前面有 action 時不可 sticky */
+        if (rowSelection || expanding)
+            return false;
+        return ((_a = scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn) !== null && _a !== void 0 ? _a : false);
+    }, [
+        rowSelection,
+        expanding,
+        scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
+    ]);
+    return (jsx("thead", { className: tableClasses.headerFixed, children: jsxs("tr", { ref: ref, ...rest, className: cx(tableClasses.header, className), children: [rowSelection ? (jsx("th", { "aria-label": "Row Selection", style: { display: 'flex' }, children: jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }) })) : null, expanding && !rowSelection ? (jsx("th", { "aria-label": "Row Expansion", style: { display: 'flex' }, children: jsx(TableExpandable, { showIcon: false }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
+                    var _a;
+                    return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${column.dataIndex}-${column.title}`));
+                })] }) }));
+});
 var TableHeader$1 = TableHeader;
 
 export { TableHeader$1 as default };

package/Table/draggable/useTableDraggable.d.ts

@@ -1,14 +1,14 @@
-import { Dispatch, SetStateAction } from 'react';
-import { TableDataSource, TableDraggable } from '@mezzanine-ui/core/table';
-export interface UseTableDraggable {
-    dataSource: TableDataSource[];
-    setDataSource: Dispatch<SetStateAction<TableDataSource[]>>;
-    draggable?: TableDraggable;
-}
-export declare function useTableDraggable(props: UseTableDraggable): {
-    draggingId: string;
-    onBeforeDragStart: (e: {
-        draggableId: SetStateAction<string>;
-    }) => void;
-    onDragEnd: import("react-beautiful-dnd").OnDragEndResponder;
-};
+import { Dispatch, SetStateAction } from 'react';
+import { TableDataSource, TableDraggable } from '@mezzanine-ui/core/table';
+export interface UseTableDraggable {
+    dataSource: TableDataSource[];
+    setDataSource: Dispatch<SetStateAction<TableDataSource[]>>;
+    draggable?: TableDraggable;
+}
+export declare function useTableDraggable(props: UseTableDraggable): {
+    draggingId: string;
+    onBeforeDragStart: (e: {
+        draggableId: SetStateAction<string>;
+    }) => void;
+    onDragEnd: import("react-beautiful-dnd").OnDragEndResponder;
+};

package/Table/draggable/useTableDraggable.js

@@ -4,60 +4,60 @@ import debounce from 'lodash/debounce';
 import { arrayMove } from '../../utils/array-move.js';
 import { usePreviousValue } from '../../hooks/usePreviousValue.js';
 
-function useTableDraggable(props) {
-    const { dataSource, setDataSource, draggable } = props;
-    const resultSnapshot = useRef(null);
-    const dataSnapShot = useRef(dataSource);
-    const isDragging = useRef(false);
-    const [draggingId, setDraggingId] = useState('');
-    const prevDataSource = usePreviousValue(dataSource);
-    useEffect(() => {
-        if (!isEqual(prevDataSource, dataSource)) {
-            dataSnapShot.current = dataSource;
-        }
-    }, [prevDataSource, dataSource]);
-    const onBeforeDragStart = useCallback((e) => {
-        isDragging.current = true;
-        setDraggingId(e.draggableId);
-    }, []);
-    const onDragEnd = useCallback(async (result, id) => {
-        var _a, _b;
-        resultSnapshot.current = [result, id];
-        isDragging.current = false;
-        setDraggingId('');
-        const temp = [...dataSnapShot.current];
-        const from = result.source.index;
-        const to = (_b = (_a = result.destination) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : from;
-        const newData = arrayMove(temp, from, to);
-        dataSnapShot.current = newData;
-        setDataSource(newData);
-    }, [setDataSource]);
-    useEffect(() => {
-        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
-            return () => { };
-        async function onMouseUp() {
-            var _a, _b, _c;
-            if (isDragging.current)
-                return;
-            const args = resultSnapshot.current;
-            resultSnapshot.current = null;
-            if (!(args === null || args === void 0 ? void 0 : args[0]) || ((_a = args === null || args === void 0 ? void 0 : args[0]) === null || _a === void 0 ? void 0 : _a.source.index) === ((_c = (_b = args === null || args === void 0 ? void 0 : args[0]) === null || _b === void 0 ? void 0 : _b.destination) === null || _c === void 0 ? void 0 : _c.index))
-                return;
-            if ((draggable === null || draggable === void 0 ? void 0 : draggable.onDragEnd) && args) {
-                draggable.onDragEnd(Array.from(dataSnapShot.current));
-            }
-        }
-        const debouncedOnMouseUp = debounce(onMouseUp, 500);
-        window.addEventListener('mouseup', debouncedOnMouseUp, false);
-        return () => {
-            window.removeEventListener('mouseup', debouncedOnMouseUp, false);
-        };
-    }, [draggable]);
-    return {
-        draggingId,
-        onBeforeDragStart,
-        onDragEnd,
-    };
+function useTableDraggable(props) {
+    const { dataSource, setDataSource, draggable } = props;
+    const resultSnapshot = useRef(null);
+    const dataSnapShot = useRef(dataSource);
+    const isDragging = useRef(false);
+    const [draggingId, setDraggingId] = useState('');
+    const prevDataSource = usePreviousValue(dataSource);
+    useEffect(() => {
+        if (!isEqual(prevDataSource, dataSource)) {
+            dataSnapShot.current = dataSource;
+        }
+    }, [prevDataSource, dataSource]);
+    const onBeforeDragStart = useCallback((e) => {
+        isDragging.current = true;
+        setDraggingId(e.draggableId);
+    }, []);
+    const onDragEnd = useCallback(async (result, id) => {
+        var _a, _b;
+        resultSnapshot.current = [result, id];
+        isDragging.current = false;
+        setDraggingId('');
+        const temp = [...dataSnapShot.current];
+        const from = result.source.index;
+        const to = (_b = (_a = result.destination) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : from;
+        const newData = arrayMove(temp, from, to);
+        dataSnapShot.current = newData;
+        setDataSource(newData);
+    }, [setDataSource]);
+    useEffect(() => {
+        if (!(draggable === null || draggable === void 0 ? void 0 : draggable.enabled))
+            return () => { };
+        async function onMouseUp() {
+            var _a, _b, _c;
+            if (isDragging.current)
+                return;
+            const args = resultSnapshot.current;
+            resultSnapshot.current = null;
+            if (!(args === null || args === void 0 ? void 0 : args[0]) || ((_a = args === null || args === void 0 ? void 0 : args[0]) === null || _a === void 0 ? void 0 : _a.source.index) === ((_c = (_b = args === null || args === void 0 ? void 0 : args[0]) === null || _b === void 0 ? void 0 : _b.destination) === null || _c === void 0 ? void 0 : _c.index))
+                return;
+            if ((draggable === null || draggable === void 0 ? void 0 : draggable.onDragEnd) && args) {
+                draggable.onDragEnd(Array.from(dataSnapShot.current));
+            }
+        }
+        const debouncedOnMouseUp = debounce(onMouseUp, 500);
+        window.addEventListener('mouseup', debouncedOnMouseUp, false);
+        return () => {
+            window.removeEventListener('mouseup', debouncedOnMouseUp, false);
+        };
+    }, [draggable]);
+    return {
+        draggingId,
+        onBeforeDragStart,
+        onDragEnd,
+    };
 }
 
 export { useTableDraggable };

package/Table/editable/TableEditRenderWrapper.d.ts

@@ -1,8 +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;
+/// <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

@@ -2,14 +2,14 @@ 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, { ...customProps, ...rest, dataIndex: dataIndex, editable: editable, rowData: rowData, children: children }));
-    }
-    return (jsx(Fragment, { children: children }));
+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, { ...customProps, ...rest, dataIndex: dataIndex, editable: editable, rowData: rowData, children: children }));
+    }
+    return (jsx(Fragment, { children: children }));
 }
 
 export { TableEditRenderWrapper as default };