@canlooks/can-ui 0.0.70 → 0.0.72

package/dist/cjs/components/slider/slider.js

@@ -163,13 +163,12 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
     const valueIsArray = Array.isArray(innerValue.current);
     const renderHandleFn = () => {
         const fn = (value, index = 0) => {
-            const _handleProps = {
+            const _handleProps = (0, utils_1.mergeComponentProps)(handleProps, {
                 key: index,
-                ...handleProps,
-                ref: (0, utils_1.cloneRef)(r => {
+                ref: r => {
                     handleRefs.current[index] = r;
-                }, handleProps?.ref),
-                className: (0, utils_1.clsx)(slider_style_1.classes.handle, handleProps?.className),
+                },
+                className: slider_style_1.classes.handle,
                 style: {
                     width: handleSize,
                     height: handleSize,
@@ -181,25 +180,23 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                         : {
                             bottom: valueToPercent(value) + '%',
                             left: '50%'
-                        },
-                    ...handleProps?.style
+                        }
                 },
                 onPointerDown(e) {
                     e.stopPropagation();
-                    handleProps?.onPointerDown?.(e);
                     draggableHandles.onPointerDown(e);
                 }
-            };
+            });
             return renderHandle
                 ? renderHandle(value, _handleProps)
-                : (0, react_1.createElement)(tooltip_1.Tooltip, { popperRef: r => {
+                : (0, react_1.createElement)(tooltip_1.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 },
+                    } },
                     (0, react_1.createElement)("button", { ..._handleProps, key: index }));
         };
         return valueIsArray
@@ -211,10 +208,9 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
      * 渲染轨道
      */
     const renderRailFn = () => {
-        const _railProps = {
-            ...railProps,
+        const _railProps = (0, utils_1.mergeComponentProps)(railProps, {
             ref: railRef,
-            className: (0, utils_1.clsx)(slider_style_1.classes.rail, railProps?.className),
+            className: slider_style_1.classes.rail,
             style: {
                 ...orientation === 'horizontal'
                     ? {
@@ -225,12 +221,8 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                         width: railSize,
                         [inset ? 'padding' : 'margin']: `${handleSize / 2}px 0`
                     },
-                ...railProps?.style
-            },
-            onPointerDown: e => {
-                railProps?.onPointerDown?.(e);
-                draggableHandles.onPointerDown(e);
             },
+            onPointerDown: draggableHandles.onPointerDown,
             children: ((0, jsx_runtime_1.jsxs)("div", { className: slider_style_1.classes.railWrap, children: [!disableTrack &&
                         (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.track, style: valueIsArray
                                 ? (orientation === 'horizontal'
@@ -284,8 +276,10 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                                         transform: 'translateY(-50%)'
                                     }
                             }, children: label }))), renderHandleFn()] }))
-        };
-        return renderRail ? renderRail(innerValue.current, _railProps) : (0, jsx_runtime_1.jsx)("div", { ..._railProps });
+        });
+        return renderRail
+            ? renderRail(innerValue.current, _railProps)
+            : (0, jsx_runtime_1.jsx)("div", { ..._railProps });
     };
     /**
      * -----------------------------------------------------------------

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

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

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -13,16 +13,6 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
         id
     });
     const preventDefaultCallback = (0, react_1.useRef)(void 0);
-    const onPointerUp = (0, react_1.useCallback)(() => {
-        removeListener();
-    }, []);
-    const onTouchStart = (0, react_1.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);
@@ -30,6 +20,15 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
         }
         removeEventListener('pointerup', onPointerUp);
     };
+    const onPointerUp = (0, react_1.useCallback)(removeListener, []);
+    const syncOnTouchStart = (0, utils_1.useSync)(props.onTouchStart);
+    const onTouchStart = (0, react_1.useCallback)((e) => {
+        syncOnTouchStart.current?.(e);
+        addEventListener('touchmove', preventDefaultCallback.current = e => {
+            e.cancelable && e.preventDefault();
+        }, { passive: false });
+        addEventListener('pointerup', onPointerUp);
+    }, []);
     (0, react_1.useEffect)(() => removeListener, []);
     return ((0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), style: {
             transform: utilities_1.CSS.Transform.toString(transform),

package/dist/cjs/components/status/status.d.ts

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/dist/cjs/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/cjs/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/cjs/components/table/table.style.d.ts

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableContainer = TableContainer;
+exports.TableContainer = void 0;
 exports.TdCell = TdCell;
 exports.ThCell = ThCell;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
@@ -8,7 +8,7 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const table_style_1 = require("./table.style");
 const tableSticky_style_1 = require("./tableSticky.style");
-function TableContainer(props) {
+exports.TableContainer = (({ component: Component = 'div', ...props }) => {
     const [scrolledLeft, setScrolledLeft] = (0, react_1.useState)(false);
     const [scrolledRight, setScrolledRight] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);
@@ -24,8 +24,8 @@ function TableContainer(props) {
             el.removeEventListener('scroll', scroll);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
-}
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+});
 function TdCell(props) {
     return (0, jsx_runtime_1.jsx)("td", { ...useStickyCellProps(props) });
 }

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