@mezzanine-ui/react 0.13.0 → 0.13.1

package/Table/Table.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources, TableScrolling } from '@mezzanine-ui/core/table';
+import { TableColumn, TableComponents, TableDataSource, TableRowSelection, TableExpandable, TableFetchMore, TablePagination as TablePaginationType, TableRefresh as TableRefreshType, ExpandRowBySources, TableScrolling, TableDraggable } from '@mezzanine-ui/core/table';
 import { EmptyProps } from '../Empty';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role'> {
+export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'role' | 'draggable'> {
     /**
      * customized body className
      */
@@ -28,6 +28,12 @@ export interface TableBaseProps<T> extends Omit<NativeElementPropsWithoutKeyAndR
       * Notice that each source should contain `key` or `id` prop as data primary key.
       */
     dataSource: TableDataSource[];
+    /**
+     * Draggable table row. This feature allows sort items by mouse dragging. Not supported when `fetchMore` is enabled and also buggy when use finger touch (mobile device).
+     * When `draggable.enabled` is true, draggable will be enabled.
+     * `draggable.onDragEnd` return new dataSource for you
+     */
+    draggable?: TableDraggable;
     /**
       * props exported from `<Empty />` component.
       */

package/Table/Table.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useMemo } from 'react';
+import { forwardRef, useRef, useMemo, Fragment } from 'react';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { TableContext, TableDataContext, TableComponentContext } from './TableContext.js';
 import TableHeader from './TableHeader.js';
@@ -10,14 +11,16 @@ import { useTableRowSelection } from './rowSelection/useTableRowSelection.js';
 import { useTableSorting } from './sorting/useTableSorting.js';
 import { useTableLoading } from './useTableLoading.js';
 import { useTableFetchMore } from './useTableFetchMore.js';
+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 cx from 'clsx';
 
 const Table = forwardRef(function Table(props, ref) {
     var _a;
-    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, loadingTip = '資料載入中...', pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, scroll: scrollProp, scrollContainerClassName, ...rest } = props;
+    const { bodyClassName, bodyRowClassName, className, columns, components, dataSource: dataSourceProp, draggable: draggableProp, emptyProps, expandable: expandableProp, fetchMore: fetchMoreProp, headerClassName, loading: loadingProp, loadingTip = '資料載入中...', pagination: paginationProp, refresh: refreshProp, rowSelection: rowSelectionProp, scroll: scrollProp, scrollContainerClassName, ...rest } = props;
     const bodyRef = useRef(null);
     /** Feature rowSelection */
     const [selectedRowKeys, setSelectedRowKey] = useTableRowSelection({
@@ -35,7 +38,7 @@ const Table = forwardRef(function Table(props, ref) {
         setSelectedRowKey,
     ]);
     /** Feature sorting */
-    const [dataSource, onSort, { sortedOn, sortedType, onResetAll }] = useTableSorting({
+    const [dataSource, onSort, { sortedOn, sortedType, onResetAll, setDataSource, }] = useTableSorting({
         dataSource: dataSourceProp,
     });
     /** Feature loading */
@@ -64,6 +67,12 @@ const Table = forwardRef(function Table(props, ref) {
         loading,
         scrollBarSize: 4,
     });
+    /** Feature drag and drop */
+    const { draggingId, onBeforeDragStart, onDragEnd, } = useTableDraggable({
+        dataSource,
+        setDataSource,
+        draggable: draggableProp,
+    });
     /** context */
     const tableContextValue = useMemo(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -98,6 +107,10 @@ const Table = forwardRef(function Table(props, ref) {
                 },
             } : undefined,
             scroll: scrollProp,
+            draggable: draggableProp ? {
+                ...draggableProp,
+                draggingId,
+            } : undefined,
         });
     }, [
         dataSource,
@@ -116,6 +129,8 @@ const Table = forwardRef(function Table(props, ref) {
         paginationProp,
         isHorizontalScrolling,
         scrollProp,
+        draggableProp,
+        draggingId,
     ]);
     const tableDataContextValue = useMemo(() => ({
         columns,
@@ -128,26 +143,26 @@ const Table = forwardRef(function Table(props, ref) {
         });
     }, [(_a = components === null || components === void 0 ? void 0 : components.body) === null || _a === void 0 ? void 0 : _a.cell]);
     const tableRefs = useComposeRefs([ref, scrollBody.target]);
-    return (jsx(TableContext.Provider, { value: tableContextValue, children: jsx(TableDataContext.Provider, { value: tableDataContextValue, children: jsx(TableComponentContext.Provider, { value: tableComponentContextValue, children: jsxs(Loading, { loading: loading, stretch: true, tip: loadingTip, overlayProps: {
-                        className: tableClasses.loading,
-                    }, children: [jsx("div", { ref: scrollBody.ref, className: cx(tableClasses.scrollContainer, scrollContainerClassName), onScroll: scrollBody.onScroll, style: tableContextValue.scroll ? {
-                                '--table-scroll-x': tableContextValue.scroll.x
-                                    ? `${tableContextValue.scroll.x}px`
-                                    : '100%',
-                                '--table-scroll-y': tableContextValue.scroll.y
-                                    ? `${tableContextValue.scroll.y}px`
-                                    : 'unset',
-                            } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
-                                    width: '100%',
-                                    height: '100%',
-                                    position: 'relative',
-                                }, children: jsx("div", { ref: scrollElement.ref, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, className: "mzn-table-scroll-bar", children: jsx("div", { style: {
-                                            width: `${scrollElement.scrollBarSize}px`,
-                                            height: '100%',
-                                            borderRadius: '10px',
-                                            backgroundColor: '#7d7d7d',
-                                            transition: '0.1s',
-                                        } }) }) }) })] }) }) }) }));
+    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: {
+                            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 ? {
+                                            '--table-scroll-x': tableContextValue.scroll.x
+                                                ? `${tableContextValue.scroll.x}px`
+                                                : '100%',
+                                            '--table-scroll-y': tableContextValue.scroll.y
+                                                ? `${tableContextValue.scroll.y}px`
+                                                : 'unset',
+                                        } : undefined, children: jsxs("table", { ref: tableRefs, ...rest, className: cx(tableClasses.host, className), children: [isRefreshShow ? (jsx("tbody", { children: jsx("tr", { children: jsx("td", { children: jsx(TableRefresh, { onClick: refreshProp.onClick }) }) }) })) : null, jsx(TableHeader, { className: headerClassName }), jsx(TableBody, { ref: bodyRef, className: bodyClassName, rowClassName: bodyRowClassName }), jsx("tbody", { children: provided.placeholder })] }) }), paginationProp ? (jsx(TablePagination, { bodyRef: bodyRef })) : null, jsx("div", { ref: scrollElement.trackRef, style: scrollElement.trackStyle, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, role: "button", tabIndex: -1, className: "mzn-table-scroll-bar-track", children: jsx("div", { style: {
+                                                width: '100%',
+                                                height: '100%',
+                                                position: 'relative',
+                                            }, children: jsx("div", { ref: scrollElement.ref, onMouseDown: scrollElement.onMouseDown, onMouseUp: scrollElement.onMouseUp, onMouseEnter: scrollElement.onMouseEnter, onMouseLeave: scrollElement.onMouseLeave, role: "button", style: scrollElement.style, tabIndex: -1, className: "mzn-table-scroll-bar", children: jsx("div", { style: {
+                                                        width: `${scrollElement.scrollBarSize}px`,
+                                                        height: '100%',
+                                                        borderRadius: '10px',
+                                                        backgroundColor: '#7d7d7d',
+                                                        transition: '0.1s',
+                                                    } }) }) }) })] })) }) }) }) }) }) }));
 });
 var Table$1 = Table;
 

package/Table/TableBodyRow.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useState, useMemo, Fragment } from 'react';
 import { tableClasses, getColumnStyle, getCellStyle } from '@mezzanine-ui/core/table';
+import { Draggable } from 'react-beautiful-dnd';
 import get from 'lodash/get';
 import { TableContext, TableDataContext } from './TableContext.js';
 import TableCell from './TableCell.js';
@@ -9,11 +10,12 @@ import TableRowSelection from './rowSelection/TableRowSelection.js';
 import TableExpandable from './expandable/TableExpandable.js';
 import TableEditRenderWrapper from './editable/TableEditRenderWrapper.js';
 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, } = useContext(TableContext) || {};
+    const { rowSelection, expanding, isHorizontalScrolling, scroll, draggable, } = useContext(TableContext) || {};
     const { columns, } = useContext(TableDataContext) || {};
     /** Feature rowSelection */
     const [selected, setSelected] = useState(false);
@@ -39,20 +41,22 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
         expanding,
         scroll === null || scroll === void 0 ? void 0 : scroll.fixedFirstColumn,
     ]);
-    return (jsxs(Fragment, { children: [jsxs("tr", { ...rest, ref: ref, className: cx(tableClasses.bodyRow, {
-                    [tableClasses.bodyRowHighlight]: selected || expanded,
-                }, 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}`));
-                    })] }), 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] }));
+    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] }));
 });
 var TableBodyRow$1 = TableBodyRow;
 

package/Table/TableContext.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TableRowSelection, TableColumn, TableExpandable, TablePagination, TableDataSource, TableRecord, ExpandRowBySources, TableScrolling } from '@mezzanine-ui/core/table';
+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'> {
@@ -36,6 +36,9 @@ export interface TableContextProps {
     fetchMore?: FetchMoreContext;
     pagination?: TablePagination;
     scroll?: TableScrolling;
+    draggable?: TableDraggable & {
+        draggingId: string;
+    };
 }
 export declare const TableContext: import("react").Context<TableContextProps | null>;
 export interface TableDataContextProps {

package/Table/draggable/useTableDraggable.d.ts

@@ -0,0 +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;
+};

package/Table/draggable/useTableDraggable.js

@@ -0,0 +1,63 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import isEqual from 'lodash/isEqual';
+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,
+    };
+}
+
+export { useTableDraggable };

package/Table/index.d.ts

@@ -2,3 +2,5 @@ export { TableProps, default, } from './Table';
 export { TableRefreshProps, default as TableRefresh, } from './refresh/TableRefresh';
 export { TableCellProps, default as TableCell, } from './TableCell';
 export { EditableBodyCellProps, } from './editable/TableEditRenderWrapper';
+export { useTableDraggable, } from './draggable/useTableDraggable';
+export { default as useTableScroll, } from './useTableScroll';

package/Table/index.js

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

package/Table/sorting/useTableSorting.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TableDataSource, TableColumn, TableRecord } from '@mezzanine-ui/core/table';
 export interface UseTableSorting {
     dataSource: TableDataSource[];
@@ -7,4 +8,5 @@ export declare function useTableSorting(props: UseTableSorting): readonly [Table
     readonly sortedOn: string;
     readonly sortedType: SortedType;
     readonly onResetAll: () => void;
+    readonly setDataSource: import("react").Dispatch<import("react").SetStateAction<TableDataSource[]>>;
 }];

package/Table/sorting/useTableSorting.js

@@ -107,7 +107,7 @@ function useTableSorting(props) {
             }
         }
     });
-    return [dataSource, onChange, { sortedOn, sortedType, onResetAll }];
+    return [dataSource, onChange, { sortedOn, sortedType, onResetAll, setDataSource }];
 }
 
 export { useTableSorting };

package/index.d.ts

@@ -4,6 +4,7 @@ export * from './utils/getElement';
 export * from './utils/jsx-types';
 export * from './utils/general';
 export * from './utils/scroll-lock';
+export * from './utils/array-move';
 export * from './hooks/useClickAway';
 export * from './hooks/useComposeRefs';
 export * from './hooks/useDocumentEscapeKeyDown';
@@ -51,7 +52,7 @@ export { AccordionProps, AccordionSummaryProps, AccordionSummary, AccordionDetai
 export { BadgeContainerProps, BadgeContainer, BadgeProps, default as Badge, } from './Badge';
 export { CardProps, CardActionsProps, CardActions, default as Card, } from './Card';
 export { EmptyProps, default as Empty, } from './Empty';
-export { TableProps, TableRefreshProps, TableRefresh, default as Table, } from './Table';
+export { TableProps, TableRefreshProps, TableRefresh, useTableDraggable, useTableScroll, default as Table, } from './Table';
 export { TagSize, TagProps, default as Tag, } from './Tag';
 export { usePagination, PaginationItemProps, PaginationItemType, PaginationItem, PaginationJumperProps, PaginationJumper, PaginationPageSizeProps, PaginationPageSize, PaginationProps, default as Pagination, } from './Pagination';
 export { TreeNodeProp, TreeNodeData, TreeNodeEntity, TreeNodeEntities, TreeNodeRefsShape, TreeNodeRefs, TreeExpandControl, uniqueArray, toggleValue, toggleValueWithStatusControl, traverseTree, UseTreeExpandedValueProps, useTreeExpandedValue, GetTreeNodeEntitiesProps, getTreeNodeEntities, TreeNodeElementProps, TreeNodeProps, TreeNode, TreeNodeListElementProps, TreeNodeListProps, TreeNodeList, TreeProps, default as Tree, } from './Tree';

package/index.js

@@ -1,6 +1,7 @@
 export { composeRefs } from './utils/composeRefs.js';
 export { getElement } from './utils/getElement.js';
 export { allowBodyScroll, lockBodyScroll } from './utils/scroll-lock.js';
+export { arrayMove } from './utils/array-move.js';
 export { useClickAway } from './hooks/useClickAway.js';
 export { useComposeRefs } from './hooks/useComposeRefs.js';
 export { useDocumentEscapeKeyDown } from './hooks/useDocumentEscapeKeyDown.js';
@@ -23,6 +24,7 @@ export { useSelectValueControl } from './Form/useSelectValueControl.js';
 export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
 export { IconButton } from './Button/index.js';
 export { default as Typography } from './Typography/Typography.js';
+export { default as useTableScroll } from './Table/useTableScroll.js';
 export { default as useModalContainer } from './Modal/useModalContainer.js';
 export { default as Transition } from './Transition/Transition.js';
 export { default as ConfigProvider } from './Provider/ConfigProvider.js';
@@ -57,6 +59,7 @@ export { default as CardActions } from './Card/CardActions.js';
 export { default as Card } from './Card/Card.js';
 export { default as Empty } from './Empty/Empty.js';
 export { default as TableRefresh } from './Table/refresh/TableRefresh.js';
+export { useTableDraggable } from './Table/draggable/useTableDraggable.js';
 export { default as Table } from './Table/Table.js';
 export { default as Tag } from './Tag/Tag.js';
 export { usePagination } from './Pagination/usePagination.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,13 +31,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.13.0",
-    "@mezzanine-ui/icons": "^0.13.0",
-    "@mezzanine-ui/system": "^0.13.0",
+    "@mezzanine-ui/core": "^0.13.1",
+    "@mezzanine-ui/icons": "^0.13.1",
+    "@mezzanine-ui/system": "^0.13.1",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
+    "react-beautiful-dnd": "^13.1.1",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.4.1"
@@ -49,6 +50,7 @@
     "@types/lodash": "^4.14.188",
     "@types/moment": "^2.13.0",
     "@types/react": "^18.0.25",
+    "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.0.8",
     "@types/react-test-renderer": "^18.0.0",
     "chromatic": "^6.11.4",

package/utils/array-move.d.ts

@@ -0,0 +1 @@
+export declare function arrayMove(arr: any[], old_index: number, new_index: number): any[];

package/utils/array-move.js

@@ -0,0 +1,13 @@
+function arrayMove(arr, old_index, new_index) {
+    const temp = arr.slice(0);
+    if (new_index >= temp.length) {
+        let k = new_index - temp.length + 1;
+        while ((k -= 1)) {
+            temp.push();
+        }
+    }
+    temp.splice(new_index, 0, temp.splice(old_index, 1)[0]);
+    return temp;
+}
+
+export { arrayMove };