@mezzanine-ui/react 0.13.0 → 0.13.2

package/Loading/Loading.js

@@ -10,12 +10,15 @@ import cx from 'clsx';
 const Loading = forwardRef(function Loading(props, ref) {
     const hostRef = useRef(null);
     const { children, className, stretch = false, iconProps = {}, loading = false, overlayProps = {}, tip, tipClassName, } = props;
-    const { className: iconClassName, color: iconColor, ...iconPropsRest } = iconProps;
+    const { className: iconClassName, color: iconColor, size: iconSize, style: iconStyle, ...iconPropsRest } = iconProps;
     const isNestedPattern = typeof children !== 'undefined';
     const composedHostRef = useComposeRefs([ref, hostRef]);
     const spinElement = loading ? (jsxs("div", { ref: isNestedPattern ? null : ref, className: cx(iconClasses.spin, {
             [iconClasses.stretch]: stretch,
-        }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor || 'primary', icon: SpinnerIcon, spin: true }), tip ? (jsx("span", { className: cx(iconClasses.tip, tipClassName), children: tip })) : null] })) : null;
+        }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor || 'primary', icon: SpinnerIcon, spin: true, style: {
+                    ...(iconSize ? { fontSize: `${iconSize}px` } : {}),
+                    ...(iconStyle || {}),
+                } }), tip ? (jsx("span", { className: cx(iconClasses.tip, tipClassName), children: tip })) : null] })) : null;
     if (isNestedPattern) {
         return (jsxs("div", { ref: composedHostRef, className: cx(iconClasses.host, {
                 [iconClasses.stretch]: stretch,

package/Select/Select.d.ts

@@ -6,7 +6,7 @@ import { PopperProps } from '../Popper';
 import { SelectValue } from './typings';
 import { PickRenameMulti } from '../utils/general';
 import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'inputProps' | 'mode' | 'onBlur' | 'onChange' | 'onClick' | 'onFocus' | 'onKeyDown' | 'onScroll' | 'readOnly' | 'renderValue' | 'value'>, FormElementFocusHandlers, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
     size: 'menuSize';
@@ -18,6 +18,13 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
      * The other native props for input element.
      */
     inputProps?: Omit<SelectTriggerInputProps, 'onBlur' | 'onChange' | 'onFocus' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
+    /**
+     * Popup menu scroll listener
+     */
+    onMenuScroll?: (computed: {
+        scrollTop: number;
+        maxScrollTop: number;
+    }, target: HTMLUListElement) => void;
     /**
      * select input placeholder
      */

package/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useRef, useMemo } from 'react';
+import { forwardRef, useContext, useState, useRef, useCallback, useMemo } from 'react';
 import { selectClasses } from '@mezzanine-ui/core/select';
 import isArray from 'lodash/isArray';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
@@ -16,7 +16,7 @@ const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
     var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, disablePortal = false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, onMenuScroll, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
     const onOpen = () => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
@@ -98,6 +98,17 @@ const Select = forwardRef(function Select(props, ref) {
             }
         }
     };
+    /** menu onScroll listener */
+    const onMenuScrollCallback = useCallback(async (evt) => {
+        if (onMenuScroll) {
+            const target = evt.target;
+            const maxScrollTop = target.scrollHeight - target.getBoundingClientRect().height;
+            onMenuScroll({
+                scrollTop: target.scrollTop,
+                maxScrollTop,
+            }, target);
+        }
+    }, [onMenuScroll]);
     const resolvedInputProps = {
         ...inputProps,
         'aria-controls': MENU_ID,
@@ -110,7 +121,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
 });
 var Select$1 = Select;
 

package/Select/TreeSelect.d.ts

@@ -7,7 +7,7 @@ import { InputTriggerPopperProps } from '../_internal/InputTriggerPopper';
 import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
 import { SelectValue, TreeSelectOption } from './typings';
 import { TreeProps } from '../Tree';
-export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'onBlur' | 'onChange' | 'onClear' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'searchInputProps'>, FormElementFocusHandlers, Pick<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
+export interface TreeSelectProps extends Omit<SelectTriggerProps, 'active' | 'onBlur' | 'onChange' | 'onClear' | 'onClick' | 'onFocus' | 'onKeyDown' | 'readOnly' | 'searchInputProps'>, FormElementFocusHandlers, Pick<TreeProps, 'defaultExpandAll' | 'disabledValues' | 'expandControllerRef' | 'onExpand'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
     maxHeight: 'menuMaxHeight';
     role: 'menuRole';
     size: 'menuSize';

package/Select/TreeSelect.js

@@ -14,7 +14,7 @@ import cx from 'clsx';
 
 const TreeSelect = forwardRef((props, ref) => {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size, suffixActionIcon, treeProps, value: valueProp, } = props;
+    const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onExpand: onExpandProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size, suffixActionIcon, treeProps, value: valueProp, } = props;
     const { className: treeClassName, ...restTreeProps } = treeProps || {};
     const { width, border, ...restStyle } = (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || {};
     const multiple = mode === 'multiple';
@@ -142,6 +142,7 @@ const TreeSelect = forwardRef((props, ref) => {
         return {
             label: option.name,
             value: option.id,
+            dynamicNodesFetching: option.dynamicChildrenFetching,
             nodes: (_a = option.siblings) === null || _a === void 0 ? void 0 : _a.map((sibling) => mapOptionToNode(sibling)),
         };
     }
@@ -186,6 +187,7 @@ const TreeSelect = forwardRef((props, ref) => {
     const onExpand = (value) => {
         const newExpandedValues = toggleValue(value, expandedValues);
         setExpandedValues(newExpandedValues);
+        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp(value);
     };
     return (jsxs("div", { ref: nodeRef, className: selectClasses.treeSelect, children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputProps: resolvedInputProps, inputRef: inputRef, mode: mode, onClear: onClear, onClick: onTextFieldClick, onKeyDown: onTextFieldKeydown, onTagClose: onTagClose, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, size: size, suffixActionIcon: suffixActionIcon, value: valueProp }), jsx(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, controllerRef: controllerRef, open: open, options: popperOptions, sameWidth: sameWidth, children: jsx(Menu, { itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: {
                         ...restStyle,

package/Select/typings.d.ts

@@ -3,6 +3,7 @@ export interface SelectValue {
     name: string;
 }
 export interface TreeSelectOption extends SelectValue {
+    dynamicChildrenFetching?: boolean;
     siblings?: TreeSelectOption[];
 }
 export interface SelectControl {

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/Tree/TreeNode.js

@@ -4,6 +4,7 @@ import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
+import Loading from '../Loading/Loading.js';
 import Icon from '../Icon/Icon.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
@@ -14,7 +15,7 @@ import cx from 'clsx';
  */
 const TreeNode = forwardRef(function TreeNode(props, ref) {
     const { size: globalSize, } = useContext(MezzanineConfig);
-    const { children, className, disabled, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
+    const { children, className, disabled, dynamicNodesFetching, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
     const variant = useMemo(() => {
         if (size === 'small') {
             return 'input3';
@@ -26,7 +27,8 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
     }, [size]);
     const onExpand = onExpandProp ? () => { onExpandProp(value); } : undefined;
     const onSelect = selectable && onSelectProp && !disabled ? () => { onSelectProp(value); } : undefined;
-    return (jsxs("li", { ref: ref, ...restRootProps, className: cx(treeClasses.node, treeClasses.nodeSize(size), className), children: [jsxs("div", { className: treeClasses.nodeStem, children: [children ? (jsx(Icon, { icon: CaretRightIcon, className: cx(treeClasses.nodeCaret, {
+    const mayHaveChildren = children || dynamicNodesFetching;
+    return (jsxs("li", { ref: ref, ...restRootProps, className: cx(treeClasses.node, treeClasses.nodeSize(size), className), children: [jsxs("div", { className: treeClasses.nodeStem, children: [mayHaveChildren ? (jsx(Icon, { icon: CaretRightIcon, className: cx(treeClasses.nodeCaret, {
                             [treeClasses.nodeCaretExpanded]: expanded,
                         }), role: "button", onClick: onExpand })) : (jsx("div", {})), multiple
                         ? (jsx(Checkbox, { checked: !!selected, disabled: disabled, indeterminate: indeterminate, onChange: onSelect, size: size, value: `${value}`, children: label }))
@@ -35,7 +37,7 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
                                 [treeClasses.nodeLabelIndeterminate]: indeterminate,
                                 [treeClasses.nodeLabelActive]: selected,
                                 [treeClasses.nodeLabelDisabled]: disabled,
-                            }), children: label }))] }), children && (jsx(Collapse, { in: expanded, appear: false, children: children }))] }));
+                            }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Loading, { loading: true, iconProps: { size: 16 } }) }))] }));
 });
 var TreeNode$1 = TreeNode;
 

package/Tree/useTreeExpandedValue.d.ts

@@ -10,6 +10,6 @@ export interface UseTreeExpandedValueProps {
 }
 export declare function useTreeExpandedValue(props: UseTreeExpandedValueProps): {
     expandedValues: TreeNodeValue[];
-    onExpand: (value: TreeNodeValue) => void;
+    onExpand: ((value: TreeNodeValue) => void) | undefined;
     setExpandedValues: import("react").Dispatch<import("react").SetStateAction<TreeNodeValue[]>>;
 };

package/Tree/useTreeExpandedValue.js

@@ -21,10 +21,11 @@ function useTreeExpandedValue(props) {
     const onExpand = (value) => {
         const newExpandedValues = toggleValue(value, expandedValues);
         setExpandedValues(newExpandedValues);
+        onExpandProp === null || onExpandProp === void 0 ? void 0 : onExpandProp(value);
     };
     return {
         expandedValues: expandedValuesProp || expandedValues,
-        onExpand: (expandedValuesProp && onExpandProp) ? onExpandProp : onExpand,
+        onExpand: expandedValuesProp ? onExpandProp : onExpand,
         setExpandedValues,
     };
 }

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.2",
   "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.2",
+    "@mezzanine-ui/icons": "^0.13.2",
+    "@mezzanine-ui/system": "^0.13.2",
     "@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 };