@sheinx/base 3.6.0-beta.3 → 3.6.0-beta.30

package/esm/tree/tree-node.type.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { CommonType } from '../common/type';
 import { BaseTreeProps, KeygenResult, UpdateFunc } from '@sheinx/hooks';
-import { JsstyleType, TreeRenderItemType } from './tree.type';
+import { JsstyleType, TreeRenderItemType, TreeProps } from './tree.type';
 import { TreeListProps } from './tree-list.type';
-export interface TreeNodeProps<DataItem, Value extends KeygenResult[]> extends Omit<BaseTreeProps<DataItem>, 'data' | 'childrenKey' | 'expanded'>, Pick<CommonType, 'className'> {
+export interface TreeSimpleNodeProps<DataItem, Value extends KeygenResult[]> extends Omit<BaseTreeProps<DataItem>, 'data' | 'childrenKey' | 'expanded'>, Pick<CommonType, 'className'>, Pick<TreeProps<DataItem, Value>, 'actionOnClick'> {
     jssStyle?: JsstyleType;
     id: KeygenResult;
     data: DataItem;
@@ -21,7 +21,7 @@ export interface TreeNodeProps<DataItem, Value extends KeygenResult[]> extends O
     nodeClass?: string | ((data: DataItem) => string);
     contentClass?: string | ((data: DataItem) => string);
     expandIcons?: (React.ReactNode | ((d: DataItem) => React.ReactNode))[];
-    childrenClass: (data: DataItem) => string | undefined;
+    childrenClass?: ((data: DataItem) => string) | string;
     bindNode: (id: KeygenResult, update: UpdateFunc, data: DataItem) => {
         expanded: boolean;
         active: boolean;
@@ -41,4 +41,34 @@ export interface TreeNodeProps<DataItem, Value extends KeygenResult[]> extends O
     onDragOver?: (e: React.DragEvent, data: DataItem) => void;
     onDragLeave?: (e: React.DragEvent, data: DataItem) => void;
 }
+export interface TreeVirtualNodeProps<DataItem, Value extends KeygenResult[]> extends Omit<BaseTreeProps<DataItem>, 'data' | 'childrenKey'>, Pick<CommonType, 'className'>, Pick<TreeProps<DataItem, Value>, 'actionOnClick'> {
+    jssStyle?: JsstyleType;
+    id: KeygenResult;
+    data: DataItem;
+    index: number;
+    line: boolean;
+    doubleClickExpand?: boolean;
+    parentClickExpand?: boolean;
+    childrenKey: keyof DataItem;
+    onChange?: (value: Value) => void;
+    childrenClass?: ((data: DataItem) => string) | string;
+    onDrop?: (id: KeygenResult, targetId: KeygenResult, position: number) => void;
+    onToggle?: (id: KeygenResult, expanded?: boolean) => void;
+    iconClass?: string;
+    leafClass?: string | ((data: DataItem) => string);
+    nodeClass?: string | ((data: DataItem) => string);
+    contentClass?: string | ((data: DataItem) => string);
+    expandIcons?: (React.ReactNode | ((d: DataItem) => React.ReactNode))[];
+    onNodeClick: (data: DataItem, id: KeygenResult) => void;
+    renderItem: TreeRenderItemType<DataItem>;
+    loader?: (key: KeygenResult, data: DataItem) => void;
+    inlineNode?: boolean;
+    highlight?: boolean;
+    level: number;
+}
+export type TreeNodeProps<DataItem, Value extends KeygenResult[]> = ({
+    virtual: true;
+} & TreeVirtualNodeProps<DataItem, Value>) | ({
+    virtual?: false | undefined;
+} & TreeSimpleNodeProps<DataItem, Value>);
 //# sourceMappingURL=tree-node.type.d.ts.map

package/esm/tree/tree-node.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.type.d.ts","sourceRoot":"","sources":["tree-node.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,aAAa,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,EAAE,CACnE,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC,EACxE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,EAAE,EAAE,YAAY,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,aAAa,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IACtD,QAAQ,EAAE,CACR,EAAE,EAAE,YAAY,EAChB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,KACX;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5C,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5D"}
+{"version":3,"file":"tree-node.type.d.ts","sourceRoot":"","sources":["tree-node.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,mBAAmB,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,EAAE,CACzE,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,GAAG,UAAU,CAAC,EACxE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,EAC7B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,eAAe,CAAC;IACnD,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,EAAE,EAAE,YAAY,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,GAAG,MAAM,CAAC;IACtD,QAAQ,EAAE,CACR,EAAE,EAAE,YAAY,EAChB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,KACX;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5C,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IAC7E,iBAAiB,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzD,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,oBAAoB,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,EAAE,CAC1E,SAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,EAC3D,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,EAC7B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,eAAe,CAAC;IACnD,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,EAAE,EAAE,YAAY,CAAC;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,GAAG,MAAM,CAAC;IACtD,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IACvE,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IACxD,UAAU,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,aAAa,CAAC,QAAQ,EAAE,KAAK,SAAS,YAAY,EAAE,IAC5D,CAAC;IAAE,OAAO,EAAE,IAAI,CAAA;CAAE,GAAG,oBAAoB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,GAC3D,CAAC;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;CAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC"}

package/esm/tree/tree-root.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { KeygenResult } from '@sheinx/hooks';
 import { TreeRootProps } from './tree-root.type';
-declare const Root: <DataItem, Value extends KeygenResult[]>(props: TreeRootProps<DataItem, Value>) => JSX.Element;
+declare const Root: <DataItem, Value extends KeygenResult[]>(props: TreeRootProps<DataItem, Value>) => import("react/jsx-runtime").JSX.Element;
 export default Root;
 //# sourceMappingURL=tree-root.d.ts.map

package/esm/tree/tree-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-root.d.ts","sourceRoot":"","sources":["tree-root.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,QAAA,MAAM,IAAI,gGAKT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tree-root.d.ts","sourceRoot":"","sources":["tree-root.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,QAAA,MAAM,IAAI,4HAyBT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/tree/tree-root.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["jssStyle"];
+var _excluded = ["jssStyle", "rootStyle"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -7,18 +7,32 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { useMemo } from 'react';
 import classNames from 'classnames';
 import TreeList from "./tree-list";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Root = function Root(props) {
   var jssStyle = props.jssStyle,
+    _props$rootStyle = props.rootStyle,
+    rootStyle = _props$rootStyle === void 0 ? {} : _props$rootStyle,
     rest = _objectWithoutProperties(props, _excluded);
   var treeStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
-  var rootClass = classNames(treeStyle.root);
+  var notTree = useMemo(function () {
+    if (!props.data) return true;
+    return props.data.every(function (item) {
+      if (!item) return true;
+      if (!item[props.childrenKey]) return !props.loader;
+      if (item[props.childrenKey] === null) return true;
+      if (Array.isArray(item[props.childrenKey]) && item[props.childrenKey].length === 0) return true;
+      return false;
+    });
+  }, [props.data]);
+  var rootClass = classNames(treeStyle.root, notTree && treeStyle.notTree);
   return /*#__PURE__*/_jsx(TreeList, _objectSpread(_objectSpread({}, rest), {}, {
     expanded: true,
     className: rootClass,
-    jssStyle: jssStyle
+    jssStyle: jssStyle,
+    style: rootStyle
   }));
 };
 export default Root;

package/esm/tree/tree-root.type.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { JsstyleType, TreeRenderItemType } from './tree.type';
+import { JsstyleType, TreeRenderItemType, TreeProps } from './tree.type';
 import { BaseTreeProps, KeygenResult, UpdateFunc, ObjectKey } from '@sheinx/hooks';
-export interface TreeRootProps<DataItem, Value extends KeygenResult[]> extends Omit<BaseTreeProps<DataItem>, 'chilrdrenKey'> {
+export interface TreeRootProps<DataItem, Value extends KeygenResult[]> extends Omit<BaseTreeProps<DataItem>, 'chilrdrenKey'>, Pick<TreeProps<DataItem, Value>, 'actionOnClick'> {
     jssStyle?: JsstyleType;
     line: boolean;
-    childrenClass: (data: DataItem) => string | undefined;
+    childrenClass?: ((data: DataItem) => string) | string;
     bindNode: (id: KeygenResult, update: UpdateFunc, data: DataItem) => {
         expanded: boolean;
         active: boolean;
@@ -14,6 +14,7 @@ export interface TreeRootProps<DataItem, Value extends KeygenResult[]> extends O
     childrenKey: ObjectKey<DataItem>;
     renderItem: TreeRenderItemType<DataItem>;
     iconClass?: string;
+    rootStyle?: React.CSSProperties;
     leafClass?: string | ((data: DataItem) => string);
     nodeClass?: string | ((data: DataItem) => string);
     contentClass?: string | ((data: DataItem) => string);

package/esm/tree/tree-root.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-root.type.d.ts","sourceRoot":"","sources":["tree-root.type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tree-root.type.d.ts","sourceRoot":"","sources":["tree-root.type.ts"],"names":[],"mappings":"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"}

package/esm/tree/tree-simple-node.d.ts

@@ -0,0 +1,5 @@
+import { TreeSimpleNodeProps } from './tree-node.type';
+import { KeygenResult } from '@sheinx/hooks';
+declare const Node: <DataItem, Value extends KeygenResult[]>(props: TreeSimpleNodeProps<DataItem, Value>) => import("react/jsx-runtime").JSX.Element;
+export default Node;
+//# sourceMappingURL=tree-simple-node.d.ts.map

package/esm/tree/tree-simple-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-simple-node.d.ts","sourceRoot":"","sources":["tree-simple-node.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAiC,YAAY,EAAE,MAAM,eAAe,CAAC;AAkB5E,QAAA,MAAM,IAAI,kIA4ST,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/esm/tree/tree-simple-node.js

@@ -0,0 +1,286 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useRef, createElement } from 'react';
+import classNames from 'classnames';
+import TreeContent from "./tree-content";
+import { useTreeContext } from "./tree-context";
+import { useTreeNode, util } from '@sheinx/hooks';
+import { useConfig } from "../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var placeElement = null;
+var innerPlaceElement = null;
+var placeInfo = {
+  start: '',
+  target: ''
+};
+var dragLock = false;
+var initPlaceElement = function initPlaceElement() {
+  if (util.isBrowser() && !(placeElement && innerPlaceElement)) {
+    placeElement = document.createElement('div');
+    innerPlaceElement = document.createElement('div');
+    placeElement.appendChild(innerPlaceElement);
+  }
+};
+initPlaceElement();
+var Node = function Node(props) {
+  var jssStyle = props.jssStyle,
+    id = props.id,
+    data = props.data,
+    line = props.line,
+    isControlled = props.isControlled,
+    index = props.index,
+    renderItem = props.renderItem,
+    parentClickExpand = props.parentClickExpand,
+    doubleClickExpand = props.doubleClickExpand,
+    iconClass = props.iconClass,
+    leafClass = props.leafClass,
+    nodeClass = props.nodeClass,
+    contentClass = props.contentClass,
+    expandIcons = props.expandIcons,
+    keygen = props.keygen,
+    mode = props.mode,
+    childrenKey = props.childrenKey,
+    inlineNode = props.inlineNode,
+    highlight = props.highlight,
+    dragSibling = props.dragSibling,
+    dragHoverExpand = props.dragHoverExpand,
+    dragImageSelector = props.dragImageSelector,
+    dragImageStyle = props.dragImageStyle,
+    childrenClass = props.childrenClass,
+    bindNode = props.bindNode,
+    loader = props.loader,
+    onChange = props.onChange,
+    onNodeClick = props.onNodeClick,
+    onToggle = props.onToggle,
+    onDrop = props.onDrop,
+    onDragOver = props.onDragOver,
+    onDragLeave = props.onDragLeave,
+    onDragStart = props.onDragStart,
+    onDragEnd = props.onDragEnd,
+    List = props.listComponent,
+    actionOnClick = props.actionOnClick;
+  initPlaceElement();
+  var config = useConfig();
+  var element = useRef(null);
+  var content = useRef(null);
+  var dragImage = useRef(null);
+  var _useTreeContext = useTreeContext(),
+    getPath = _useTreeContext.getPath;
+  var _useTreeNode = useTreeNode({
+      id: id,
+      data: data,
+      bindNode: bindNode,
+      loader: loader,
+      onToggle: onToggle,
+      childrenKey: childrenKey,
+      element: element,
+      content: content.current,
+      dragImageSelector: dragImageSelector,
+      dragImageStyle: dragImageStyle
+    }),
+    active = _useTreeNode.active,
+    isLeaf = _useTreeNode.isLeaf,
+    fetching = _useTreeNode.fetching,
+    setFetching = _useTreeNode.setFetching,
+    expanded = _useTreeNode.expanded,
+    setExpanded = _useTreeNode.setExpanded;
+  var children = data[childrenKey];
+  var hasChildren = children && children.length > 0;
+  var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
+  var rootClass = classNames(contentStyle.node, isLeaf() && (util.isString(leafClass) ? leafClass : util.isFunc(leafClass) && leafClass(data)), util.isString(nodeClass) && nodeClass, util.isFunc(nodeClass) && nodeClass(data), _defineProperty({}, contentStyle.leaf, !hasChildren));
+  if (placeElement) {
+    placeElement.className = contentStyle.placement;
+  }
+  var handleFetch = function handleFetch() {};
+  var handleToggle = function handleToggle() {
+    var nextExpanded = !expanded;
+    setExpanded(nextExpanded);
+    if (onToggle) onToggle(id, nextExpanded);
+  };
+  var handleDragOver = function handleDragOver(e) {
+    if (!dragLock) return;
+    var current = getPath(placeInfo.start);
+    var target = getPath(id);
+    if (!current || !target) return;
+    var currentPathStr = current.path.join('/');
+    var targetPathStr = target.path.join('/');
+    if (dragSibling && targetPathStr !== currentPathStr) return;
+    if (dragHoverExpand && !expanded) {
+      onToggle === null || onToggle === void 0 || onToggle(id);
+    }
+    var hover = element.current;
+    var rect = hover.getBoundingClientRect();
+    var clientHeight = e.target.getBoundingClientRect().height || 20;
+    var hoverMiddleY = (rect.bottom - rect.top) / 2;
+    var hoverClientY = e.clientY - rect.top;
+    var position = index;
+    if (innerPlaceElement) {
+      innerPlaceElement.style.height = '0px';
+    }
+    if (placeElement && innerPlaceElement) {
+      if (hoverClientY < hoverMiddleY + clientHeight * 0.2) {
+        hover.parentNode.insertBefore(placeElement, hover);
+        if (hoverClientY > clientHeight * 0.3) {
+          if (!dragSibling) {
+            position = -1;
+            innerPlaceElement.style.height = "".concat(rect.height, "px");
+          } else {
+            position += 1;
+            hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+          }
+        }
+      } else {
+        position += 1;
+        hover.parentNode.insertBefore(placeElement, hover.nextElementSibling);
+      }
+      placeInfo.target = id;
+      // @ts-ignore
+      placeElement.setAttribute('data-position', position);
+    }
+    if (onDragOver) onDragOver(e, data);
+  };
+  var handleDragStart = function handleDragStart(e) {
+    if (dragLock) return;
+    dragLock = true;
+    e.dataTransfer.effectAllowed = 'copyMove';
+    e.dataTransfer.setData('text/plain', id);
+    placeInfo.start = id;
+    var el = document.querySelector(dragImageSelector(data));
+    var dragEl = el || content.current;
+    var rect = dragEl.getBoundingClientRect();
+    dragImage.current = dragEl.cloneNode(true);
+    document.body.appendChild(dragImage.current);
+    dragImage.current.style.position = 'absolute';
+    dragImage.current.style.top = '-1000px';
+    dragImage.current.style.left = '-1000px';
+    dragImage.current.style.width = "".concat(rect.width, "px");
+    dragImage.current.style.background = '#fff';
+    dragImage.current.style.boxShadow = '0 0 5px 0 rgba(0, 0, 0, 0.1)';
+    if (dragImageStyle) {
+      Object.keys(dragImageStyle).forEach(function (k) {
+        var _dragImage$current;
+        var styleKey = k;
+        ((_dragImage$current = dragImage.current) === null || _dragImage$current === void 0 ? void 0 : _dragImage$current.style)[styleKey] = dragImageStyle[styleKey];
+      });
+    }
+    e.dataTransfer.setDragImage(dragImage.current, e.clientX - rect.left, e.clientY - rect.top);
+    setTimeout(function () {
+      element.current.style.display = 'none';
+    }, 0);
+    if (onDragStart) onDragStart(e, data);
+  };
+  var handleDragEnd = function handleDragEnd(e) {
+    element.current.style.display = '';
+    if (!dragLock) return;
+    dragLock = false;
+    if (!placeElement || !placeElement.parentNode) return;
+    if (dragImage.current && dragImage.current.parentNode) dragImage.current.parentNode.removeChild(dragImage.current);
+    var position = parseInt(placeElement.getAttribute('data-position') || '', 10);
+    var target = placeInfo.target;
+    placeElement.parentNode.removeChild(placeElement);
+    if (onDrop && (target !== id || index !== position)) {
+      onDrop(id, target, position);
+    }
+    if (onDragEnd) onDragEnd(e, data);
+  };
+  var handleDragLeave = function handleDragLeave(e) {
+    if (onDragLeave) onDragLeave(e, data);
+  };
+  var getChildrenListProps = function getChildrenListProps() {
+    return {
+      id: id,
+      keygen: keygen,
+      jssStyle: jssStyle,
+      renderItem: renderItem,
+      expandIcons: expandIcons,
+      iconClass: iconClass,
+      leafClass: leafClass,
+      nodeClass: nodeClass,
+      isControlled: isControlled,
+      contentClass: contentClass,
+      parentClickExpand: parentClickExpand,
+      doubleClickExpand: doubleClickExpand,
+      expanded: expanded,
+      line: line,
+      data: children,
+      mode: mode,
+      index: index,
+      loader: loader,
+      inlineNode: inlineNode,
+      highlight: highlight,
+      onDrop: onDrop,
+      onChange: onChange,
+      onToggle: onToggle,
+      onNodeClick: onNodeClick,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      onDragStart: onDragStart,
+      onDragEnd: onDragEnd,
+      bindNode: bindNode,
+      childrenClassName: util.isFunc(childrenClass) ? childrenClass === null || childrenClass === void 0 ? void 0 : childrenClass(data) : childrenClass,
+      childrenKey: childrenKey,
+      childrenClass: childrenClass,
+      dragSibling: dragSibling,
+      dragHoverExpand: dragHoverExpand,
+      dragImageStyle: dragImageStyle,
+      dragImageSelector: dragImageSelector,
+      actionOnClick: actionOnClick
+    };
+  };
+  var getDropProps = function getDropProps() {
+    var dropEvents = {};
+    if (onDrop) {
+      Object.assign(dropEvents, {
+        draggable: true,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragLeave: handleDragLeave
+      });
+    }
+    return dropEvents;
+  };
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getDropProps()), {}, {
+    ref: element,
+    className: rootClass,
+    dir: config.direction,
+    children: [/*#__PURE__*/_jsx(TreeContent, {
+      virtual: false,
+      jssStyle: jssStyle,
+      isControlled: isControlled,
+      id: id,
+      line: line,
+      data: data,
+      mode: mode,
+      contentClass: contentClass,
+      active: active,
+      fetching: fetching,
+      expanded: expanded,
+      keygen: keygen,
+      bindNode: bindNode,
+      bindContent: content,
+      childrenKey: childrenKey,
+      renderItem: renderItem,
+      iconClass: iconClass,
+      leafClass: leafClass,
+      expandIcons: expandIcons,
+      parentClickExpand: parentClickExpand,
+      doubleClickExpand: doubleClickExpand,
+      loader: loader,
+      inlineNode: inlineNode,
+      highlight: highlight,
+      setFetching: setFetching,
+      onChange: onChange,
+      onFetch: handleFetch,
+      onNodeClick: onNodeClick,
+      onDragOver: handleDragOver,
+      onToggle: handleToggle,
+      actionOnClick: actionOnClick
+    }), hasChildren && /*#__PURE__*/createElement(List, getChildrenListProps())]
+  }));
+};
+export default Node;

package/esm/tree/tree-virtual-node.d.ts

@@ -0,0 +1,5 @@
+import { TreeVirtualNodeProps } from './tree-node.type';
+import { KeygenResult } from '@sheinx/hooks';
+declare const VirtualNode: <DataItem, Value extends KeygenResult[]>(props: TreeVirtualNodeProps<DataItem, Value>) => import("react/jsx-runtime").JSX.Element;
+export default VirtualNode;
+//# sourceMappingURL=tree-virtual-node.d.ts.map

package/esm/tree/tree-virtual-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-virtual-node.d.ts","sourceRoot":"","sources":["tree-virtual-node.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;AAKvE,QAAA,MAAM,WAAW,mIA4HhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/tree/tree-virtual-node.js

@@ -0,0 +1,119 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useTreeContext } from "./tree-context";
+import { useRef } from 'react';
+import classNames from 'classnames';
+import TreeVirtualContent from "./tree-content";
+import { useTreeVirtualNode, util } from '@sheinx/hooks';
+import { useConfig } from "../config";
+import { jsx as _jsx } from "react/jsx-runtime";
+var placeElement = null;
+var VirtualNode = function VirtualNode(props) {
+  var jssStyle = props.jssStyle,
+    id = props.id,
+    data = props.data,
+    level = props.level,
+    line = props.line,
+    isControlled = props.isControlled,
+    renderItem = props.renderItem,
+    parentClickExpand = props.parentClickExpand,
+    doubleClickExpand = props.doubleClickExpand,
+    iconClass = props.iconClass,
+    leafClass = props.leafClass,
+    nodeClass = props.nodeClass,
+    contentClass = props.contentClass,
+    expandIcons = props.expandIcons,
+    keygen = props.keygen,
+    mode = props.mode,
+    childrenKey = props.childrenKey,
+    inlineNode = props.inlineNode,
+    highlight = props.highlight,
+    loader = props.loader,
+    onChange = props.onChange,
+    onNodeClick = props.onNodeClick,
+    onToggle = props.onToggle,
+    actionOnClick = props.actionOnClick;
+  var config = useConfig();
+  var datum = useTreeContext();
+  var element = useRef(null);
+  var content = useRef(null);
+  var _useTreeVirtualNode = useTreeVirtualNode({
+      id: id,
+      data: data,
+      datum: datum,
+      bindNode: datum.bindVirtualNode,
+      loader: loader,
+      onToggle: onToggle,
+      childrenKey: childrenKey,
+      element: element,
+      content: content.current
+    }),
+    active = _useTreeVirtualNode.active,
+    isLeaf = _useTreeVirtualNode.isLeaf,
+    fetching = _useTreeVirtualNode.fetching,
+    setFetching = _useTreeVirtualNode.setFetching,
+    expanded = _useTreeVirtualNode.expanded,
+    setExpanded = _useTreeVirtualNode.setExpanded;
+  var children = data[childrenKey];
+  var hasChildren = children && children.length > 0;
+  var contentStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.tree()) || {};
+  var rootClass = classNames(contentStyle.node, isLeaf() && (util.isString(leafClass) ? leafClass : util.isFunc(leafClass) && leafClass(data)), util.isString(nodeClass) && nodeClass, util.isFunc(nodeClass) && nodeClass(data), _defineProperty({}, contentStyle.leaf, !hasChildren));
+  if (placeElement) {
+    placeElement.className = contentStyle.placement;
+  }
+  var handleFetch = function handleFetch() {};
+  var handleToggle = function handleToggle() {
+    var nextExpanded = !expanded;
+    setExpanded(nextExpanded);
+    var status = datum.dataFlatStatusMap.get(id);
+    datum.dataFlatStatusMap.set(id, {
+      active: (status === null || status === void 0 ? void 0 : status.active) || false,
+      fetching: (status === null || status === void 0 ? void 0 : status.fetching) || false,
+      expanded: nextExpanded
+    });
+    if (onToggle) onToggle(id, nextExpanded);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    ref: element,
+    className: rootClass,
+    dir: config.direction,
+    style: {
+      paddingLeft: level * 24
+    },
+    children: /*#__PURE__*/_jsx(TreeVirtualContent, {
+      virtual: true,
+      jssStyle: jssStyle,
+      isControlled: isControlled,
+      id: id,
+      level: level,
+      line: line,
+      data: data,
+      mode: mode,
+      contentClass: contentClass,
+      active: active,
+      fetching: fetching,
+      expanded: expanded,
+      keygen: keygen,
+      bindContent: content,
+      childrenKey: childrenKey,
+      renderItem: renderItem,
+      iconClass: iconClass,
+      leafClass: leafClass,
+      expandIcons: expandIcons,
+      parentClickExpand: parentClickExpand,
+      doubleClickExpand: doubleClickExpand,
+      loader: loader,
+      inlineNode: inlineNode,
+      highlight: highlight,
+      setFetching: setFetching,
+      onChange: onChange,
+      onFetch: handleFetch,
+      onNodeClick: onNodeClick,
+      onToggle: handleToggle,
+      actionOnClick: actionOnClick
+    })
+  });
+};
+export default VirtualNode;

package/esm/tree/tree-virtual.d.ts

@@ -0,0 +1,5 @@
+import { KeygenResult } from '@sheinx/hooks';
+import { VirtualTreeProps } from './tree.type';
+declare const TreeVirtual: <DataItem, Value extends KeygenResult[]>(props: VirtualTreeProps<DataItem, Value>) => import("react/jsx-runtime").JSX.Element;
+export default TreeVirtual;
+//# sourceMappingURL=tree-virtual.d.ts.map

package/esm/tree/tree-virtual.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-virtual.d.ts","sourceRoot":"","sources":["tree-virtual.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAgB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,QAAA,MAAM,WAAW,+HAwFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}