@canlooks/can-ui 0.0.96 → 0.0.98

package/dist/cjs/components/accordion/accordion.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     title: string;
-    content: string;
     prefix: string;
+    content: string;
     suffix: string;
     expandIcon: string;
     titleRow: string;

package/dist/cjs/components/alert/alert.style.d.ts

@@ -1,11 +1,11 @@
 import { ColorPropsValue } from '../../types';
 export declare const classes: {
     title: string;
-    content: string;
-    close: string;
     prefix: string;
-    icon: string;
+    content: string;
     suffix: string;
+    icon: string;
+    close: string;
     description: string;
 } & {
     root: string;

package/dist/cjs/components/button/button.style.d.ts

@@ -1,7 +1,7 @@
 import { ColorPropsValue } from '../../types';
 export declare const classes: {
-    content: string;
     prefix: string;
+    content: string;
     suffix: string;
 } & {
     root: string;

package/dist/cjs/components/checkboxBase/checkboxBase.style.d.ts

@@ -2,9 +2,9 @@ import { CheckboxBaseProps } from './checkboxBase';
 export declare const classes: {
     input: string;
     label: string;
-    icon: string;
-    radio: string;
     checkbox: string;
+    radio: string;
+    icon: string;
     radioChecked: string;
     indeterminate: string;
 } & {

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

@@ -18,26 +18,26 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     suppressContentEditableWarning: boolean;
     suppressHydrationWarning: boolean;
     accessKey: string;
-    autoCapitalize: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
+    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus: boolean;
     className: string;
-    contentEditable: boolean | "true" | "inherit" | "false" | "plaintext-only";
+    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
     contextMenu: string;
     dir: string;
-    draggable: boolean | "true" | "false";
-    enterKeyHint: "search" | "done" | "send" | "next" | "enter" | "go" | "previous";
+    draggable: boolean | "false" | "true";
+    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
     hidden: boolean;
     id: string;
     lang: string;
     nonce: string;
     slot: string;
-    spellCheck: boolean | "true" | "false";
+    spellCheck: boolean | "false" | "true";
     style: import("react").CSSProperties;
     tabIndex: number;
     title: string;
-    translate: "no" | "yes";
+    translate: "yes" | "no";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "none" | "status" | "feed" | "grid" | "heading" | "list" | "note" | "presentation" | "radio" | "slider" | "timer" | "tree" | (string & {}) | "checkbox" | "listbox" | "region" | "cell" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "gridcell" | "group" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "spinbutton" | "tablist" | "term" | "textbox" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -61,7 +61,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     security: string;
     unselectable: "off" | "on";
     popover: "" | "auto" | "manual";
-    popoverTargetAction: "toggle" | "hide" | "show";
+    popoverTargetAction: "hide" | "show" | "toggle";
     popoverTarget: string;
     inert: boolean;
     inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
@@ -69,52 +69,52 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     exportparts: string;
     part: string;
     "aria-activedescendant": string;
-    "aria-atomic": boolean | "true" | "false";
-    "aria-autocomplete": "none" | "list" | "both" | "inline";
+    "aria-atomic": boolean | "false" | "true";
+    "aria-autocomplete": "both" | "none" | "inline" | "list";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
-    "aria-busy": boolean | "true" | "false";
-    "aria-checked": boolean | "true" | "mixed" | "false";
+    "aria-busy": boolean | "false" | "true";
+    "aria-checked": boolean | "mixed" | "false" | "true";
     "aria-colcount": number;
     "aria-colindex": number;
     "aria-colindextext": string;
     "aria-colspan": number;
     "aria-controls": string;
-    "aria-current": boolean | "time" | "true" | "location" | "page" | "false" | "step" | "date";
+    "aria-current": boolean | "time" | "step" | "page" | "false" | "true" | "location" | "date";
     "aria-describedby": string;
     "aria-description": string;
     "aria-details": string;
-    "aria-disabled": boolean | "true" | "false";
-    "aria-dropeffect": "link" | "copy" | "none" | "move" | "execute" | "popup";
+    "aria-disabled": boolean | "false" | "true";
+    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
     "aria-errormessage": string;
-    "aria-expanded": boolean | "true" | "false";
+    "aria-expanded": boolean | "false" | "true";
     "aria-flowto": string;
-    "aria-grabbed": boolean | "true" | "false";
-    "aria-haspopup": boolean | "dialog" | "menu" | "true" | "grid" | "tree" | "listbox" | "false";
-    "aria-hidden": boolean | "true" | "false";
-    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling";
+    "aria-grabbed": boolean | "false" | "true";
+    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
+    "aria-hidden": boolean | "false" | "true";
+    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
     "aria-keyshortcuts": string;
     "aria-label": string;
     "aria-labelledby": string;
     "aria-level": number;
     "aria-live": "off" | "assertive" | "polite";
-    "aria-modal": boolean | "true" | "false";
-    "aria-multiline": boolean | "true" | "false";
-    "aria-multiselectable": boolean | "true" | "false";
+    "aria-modal": boolean | "false" | "true";
+    "aria-multiline": boolean | "false" | "true";
+    "aria-multiselectable": boolean | "false" | "true";
     "aria-orientation": "horizontal" | "vertical";
     "aria-owns": string;
     "aria-placeholder": string;
     "aria-posinset": number;
-    "aria-pressed": boolean | "true" | "mixed" | "false";
-    "aria-readonly": boolean | "true" | "false";
+    "aria-pressed": boolean | "mixed" | "false" | "true";
+    "aria-readonly": boolean | "false" | "true";
     "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required": boolean | "true" | "false";
+    "aria-required": boolean | "false" | "true";
     "aria-roledescription": string;
     "aria-rowcount": number;
     "aria-rowindex": number;
     "aria-rowindextext": string;
     "aria-rowspan": number;
-    "aria-selected": boolean | "true" | "false";
+    "aria-selected": boolean | "false" | "true";
     "aria-setsize": number;
     "aria-sort": "none" | "ascending" | "descending" | "other";
     "aria-valuemax": number;

package/dist/cjs/components/dataGrid/dataGrid.style.d.ts

@@ -3,11 +3,11 @@ export declare const classes: {
     title: string;
     children: string;
     container: string;
+    expandable: string;
     filterForm: string;
     functionalCell: string;
     sortIcon: string;
     filterButton: string;
-    expandable: string;
     expandableWrap: string;
     selectable: string;
     subTd: string;

package/dist/cjs/components/descriptions/descriptions.style.d.ts

@@ -2,8 +2,8 @@ export declare const classes: {
     col: string;
     label: string;
     content: string;
-    colon: string;
     vertical: string;
+    colon: string;
     item: string;
     labelCol: string;
     contentCol: string;

package/dist/cjs/components/dialog/dialog.style.d.ts

@@ -2,12 +2,12 @@ export declare const classes: {
     body: string;
     footer: string;
     title: string;
-    content: string;
-    close: string;
     prefix: string;
+    content: string;
+    suffix: string;
     icon: string;
     container: string;
-    suffix: string;
+    close: string;
     card: string;
     titleRow: string;
     bodyWrap: string;

package/dist/cjs/components/inputBase/inputBase.style.d.ts

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

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

@@ -21,6 +21,10 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     suffix?: ReactNode;
     /** 当label不为string时，该字段会取代label用来搜索 */
     searchToken?: string;
+    /**
+     * 若指定为`true`，则弹框打开时会自动滚动到该选项，默认为`false`
+     */
+    scrollHere?: boolean;
     /** @private 内部使用，缩进的层级 */
     _level?: number;
     indent?: number;
@@ -29,4 +33,4 @@ export interface MenuItemProps extends Omit<DivProps, 'prefix'> {
     expanded?: boolean;
     onExpandedChange?(expanded: boolean): void;
 }
-export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const MenuItem: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/menuItem/menuItem.js

@@ -11,7 +11,7 @@ const menu_1 = require("../menu");
 const transitionBase_1 = require("../transitionBase");
 const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
-exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
+exports.MenuItem = (0, react_1.memo)(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }) => {
     const context = (0, menu_1.useMenuContext)();
     size ??= context.size;
     showCheckbox ??= context.showCheckbox;

package/dist/cjs/components/menuItem/menuItem.style.d.ts

@@ -1,10 +1,10 @@
 import { MenuItemProps } from './menuItem';
 export declare const classes: {
     children: string;
-    content: string;
     prefix: string;
-    checkbox: string;
+    content: string;
     suffix: string;
+    checkbox: string;
     arrow: string;
     childrenWrap: string;
 } & {

package/dist/cjs/components/palette/palette.style.d.ts

@@ -2,9 +2,9 @@ export declare const classes: {
     input: string;
     main: string;
     mask: string;
-    sliders: string;
     hue: string;
     alpha: string;
+    sliders: string;
     handle: string;
     slidersRow: string;
     alphaMask: string;

package/dist/cjs/components/pickerDialog/pickerDialog.style.d.ts

@@ -1,7 +1,7 @@
 export declare const classes: {
     content: string;
-    confirm: string;
     list: string;
+    confirm: string;
     selectedArea: string;
     count: string;
 } & {

package/dist/cjs/components/popper/popper.js

@@ -360,51 +360,54 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const hoverable = triggersSet.has('hover');
     const enterTimeout = (0, react_1.useRef)(void 0);
     const leaveTimeout = (0, react_1.useRef)(void 0);
-    const hoverStack = (0, react_1.useRef)(0);
-    const pointerEnter = () => {
-        if (hoverStack.current++) {
-            return;
-        }
+    const isOvering = (0, react_1.useRef)(false);
+    const pointerEnterFn = (0, react_1.useCallback)(() => {
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
-    };
-    const pointerLeave = () => {
-        if (--hoverStack.current) {
-            return;
-        }
+    }, [mouseEnterDelay]);
+    const pointerLeaveFn = (0, react_1.useCallback)(() => {
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
-    };
-    // 绑定锚点元素
+    }, [mouseLeaveDelay]);
     (0, react_1.useEffect)(() => {
         if (!hoverable) {
             return;
         }
+        const pointerOver = (e) => {
+            if (!isOvering.current && e.target === anchorRef.current) {
+                isOvering.current = true;
+                pointerEnterFn();
+            }
+        };
+        const pointerLeave = () => {
+            isOvering.current = false;
+            pointerLeaveFn();
+        };
         const anchorEl = anchorRef.current;
-        anchorEl.addEventListener('pointerenter', pointerEnter);
+        anchorEl.addEventListener('pointerover', pointerOver);
         anchorEl.addEventListener('pointerleave', pointerLeave);
         return () => {
-            anchorEl.removeEventListener('pointerenter', pointerEnter);
+            anchorEl.removeEventListener('pointerover', pointerOver);
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
-    }, [hoverable]);
+    }, []);
     // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     (0, react_1.useEffect)(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
         }
         const popperEl = innerPopperRef.current;
-        popperEl.addEventListener('pointerenter', pointerEnter);
-        popperEl.addEventListener('pointerleave', pointerLeave);
+        popperEl.addEventListener('pointerenter', pointerEnterFn);
+        popperEl.addEventListener('pointerleave', pointerLeaveFn);
         return () => {
-            popperEl.removeEventListener('pointerenter', pointerEnter);
-            popperEl.removeEventListener('pointerleave', pointerLeave);
+            popperEl.removeEventListener('pointerenter', pointerEnterFn);
+            popperEl.removeEventListener('pointerleave', pointerLeaveFn);
         };
-    }, [innerOpen.current]);
+    }, [innerOpen.current, mouseLeaveDelay]);
     /**
      * focus相关
      */
@@ -513,7 +516,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     }), [innerOpen.current, autoClose]);
     const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
-                ? (0, react_1.cloneElement)(children, { ref: childRef })
+                ? (0, react_1.cloneElement)(children, {
+                    ref: childRef
+                })
                 : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.classes.root, props.className), style: {

package/dist/cjs/components/progress/progress.js

@@ -14,6 +14,7 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color, stat
     const isColorSpecified = !!color;
     color ??= 'primary';
     const { colors: { success, error } } = (0, theme_1.useTheme)();
+    value = Math.max(0, Math.min(value, 100));
     const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
     const renderInfoFn = () => {
         if (renderInfo) {
@@ -71,6 +72,6 @@ exports.Progress = (0, react_1.memo)(({ showInfo = true, renderInfo, color, stat
                                 : void 0
                         }, children: [(0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, className: progress_style_1.classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), (0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: progress_style_1.classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
                                     ? strokeDasharray * (1 - value / 100)
-                                    : strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
+                                    : strokeDasharray * (1 - value / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
                         (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfoFn() })] }) }));
 });

package/dist/cjs/components/progress/progress.style.d.ts

@@ -3,8 +3,8 @@ export declare const classes: {
     info: string;
     track: string;
     svg: string;
-    icon: string;
     bar: string;
+    icon: string;
 } & {
     root: string;
 };

package/dist/cjs/components/resizable/resizable.style.d.ts

@@ -1,8 +1,8 @@
 import { Handle, ResizableProps } from './resizable';
 export declare const classes: {
+    container: string;
     corner: string;
     edge: string;
-    container: string;
 } & {
     root: string;
 };

package/dist/cjs/components/segmented/segmented.style.d.ts

@@ -3,8 +3,8 @@ export declare const classes: {
     label: string;
     option: string;
     prefix: string;
-    indicator: string;
     suffix: string;
+    indicator: string;
 } & {
     root: string;
 };

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

@@ -32,4 +32,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, scrollHere, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -4,6 +4,8 @@ export interface OptionType<V extends Id = Id> extends Obj {
     children?: OptionType<V>[];
     /** @private */
     _parentId?: V;
+    /** @private */
+    _isLast?: boolean;
 }
 export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id> = {
     options?: O[];

package/dist/cjs/components/selectionContext/selectionHook.js

@@ -33,8 +33,9 @@ function useSelection(props) {
         const map = new Map();
         const fn = (arr, parentId) => {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
-            Array.isArray(arr) && arr.forEach(item => {
+            Array.isArray(arr) && arr.forEach((item, i) => {
                 item._parentId = parentId;
+                item._isLast = i === arr.length - 1;
                 const id = item[props.primaryKey];
                 !(0, utils_1.isUnset)(id) && map.set(id, item);
                 fn(item[props.childrenKey], id);

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

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

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

@@ -1,7 +1,7 @@
 export declare const classes: {
     label: string;
-    icon: string;
     dot: string;
+    icon: string;
 } & {
     root: string;
 };

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

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

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;
+    content: string;
     suffix: string;
+    close: string;
 } & {
     root: string;
 };

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

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

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

@@ -6,11 +6,11 @@ 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 SortPlacement = 'before' | 'after' | 'child';
 export type SortInfo<V extends Id = Id> = {
     source: V;
     destination: V;
-    placement: SortPlacement | 'child';
+    placement: SortPlacement;
 };
 export interface TreeBaseProps<N extends NodeType<V>, V extends Id = Id> extends Omit<SelectionContextBaseProps<N, V>, 'options'>, Omit<DivProps, 'defaultValue' | 'onChange' | 'onToggle'> {
     nodes?: N[];

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

@@ -21,11 +21,6 @@ function useTreeContext() {
 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 = '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
@@ -57,30 +52,37 @@ primaryKey = 'id', childrenKey = 'children', relation = 'dependent', integration
         defaultExpanded, expanded, onExpandedChange,
         defaultSearchValue, searchValue, onSearchChange
     });
-    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 &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tree_style_1.useStyle)({ indent }), className: (0, utils_1.clsx)(tree_style_1.classes.root, props.className), "data-show-line": showLine, 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)(() => ({
+                    } }), (0, jsx_runtime_1.jsx)(selectionContext_1.SelectionContext, { ...{
+                    options: actualTreeNodes, primaryKey, childrenKey, relation, integration,
+                    multiple, defaultValue, value, onChange, disabled
+                }, children: (0, jsx_runtime_1.jsx)(TreeContext, { value: (0, react_2.useMemo)(() => ({
                         expandedSet, toggleExpanded, indent, renderExpandIcon, clickLabelToExpand,
                         showCheckbox, readOnly, disabled
                     }), [
                         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)(() => {
+                    ]), children: (0, jsx_runtime_1.jsx)(treeDnd_1.TreeDnd, { sortable: sortable, showDragHandle: showDragHandle, onSort: onSort, children: (0, react_2.useMemo)(() => {
                             if (!filteredTreeData?.length) {
                                 return null;
                             }
                             const fn = (arr) => {
-                                return arr?.map(({ _parentId, ...nodeProps }, i) => {
-                                    const currentValue = nodeProps[primaryKey];
+                                return arr?.map(({ _isLast, _parentId, ...nodeProps }) => {
+                                    const currentId = nodeProps[primaryKey];
                                     const label = nodeProps[labelKey];
-                                    return ((0, react_1.createElement)(treeNode_1.TreeNode, { ...nodeProps, key: currentValue, value: currentValue, label: typeof label === 'string' && deferredSearchValue
+                                    const children = nodeProps[childrenKey];
+                                    delete nodeProps[primaryKey];
+                                    delete nodeProps[labelKey];
+                                    delete nodeProps[childrenKey];
+                                    return ((0, react_1.createElement)(treeNode_1.TreeNode, { ...nodeProps, key: currentId, id: currentId, label: typeof label === 'string' && deferredSearchValue
                                             ? (0, jsx_runtime_1.jsx)(highlight_1.Highlight, { keywords: deferredSearchValue.split(' '), children: label })
-                                            : label }, fn(nodeProps[childrenKey])));
+                                            : label }, fn(children)));
                                 });
                             };
                             return fn(filteredTreeData);
-                        }, [filteredTreeData]) }) }) })] }));
+                        }, [filteredTreeData, primaryKey, labelKey, childrenKey, deferredSearchValue]) }) }) })] }));
 });
 exports.Tree.Node = treeNode_1.TreeNode;

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

@@ -2,20 +2,16 @@ export declare const classes: {
     label: string;
     search: string;
     prefix: string;
+    suffix: string;
+    checkbox: string;
     icon: string;
     expand: string;
     indent: string;
     node: string;
-    checkbox: string;
-    container: string;
-    suffix: string;
     contentWrap: string;
-    levelBlock: string;
-    dragHandle: string;
-    dragMask: string;
-    dragMaskPrev: string;
-    dragMaskNext: string;
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare function useStyle({ indent }: {
+    indent: number;
+}): import("@emotion/react").SerializedStyles[];