@canlooks/can-ui 0.0.70 → 0.0.71

package/dist/cjs/components/tag/tag.js

@@ -7,6 +7,7 @@ const tag_style_1 = require("./tag.style");
 const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const button_1 = require("../button");
 exports.Tag = (0, react_1.memo)(({ variant = 'outlined', color = 'text.secondary', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }) => {
     const closeHandler = (e) => {
         e.preventDefault();
@@ -16,5 +17,5 @@ exports.Tag = (0, react_1.memo)(({ variant = 'outlined', color = 'text.secondary
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color: color || 'text.secondary' }), className: (0, utils_1.clsx)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.content, children: props.children }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.suffix, children: suffix }), closable &&
-                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
+                (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faXmark_1.faXmark }) })] }));
 });

package/dist/cjs/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/cjs/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/cjs/components/textarea/textarea.js

@@ -7,5 +7,9 @@ const inputBase_1 = require("../inputBase");
 const textarea_style_1 = require("./textarea.style");
 const utils_1 = require("../../utils");
 exports.Textarea = (0, react_1.memo)(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: textarea_style_1.style, className: (0, utils_1.clsx)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsx)("textarea", { rows: rows, ...rest, ...textareaProps, ref: (0, utils_1.cloneRef)(ref, textareaRef), className: (0, utils_1.clsx)(textarea_style_1.classes.textarea, textareaProps?.className) }) }));
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: textarea_style_1.style, className: (0, utils_1.clsx)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: inputBaseProps => (0, jsx_runtime_1.jsx)("textarea", { ...(0, utils_1.mergeComponentProps)(inputBaseProps, {
+                rows,
+                ref: textareaRef,
+                className: textarea_style_1.classes.textarea
+            }) }) }));
 });

package/dist/cjs/components/toggleButton/toggleButton.js

@@ -10,7 +10,7 @@ const toggleButton_style_1 = require("./toggleButton.style");
 const button_1 = require("../button");
 const selectionContext_1 = require("../selectionContext");
 exports.ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled, readOnly, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
-    const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({
+    const [innerValue, toggleSelected] = (0, selectionContext_1.useFlatSelection)({
         disabled: disabled ?? readOnly,
         multiple,
         defaultValue,

package/dist/cjs/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/cjs/components/transitionBase/collapse.js

@@ -12,22 +12,44 @@ const Collapse = ({ transitionType = 'sweeping', ...props }) => {
 exports.Collapse = Collapse;
 const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
     const innerRef = (0, react_1.useRef)(null);
-    const [size, setSize] = (0, utils_1.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] = (0, react_1.useState)(() => {
+        if (_in && !appear) {
+            return 'auto';
+        }
+        return getCollapsedSize();
+    });
+    const [isEntered, setIsEntered] = (0, react_1.useState)(_in && !appear);
+    const expand = () => {
+        requestAnimationFrame(() => {
+            innerRef.current && setSize(innerRef.current[orientation === 'vertical' ? 'scrollHeight' : 'scrollWidth']);
+        });
+    };
+    const collapse = () => {
+        setIsEntered(false);
+        requestAnimationFrame(() => {
+            setSize(getCollapsedSize());
+        });
+    };
+    const initialized = (0, react_1.useRef)(false);
     (0, react_1.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 ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, in: _in, ref: (0, utils_1.cloneRef)(ref, innerRef), style: {
-            [orientation === 'vertical' ? 'height' : 'width']: size.current,
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: (0, utils_1.cloneRef)(ref, innerRef), style: {
+            [orientation === 'vertical' ? 'height' : 'width']: isEntered ? 'auto' : size,
+            ...!isEntered ? { overflow: 'hidden' } : {},
             ...props.style
-        } }));
+        }, onEntered: () => setIsEntered(true) }));
 };

package/dist/cjs/components/transitionBase/transitionBase.js

@@ -25,5 +25,5 @@ exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'v
         }
     }
     const innerRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), css: cssArr, children: props.children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), children: props.children }) }));
 });

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

@@ -48,7 +48,7 @@ exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
     }
 `);
 exports.sweepingStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
-    overflow: hidden;
+    //overflow: hidden;
     transition-property: opacity, width, height;
 
     &.appear-active,

package/dist/cjs/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/cjs/components/transportStyle/transportStyle.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransportStyle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../../utils");
-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 }) => {
+exports.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 ((0, jsx_runtime_1.jsx)(Component, { ...props, style: (0, utils_1.filterProperties)({
             alignItems, justifyContent, alignSelf, justifySelf, flex,
             width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
@@ -12,5 +12,4 @@ const TransportStyle = ({ component: Component = 'div', alignItems, justifyConte
             overflow, overflowX, overflowY,
             ...props.style
         }) }));
-};
-exports.TransportStyle = TransportStyle;
+});

package/dist/cjs/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/cjs/components/tree/tree.js

@@ -10,21 +10,22 @@ const input_1 = require("../input");
 const tree_style_1 = require("./tree.style");
 const utils_1 = require("../../utils");
 const highlight_1 = require("../highlight");
-const placeholder_1 = require("../placeholder");
 const treeNode_1 = require("./treeNode");
 const icon_1 = require("../icon");
 const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
+const treeDnd_1 = require("./treeDnd");
 const TreeContext = (0, react_2.createContext)({});
 function useTreeContext() {
     return (0, react_2.useContext)(TreeContext);
 }
-exports.Tree = (0, react_2.memo)(({ nodes, labelKey = 'label', searchTokenKey, showLine = true, indent = 24, renderExpandIcon, multiple, showCheckbox = !!multiple, readOnly, clickLabelToExpand, defaultExpanded, expanded, onExpandedChange, searchable, searchInputProps, defaultSearchValue, searchValue, onSearchChange, 
+exports.Tree = (0, react_2.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 = (0, react_2.useRef)(null);
     /**
      * --------------------------------------------------------------
      * 统一处理nodes与children
@@ -56,20 +57,22 @@ primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integrat
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: tree_style_1.style, className: (0, utils_1.clsx)(tree_style_1.classes.root, props.className), "data-show-line": showLine, children: [searchable &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(containerRef, props.ref), css: tree_style_1.style, className: (0, utils_1.clsx)(tree_style_1.classes.root, tree_style_1.classes.levelBlock, props.className), "data-show-line": showLine, "data-sortable": sortable, children: [searchable &&
                 (0, jsx_runtime_1.jsx)(input_1.Input, { className: tree_style_1.classes.search, prefix: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, onChange: e => {
                         searchInputProps?.onChange?.(e);
                         setInnerSearchValue(e.target.value);
                     } }), (0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { ...selectionContextProps, children: (0, jsx_runtime_1.jsx)(TreeContext, { value: (0, react_2.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: (0, react_2.useMemo)(() => {
-                        if (filteredTreeData?.length) {
+                        expandedSet, indent, renderExpandIcon, clickLabelToExpand,
+                        showCheckbox, readOnly, disabled
+                    ]), children: (0, jsx_runtime_1.jsx)(treeDnd_1.TreeDnd, { sortable: sortable, showDragHandle: showDragHandle, onSort: onSort, containerRef: containerRef, children: (0, react_2.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 ((0, react_1.createElement)(treeNode_1.TreeNode, { ...nodeProps, key: currentValue, value: currentValue, label: typeof label === 'string' && deferredSearchValue
@@ -78,8 +81,6 @@ primaryKey = 'value', childrenKey = 'children', relation = 'dependent', integrat
                                 });
                             };
                             return fn(filteredTreeData);
-                        }
-                        return (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {});
-                    }, [filteredTreeData]) }) })] }));
+                        }, [filteredTreeData]) }) }) })] }));
 });
 exports.Tree.Node = treeNode_1.TreeNode;

package/dist/cjs/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;
 };

package/dist/cjs/components/tree/tree.style.js

@@ -6,15 +6,21 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
 exports.classes = (0, utils_1.defineInnerClasses)('tree', [
+    'levelBlock',
     'search',
     'node',
+    'contentWrap',
     'indent',
     'expand',
     'checkbox',
+    'dragHandle',
     'icon',
     'label',
     'prefix',
-    'suffix'
+    'suffix',
+    'dragMask',
+    'dragMaskPrev',
+    'dragMaskNext'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
     const c = (0, color_1.default)(colors.primary.main);
@@ -32,10 +38,9 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
             display: flex;
             align-items: center;
             padding-right: ${spacing[2]}px;
-            margin-bottom: 1px;
-            cursor: pointer;
             border-radius: ${borderRadius}px;
             transition: background-color .25s ${easing.easeOut};
+            touch-action: none;
             -webkit-tap-highlight-color: transparent;
 
             &[data-disabled=true] {
@@ -43,6 +48,10 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 cursor: not-allowed;
             }
 
+            &:not([data-read-only=true]) {
+                cursor: pointer;
+            }
+
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
@@ -55,7 +64,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                     background-color: ${selectedActive};
                 }
             }
-            
+
             &:not([data-disabled=true]):not([data-selected=true]):hover {
                 background-color: ${hover};
             }
@@ -81,6 +90,21 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 }
             }
 
+            .${exports.classes.contentWrap} {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                position: relative;
+            }
+
+            .${exports.classes.dragHandle} {
+                width: 20px;
+                margin-right: ${spacing[3]}px;
+                text-align: center;
+                color: ${gray(.12)};
+                cursor: grab;
+            }
+
             .${exports.classes.checkbox} {
                 margin-right: ${spacing[3]}px;
             }
@@ -88,6 +112,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
             .${exports.classes.label} {
                 flex: 1;
                 padding: 5px 0;
+
             }
 
             .${exports.classes.prefix} {
@@ -99,6 +124,88 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 color: ${text.disabled};
                 margin-left: ${spacing[2]}px;
             }
+
+            .${exports.classes.dragMask} {
+                position: absolute;
+                inset: 0;
+
+                > div {
+                    width: 100%;
+                    height: 50%;
+                    position: absolute;
+                    left: 0;
+
+                    &:before, &:after {
+                        content: '';
+                        display: none;
+                        position: absolute;
+                        pointer-events: none;
+                    }
+
+                    &:before {
+                        width: 8px;
+                        height: 8px;
+                        border: 2px solid ${colors.primary.main};
+                        border-radius: 50%;
+                        left: 0;
+                    }
+
+                    &:after {
+                        width: 100%;
+                        height: 2px;
+                        background: ${colors.primary.main};
+                        left: 8px;
+                    }
+
+                    &.${exports.classes.dragMaskPrev} {
+                        top: 0;
+
+                        &:before {
+                            top: -4px;
+                        }
+
+                        &:after {
+                            top: -1px;
+                        }
+                    }
+
+                    &.${exports.classes.dragMaskNext} {
+                        bottom: 0;
+
+                        &:before {
+                            bottom: -4px;
+                        }
+
+                        &:after {
+                            bottom: -1px;
+                        }
+                    }
+
+                    &[data-offset=true] {
+                        &:before {
+                            width: 10px;
+                            border-top: 0;
+                            border-right: 0;
+                            border-bottom: 2px dashed ${colors.primary.main};
+                            border-left: 2px dashed ${colors.primary.main};
+                            border-radius: 0;
+                            left: 24px;
+                            bottom: -1px;
+                        }
+
+                        &:after {
+                            width: calc(100% - 36px);
+                            left: 36px;
+                        }
+                    }
+
+                    &[data-overing=true] {
+                        &:before, &:after {
+                            display: block;
+                        }
+                    }
+                }
+            }
         }
 
         &[data-show-line=true] {
@@ -110,5 +217,29 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
                 background-color: ${divider};
             }
         }
+
+        &, .${exports.classes.levelBlock} {
+            &[data-active=true] {
+                outline: 1px dashed ${colors.primary.main};
+            }
+        }
+
+        &[data-sortable=true] {
+            .${exports.classes.node} {
+                &:not(:has(.${exports.classes.dragHandle})) {
+                    cursor: grab;
+                }
+
+                &[data-dragging=true] {
+                    &, &:active {
+                        background-color: ${selectedBg};
+                    }
+                }
+
+                &:has(+ .${exports.classes.levelBlock}[data-active=true]) {
+                    outline: 1px solid ${colors.primary.main};
+                }
+            }
+        }
     `;
 });

package/dist/cjs/components/tree/treeDnd.d.ts

@@ -0,0 +1,25 @@
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+import { Id } from '../../types';
+import { SortPlacement, TreeBaseProps } from './tree';
+type TreeDndContextItem<T> = [T | undefined, Dispatch<SetStateAction<T | undefined>>];
+type ITreeDndContext = {
+    sortable: boolean;
+    showDragHandle: boolean;
+    containerRef: RefObject<HTMLDivElement | null>;
+    isOffsetSatisfied: [boolean, Dispatch<SetStateAction<boolean>>];
+    dragging: TreeDndContextItem<Id>;
+    overing: TreeDndContextItem<Id>;
+    placement: [RefObject<SortPlacement | undefined>, Dispatch<SetStateAction<SortPlacement | undefined>>];
+    onSort: TreeBaseProps<any>['onSort'];
+    overingTimer: RefObject<any>;
+};
+export declare const TreeDndContext: import("react").Context<ITreeDndContext>;
+export declare function useTreeDndContext(): ITreeDndContext;
+export declare const TreeDnd: import("react").MemoExoticComponent<({ sortable, showDragHandle, onSort, containerRef, children }: {
+    sortable: boolean;
+    showDragHandle: boolean;
+    onSort: TreeBaseProps<any>["onSort"];
+    containerRef: RefObject<HTMLDivElement | null>;
+    children: ReactNode;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};

package/dist/cjs/components/tree/treeDnd.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeDnd = exports.TreeDndContext = void 0;
+exports.useTreeDndContext = useTreeDndContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+exports.TreeDndContext = (0, react_1.createContext)({});
+function useTreeDndContext() {
+    return (0, react_1.useContext)(exports.TreeDndContext);
+}
+exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, containerRef, children }) => {
+    const isOffsetSatisfied = (0, react_1.useState)(false);
+    const dragging = (0, react_1.useState)(void 0);
+    const overing = (0, react_1.useState)(void 0);
+    const placement = (0, utils_1.useSyncState)(void 0);
+    const overingTimer = (0, react_1.useRef)(void 0);
+    return ((0, jsx_runtime_1.jsx)(exports.TreeDndContext, { value: {
+            sortable, showDragHandle, onSort, containerRef,
+            isOffsetSatisfied, dragging, overing, placement,
+            overingTimer
+        }, children: children }));
+});

package/dist/cjs/components/tree/treeNode.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { DivProps, Id } from '../../types';
 export interface TreeNodeProps extends Omit<DivProps, 'prefix'> {
     value: Id;
@@ -9,4 +9,4 @@ export interface TreeNodeProps extends Omit<DivProps, 'prefix'> {
     /** @private 内部使用，表明该节点的层级 */
     _level?: number;
 }
-export declare const TreeNode: import("react").MemoExoticComponent<({ value, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const TreeNode: React.MemoExoticComponent<({ value, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;