@canlooks/can-ui 0.0.70 → 0.0.71

package/dist/esm/components/slider/slider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { memo, useEffect, useMemo, useRef } from 'react';
-import { clsx, cloneRef, isUnset, useControlled, useDraggable } from '../../utils';
+import { clsx, isUnset, useControlled, useDraggable, mergeComponentProps } from '../../utils';
 import { classes, useStyle } from './slider.style';
 import { Tooltip } from '../tooltip';
 import { useTheme } from '../theme';
@@ -160,13 +160,12 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
     const valueIsArray = Array.isArray(innerValue.current);
     const renderHandleFn = () => {
         const fn = (value, index = 0) => {
-            const _handleProps = {
+            const _handleProps = mergeComponentProps(handleProps, {
                 key: index,
-                ...handleProps,
-                ref: cloneRef(r => {
+                ref: r => {
                     handleRefs.current[index] = r;
-                }, handleProps?.ref),
-                className: clsx(classes.handle, handleProps?.className),
+                },
+                className: classes.handle,
                 style: {
                     width: handleSize,
                     height: handleSize,
@@ -178,25 +177,23 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
                         : {
                             bottom: valueToPercent(value) + '%',
                             left: '50%'
-                        },
-                    ...handleProps?.style
+                        }
                 },
                 onPointerDown(e) {
                     e.stopPropagation();
-                    handleProps?.onPointerDown?.(e);
                     draggableHandles.onPointerDown(e);
                 }
-            };
+            });
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : _createElement(Tooltip, { popperRef: r => {
+                : _createElement(Tooltip, { title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index, popperRef: r => {
                         if (r) {
                             tooltipRefs.current[index] = r;
                         }
                         else {
                             delete tooltipRefs.current[index];
                         }
-                    }, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, key: index },
+                    } },
                     _createElement("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
@@ -208,10 +205,9 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
      * 渲染轨道
      */
     const renderRailFn = () => {
-        const _railProps = {
-            ...railProps,
+        const _railProps = mergeComponentProps(railProps, {
             ref: railRef,
-            className: clsx(classes.rail, railProps?.className),
+            className: classes.rail,
             style: {
                 ...orientation === 'horizontal'
                     ? {
@@ -222,12 +218,8 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
                         width: railSize,
                         [inset ? 'padding' : 'margin']: `${handleSize / 2}px 0`
                     },
-                ...railProps?.style
-            },
-            onPointerDown: e => {
-                railProps?.onPointerDown?.(e);
-                draggableHandles.onPointerDown(e);
             },
+            onPointerDown: draggableHandles.onPointerDown,
             children: (_jsxs("div", { className: classes.railWrap, children: [!disableTrack &&
                         _jsx("div", { className: classes.track, style: valueIsArray
                                 ? (orientation === 'horizontal'
@@ -281,8 +273,10 @@ export const Slider = memo(({ color = 'primary', orientation = 'horizontal', var
                                         transform: 'translateY(-50%)'
                                     }
                             }, children: label }))), renderHandleFn()] }))
-        };
-        return renderRail ? renderRail(innerValue.current, _railProps) : _jsx("div", { ..._railProps });
+        });
+        return renderRail
+            ? renderRail(innerValue.current, _railProps)
+            : _jsx("div", { ..._railProps });
     };
     /**
      * -----------------------------------------------------------------

package/dist/esm/components/snackbarBase/snackbarBase.style.d.ts

@@ -1,9 +1,9 @@
 export declare const classes: {
     text: string;
     title: string;
-    icon: string;
     content: string;
     close: string;
+    icon: string;
     item: string;
     titleRow: string;
     itemWrap: string;

package/dist/esm/components/snackbarBase/snackbarBase.style.js

@@ -13,12 +13,10 @@ export const classes = defineInnerClasses('snackbar-base', [
     'content'
 ]);
 export const style = defineCss(theme => {
-    const { text, fontSize, spacing, background, borderRadius } = theme;
+    const { spacing, background, borderRadius } = theme;
     return [
         appStyleCallback(theme),
         css `
-            color: ${text.primary};
-            font-size: ${fontSize}px;
             width: 100%;
             height: auto;
             display: flex;

package/dist/esm/components/sortableItem/sortableItem.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { cloneRef } from '../../utils';
+import { cloneRef, useSync } from '../../utils';
 export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         ...sortableArguments,
@@ -10,16 +10,6 @@ export const SortableItem = (({ component: Component = 'div', id, disabled, sort
         id
     });
     const preventDefaultCallback = useRef(void 0);
-    const onPointerUp = useCallback(() => {
-        removeListener();
-    }, []);
-    const onTouchStart = useCallback((e) => {
-        props.onTouchStart?.(e);
-        addEventListener('touchmove', preventDefaultCallback.current = e => {
-            e.cancelable && e.preventDefault();
-        }, { passive: false });
-        addEventListener('pointerup', onPointerUp);
-    }, []);
     const removeListener = () => {
         if (preventDefaultCallback.current) {
             removeEventListener('touchmove', preventDefaultCallback.current);
@@ -27,6 +17,15 @@ export const SortableItem = (({ component: Component = 'div', id, disabled, sort
         }
         removeEventListener('pointerup', onPointerUp);
     };
+    const onPointerUp = useCallback(removeListener, []);
+    const syncOnTouchStart = useSync(props.onTouchStart);
+    const onTouchStart = useCallback((e) => {
+        syncOnTouchStart.current?.(e);
+        addEventListener('touchmove', preventDefaultCallback.current = e => {
+            e.cancelable && e.preventDefault();
+        }, { passive: false });
+        addEventListener('pointerup', onPointerUp);
+    }, []);
     useEffect(() => removeListener, []);
     return (_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), style: {
             transform: CSS.Transform.toString(transform),

package/dist/esm/components/switch/switch.d.ts

@@ -1,8 +1,8 @@
-import React, { ReactNode, JSX } from 'react';
+import React, { ReactNode, ComponentProps } from 'react';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 export interface SwitchProps extends Omit<DivProps, 'onChange'> {
     /** <Switch />内部使用<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     color?: ColorPropsValue;
     size?: Size;
     /** 滑块 */

package/dist/esm/components/table/table.d.ts

@@ -1,7 +1,7 @@
-import { JSX } from 'react';
+import { ComponentProps } from 'react';
 import { Size } from '../../types';
 import { TdCell, ThCell } from './tableSticky';
-export interface TableProps extends Partial<JSX.IntrinsicElements['table']> {
+export interface TableProps extends Partial<ComponentProps<'table'>> {
     size?: Size;
     /**
      * 是否渲染边框，默认为`none`
@@ -20,7 +20,7 @@ export declare namespace Table {
     var th: typeof ThCell;
     var td: typeof TdCell;
 }
-export interface TableRowProps extends Partial<JSX.IntrinsicElements['tr']> {
+export interface TableRowProps extends Partial<ComponentProps<'tr'>> {
     selected?: boolean;
 }
 export declare function TableRow({ selected, ...props }: TableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/table/table.style.d.ts

@@ -1,6 +1,6 @@
 export declare const classes: {
-    container: string;
     cell: string;
+    container: string;
 } & {
     root: string;
 };

package/dist/esm/components/table/tableSticky.d.ts

@@ -1,12 +1,12 @@
-import { JSX } from 'react';
-import { DivProps } from '../../types';
-export declare function TableContainer(props: DivProps): import("@emotion/react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import { OverridableComponent } from '../../types';
+export declare const TableContainer: OverridableComponent<{}>;
 type CellProps = {
     sticky?: 'left' | 'right';
 };
-export interface TdCellProps extends Partial<JSX.IntrinsicElements['td']>, CellProps {
+export interface TdCellProps extends Partial<ComponentProps<'td'>>, CellProps {
 }
-export interface ThCellProps extends Partial<JSX.IntrinsicElements['th']>, CellProps {
+export interface ThCellProps extends Partial<ComponentProps<'th'>>, CellProps {
 }
 export declare function TdCell(props: TdCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function ThCell(props: ThCellProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/table/tableSticky.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { clsx, cloneRef } from '../../utils';
 import { classes } from './table.style';
 import { style } from './tableSticky.style';
-export function TableContainer(props) {
+export const TableContainer = (({ component: Component = 'div', ...props }) => {
     const [scrolledLeft, setScrolledLeft] = useState(false);
     const [scrolledRight, setScrolledRight] = useState(false);
     const innerRef = useRef(null);
@@ -19,8 +19,8 @@ export function TableContainer(props) {
             el.removeEventListener('scroll', scroll);
         };
     }, []);
-    return (_jsx("div", { ...props, ref: cloneRef(props.ref, innerRef), css: style, className: clsx(classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
-}
+    return (_jsx(Component, { ...props, ref: cloneRef(props.ref, innerRef), css: style, className: clsx(classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+});
 export function TdCell(props) {
     return _jsx("td", { ...useStickyCellProps(props) });
 }

package/dist/esm/components/tabs/tabs.style.d.ts

@@ -1,13 +1,13 @@
 import { TabsProps } from './tabs';
 export declare const classes: {
     label: string;
-    indicator: string;
+    scroll: string;
     prefix: string;
     end: string;
-    start: string;
-    scroll: string;
     ellipsis: string;
+    start: string;
     tab: string;
+    indicator: string;
     suffix: string;
     scrollWrap: string;
     tabPrefix: string;

package/dist/esm/components/tag/tag.d.ts

@@ -9,6 +9,6 @@ export interface TagProps extends Omit<DivProps, 'prefix'> {
     suffix?: ReactNode;
     clickable?: boolean;
     closable?: boolean;
-    onClose?: React.MouseEventHandler<HTMLDivElement>;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
 }
 export declare const Tag: React.MemoExoticComponent<({ variant, color, shape, size, prefix, suffix, clickable, closable, onClose, ...props }: TagProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/tag/tag.js

@@ -4,6 +4,7 @@ import { classes, useStyle } from './tag.style';
 import { clsx } from '../../utils';
 import { Icon } from '../icon';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { Button } from '../button';
 export const Tag = memo(({ variant = 'outlined', color = 'text.secondary', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }) => {
     const closeHandler = (e) => {
         e.preventDefault();
@@ -13,5 +14,5 @@ export const Tag = memo(({ variant = 'outlined', color = 'text.secondary', shape
     return (_jsxs("div", { ...props, css: useStyle({ color: color || 'text.secondary' }), className: clsx(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: props.children }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix }), closable &&
-                _jsx("div", { className: classes.close, onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }));
+                _jsx(Button, { variant: "plain", className: classes.close, onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }));
 });

package/dist/esm/components/tag/tag.style.d.ts

@@ -1,9 +1,9 @@
 import { TagProps } from './tag';
 export declare const classes: {
     content: string;
+    close: string;
     prefix: string;
     suffix: string;
-    close: string;
 } & {
     root: string;
 };

package/dist/esm/components/textarea/textarea.d.ts

@@ -1,7 +1,7 @@
-import { Ref, JSX } from 'react';
+import { Ref, ComponentProps } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface TextareaProps extends Omit<InputBaseProps<'textarea'>, 'children' | 'prefix' | 'suffix'> {
-    textareaProps?: JSX.IntrinsicElements['textarea'];
+    textareaProps?: ComponentProps<'textarea'>;
     textareaRef?: Ref<HTMLTextAreaElement>;
     rows?: number;
     fullWidth?: boolean;

package/dist/esm/components/textarea/textarea.js

@@ -2,7 +2,11 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { InputBase } from '../inputBase';
 import { classes, style } from './textarea.style';
-import { clsx, cloneRef } from '../../utils';
+import { clsx, mergeComponentProps } from '../../utils';
 export const Textarea = memo(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
-    return (_jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => _jsx("textarea", { rows: rows, ...rest, ...textareaProps, ref: cloneRef(ref, textareaRef), className: clsx(classes.textarea, textareaProps?.className) }) }));
+    return (_jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, children: inputBaseProps => _jsx("textarea", { ...mergeComponentProps(inputBaseProps, {
+                rows,
+                ref: textareaRef,
+                className: classes.textarea
+            }) }) }));
 });

package/dist/esm/components/toggleButton/toggleButton.js

@@ -5,9 +5,9 @@ import { Flex } from '../flex';
 import { clsx, isSelected } from '../../utils';
 import { classes, style } from './toggleButton.style';
 import { Button } from '../button';
-import { useShallowSelection } from '../selectionContext';
+import { useFlatSelection } from '../selectionContext';
 export const ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
-    const [innerValue, toggleSelected] = useShallowSelection({
+    const [innerValue, toggleSelected] = useFlatSelection({
         disabled: disabled ?? readOnly,
         multiple,
         defaultValue,

package/dist/esm/components/transfer/transfer.style.d.ts

@@ -2,11 +2,11 @@ export declare const classes: {
     info: string;
     header: string;
     title: string;
-    checkbox: string;
     list: string;
-    buttons: string;
+    checkbox: string;
     count: string;
     panel: string;
+    buttons: string;
 } & {
     root: string;
 };

package/dist/esm/components/transitionBase/collapse.js

@@ -1,29 +1,51 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TransitionBase } from './transitionBase';
-import { cloneRef, useDerivedState } from '../../utils';
+import { cloneRef } from '../../utils';
 export const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
     return (_jsx(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
 };
 const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
     const innerRef = useRef(null);
-    const [size, setSize] = useDerivedState((prev) => {
-        return typeof prev === 'undefined' && _in && !appear
-            // 首次展开，如果appear为false，则返回auto，表示直接展开
-            ? 'auto'
-            // 其余情况均返回折叠尺寸，若是展开，展开尺寸需要在requestAnimationFrame后设置
-            : typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
-    }, [_in]);
+    const getCollapsedSize = () => {
+        return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
+    };
+    const [size, setSize] = useState(() => {
+        if (_in && !appear) {
+            return 'auto';
+        }
+        return getCollapsedSize();
+    });
+    const [isEntered, setIsEntered] = useState(_in && !appear);
+    const expand = () => {
+        requestAnimationFrame(() => {
+            innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
+        });
+    };
+    const collapse = () => {
+        setIsEntered(false);
+        requestAnimationFrame(() => {
+            setSize(getCollapsedSize());
+        });
+    };
+    const initialized = useRef(false);
     useEffect(() => {
-        if (_in && size.current !== 'auto') {
-            requestAnimationFrame(() => {
-                innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
-            });
+        if (!initialized.current) {
+            // 首次渲染
+            initialized.current = true;
+            if (!appear) {
+                // 若appear为false，则跳过首次动画
+                return;
+            }
         }
+        _in
+            ? expand()
+            : collapse();
     }, [_in]);
-    return (_jsx(TransitionBase, { ...props, in: _in, ref: cloneRef(ref, innerRef), style: {
-            [orientation === 'vertical' ? 'height' : 'width']: size.current,
+    return (_jsx(TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: cloneRef(ref, innerRef), style: {
+            [orientation === 'vertical' ? 'height' : 'width']: isEntered ? 'auto' : size,
+            ...!isEntered ? { overflow: 'hidden' } : {},
             ...props.style
-        } }));
+        }, onEntered: () => setIsEntered(true) }));
 };

package/dist/esm/components/transitionBase/transitionBase.js

@@ -22,5 +22,5 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         }
     }
     const innerRef = useRef(null);
-    return (_jsx(CSSTransition, { ...props, nodeRef: innerRef, className: clsx(classes.root, props.className), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), css: cssArr, children: props.children }) }));
+    return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
 });

package/dist/esm/components/transitionBase/transitionBase.style.js

@@ -42,7 +42,7 @@ export const fadeStyle = defineCss(({ easing }) => css `
     }
 `);
 export const sweepingStyle = defineCss(({ easing }) => css `
-    overflow: hidden;
+    //overflow: hidden;
     transition-property: opacity, width, height;
 
     &.appear-active,

package/dist/esm/components/transportStyle/transportStyle.d.ts

@@ -31,4 +31,4 @@ export type TransportStyleOwnProps = {
     overflow?: CSSProperties['overflow'];
 };
 export type TransportStyleProps<C extends ElementType = 'div'> = OverridableProps<TransportStyleOwnProps, C>;
-export declare const TransportStyle: OverridableComponent<TransportStyleProps>;
+export declare const TransportStyle: OverridableComponent<TransportStyleOwnProps>;

package/dist/esm/components/transportStyle/transportStyle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { filterProperties } from '../../utils';
-export const TransportStyle = ({ component: Component = 'div', alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }) => {
+export const TransportStyle = (({ component: Component = 'div', alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, paddingTop, paddingRight, paddingBottom, paddingLeft, padding, marginTop, marginRight, marginBottom, marginLeft, margin, overflowX, overflowY, overflow, ...props }) => {
     return (_jsx(Component, { ...props, style: filterProperties({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
@@ -9,4 +9,4 @@ export const TransportStyle = ({ component: Component = 'div', alignItems, justi
             overflow, overflowX, overflowY,
             ...props.style
         }) }));
-};
+});

package/dist/esm/components/tree/tree.d.ts

@@ -6,13 +6,21 @@ import { TreeNode, TreeNodeProps } from './treeNode';
 export interface NodeType<V extends Id = Id> extends Partial<Omit<TreeNodeProps, 'children'>>, Omit<OptionType<V>, 'children'> {
     children?: NodeType<V>[];
 }
+export type SortPlacement = 'before' | 'after';
+export type SortInfo<V extends Id = Id> = {
+    source: V;
+    destination: V;
+    placement: SortPlacement | 'child';
+};
 export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DivProps, 'defaultValue' | 'onChange' | 'onToggle'> {
     nodes?: N[];
+    /** 默认为`label` */
     labelKey?: keyof N;
     searchTokenKey?: keyof N;
     showLine?: boolean;
     indent?: number;
     renderExpandIcon?(nodeValue: V, isExpand: boolean, expanded: V[]): ReactNode;
+    /** 是否显示`checkbox`选择框，`multiple`为`true`时，默认为`true`，否则默认为`false` */
     showCheckbox?: boolean;
     readOnly?: boolean;
     /** 为true时，点击标签也会展开节点，默认为`false`, 仅点击展开按钮才能展开节点 */
@@ -20,6 +28,11 @@ export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends
     defaultExpanded?: V[];
     expanded?: V[];
     onExpandedChange?(expanded: V[], nodeValue: V, isExpand: boolean): void;
+    /** 是否可以拖拽排序，默认为`false` */
+    sortable?: boolean;
+    /** 是否显示拖拽把手，默认为`true` */
+    showDragHandle?: boolean;
+    onSort?(info: SortInfo<V>): void;
     searchable?: boolean;
     searchInputProps?: InputProps;
     defaultSearchValue?: string;
@@ -28,11 +41,11 @@ export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends
 }
 export type TreeProps<N extends NodeType<V>, V extends Id = Id> = TreeBaseProps<N, V> & SelectableProps<V>;
 type TreeContext<V extends Id = Id> = {
-    expandedSet?: Set<V>;
-    toggleExpanded?(value: V): void;
-    indent?: number;
+    expandedSet: Set<V>;
+    toggleExpanded(value: V): void;
+    indent: number;
     renderExpandIcon?: TreeBaseProps<any, V>['renderExpandIcon'];
-    showCheckbox?: boolean;
+    showCheckbox: boolean;
     readOnly?: boolean;
     disabled?: boolean;
     clickLabelToExpand?: boolean;

package/dist/esm/components/tree/tree.js

@@ -1,26 +1,27 @@
 import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Children, createContext, isValidElement, memo, useContext, useMemo } from 'react';
+import { Children, createContext, isValidElement, memo, useContext, useMemo, useRef } from 'react';
 import { SelectionContext } from '../selectionContext';
 import { Input } from '../input';
 import { classes, style } from './tree.style';
-import { clsx, useTreeSearch } from '../../utils';
+import { cloneRef, clsx, useTreeSearch } from '../../utils';
 import { Highlight } from '../highlight';
-import { Placeholder } from '../placeholder';
 import { TreeNode } from './treeNode';
 import { Icon } from '../icon';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
+import { TreeDnd } from './treeDnd';
 const TreeContext = createContext({});
 export function useTreeContext() {
     return useContext(TreeContext);
 }
-export const Tree = memo(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
+export const Tree = memo(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, sortable = false, showDragHandle = true, onSort, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
 // 从SelectionContext继承来的属性
-primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, ...props }) => {
+primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration = 'shallowest', clearable, disabled, defaultValue, value, onChange, onToggle, ...props }) => {
     const selectionContextProps = {
         options: nodes, primaryKey, childrenKey, relation, integration,
         multiple, defaultValue, value, onChange, disabled
     };
+    const containerRef = useRef(null);
     /**
      * --------------------------------------------------------------
      * 统一处理nodes与children
@@ -52,20 +53,22 @@ primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integrat
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-show-line": showLine, children: [searchable &&
+    return (_jsxs("div", { ...props, ref: cloneRef(containerRef, props.ref), css: style, className: clsx(classes.root, classes.levelBlock, props.className), "data-show-line": showLine, "data-sortable": sortable, children: [searchable &&
                 _jsx(Input, { className: classes.search, prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
                         searchInputProps?.onChange?.(e);
                         setInnerSearchValue(e.target.value);
                     } }), _jsx(SelectionContext, { ...selectionContextProps, children: _jsx(TreeContext, { value: useMemo(() => ({
-                        expandedSet, toggleExpanded, indent, renderExpandIcon,
-                        showCheckbox, readOnly, disabled, clickLabelToExpand
+                        expandedSet, toggleExpanded, indent, renderExpandIcon, clickLabelToExpand,
+                        showCheckbox, readOnly, disabled
                     }), [
-                        expandedSet, indent, renderExpandIcon,
-                        showCheckbox, readOnly, disabled, clickLabelToExpand
-                    ]), children: useMemo(() => {
-                        if (filteredTreeData?.length) {
+                        expandedSet, indent, renderExpandIcon, clickLabelToExpand,
+                        showCheckbox, readOnly, disabled
+                    ]), children: _jsx(TreeDnd, { sortable: sortable, showDragHandle: showDragHandle, onSort: onSort, containerRef: containerRef, children: useMemo(() => {
+                            if (!filteredTreeData?.length) {
+                                return null;
+                            }
                             const fn = (arr) => {
-                                return arr?.map(({ _parentId, ...nodeProps }) => {
+                                return arr?.map(({ _parentId, ...nodeProps }, i) => {
                                     const currentValue = nodeProps[primaryKey];
                                     const label = nodeProps[labelKey];
                                     return (_createElement(TreeNode, { ...nodeProps, key: currentValue, value: currentValue, label: typeof label === 'string' && deferredSearchValue
@@ -74,8 +77,6 @@ primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integrat
                                 });
                             };
                             return fn(filteredTreeData);
-                        }
-                        return _jsx(Placeholder, {});
-                    }, [filteredTreeData]) }) })] }));
+                        }, [filteredTreeData]) }) }) })] }));
 });
 Tree.Node = TreeNode;

package/dist/esm/components/tree/tree.style.d.ts

@@ -1,13 +1,19 @@
 export declare const classes: {
     label: string;
     search: string;
-    icon: string;
     prefix: string;
-    checkbox: string;
-    suffix: string;
+    icon: string;
     expand: string;
     indent: string;
     node: string;
+    checkbox: string;
+    suffix: string;
+    contentWrap: string;
+    levelBlock: string;
+    dragHandle: string;
+    dragMask: string;
+    dragMaskPrev: string;
+    dragMaskNext: string;
 } & {
     root: string;
 };