@fle-ui/next 3.0.0-alpha.3 → 3.0.0-beta.1

package/lib/tree/style/index.d.ts

@@ -1,13 +1,45 @@
+/// <reference types="react" />
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../../theme/internal';
-type TreeToken = DerivativeToken & {
+import type { AliasToken, FullToken, GetDefaultToken } from '../../theme/internal';
+import type { CSSUtil } from '../../theme/util/genComponentStyleHook';
+export interface TreeSharedToken {
+    /**
+     * @desc 节点标题高度
+     * @descEN Node title height
+     */
+    titleHeight: number;
+    /**
+     * @desc 节点悬浮态背景色
+     * @descEN Background color of hovered node
+     */
+    nodeHoverBg: string;
+    /**
+     * @desc 节点选中态背景色
+     * @descEN Background color of selected node
+     */
+    nodeSelectedBg: string;
+}
+export interface ComponentToken extends TreeSharedToken {
+    /**
+     * @desc 目录树节点选中文字颜色
+     * @descEN Text color of selected directory node
+     */
+    directoryNodeSelectedColor: string;
+    /**
+     * @desc 目录树节点选中背景色
+     * @descEN Background color of selected directory node
+     */
+    directoryNodeSelectedBg: string;
+}
+type TreeToken = FullToken<'Tree'> & {
     treeCls: string;
     treeNodeCls: string;
-    treeNodePadding: number;
-    treeTitleHeight: number;
+    treeNodePadding: number | string;
 };
 export declare const genBaseStyle: (prefixCls: string, token: TreeToken) => CSSObject;
 export declare const genDirectoryStyle: (token: TreeToken) => CSSObject;
-export declare const genTreeStyle: (prefixCls: string, token: DerivativeToken) => CSSInterpolation;
-declare const _default: (prefixCls: string) => import("../../theme/internal").UseComponentStyleResult;
+export declare const genTreeStyle: (prefixCls: string, token: AliasToken & TreeSharedToken & CSSUtil) => CSSInterpolation;
+export declare const initComponentToken: (token: AliasToken) => TreeSharedToken;
+export declare const prepareComponentToken: GetDefaultToken<'Tree'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string | undefined];
 export default _default;

package/lib/tree/style/index.js

@@ -1,27 +1,19 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.genTreeStyle = exports.genDirectoryStyle = exports.genBaseStyle = exports["default"] = void 0;
-
-var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+exports.prepareComponentToken = exports.initComponentToken = exports.genTreeStyle = exports.genDirectoryStyle = exports.genBaseStyle = exports.default = void 0;
 var _cssinjs = require("@ant-design/cssinjs");
-
-var _motion = require("../../style/motion");
-
 var _style = require("../../checkbox/style");
-
+var _style2 = require("../../style");
+var _motion = require("../../style/motion");
 var _internal = require("../../theme/internal");
-
-var _style2 = require("../../style"); // ============================ Keyframes =============================
-
-
+// ============================ Keyframes =============================
 var treeNodeFX = new _cssinjs.Keyframes('ant-tree-node-fx-do-not-use', {
   '0%': {
     opacity: 0
@@ -29,22 +21,21 @@ var treeNodeFX = new _cssinjs.Keyframes('ant-tree-node-fx-do-not-use', {
   '100%': {
     opacity: 1
   }
-}); // ============================== Switch ==============================
-
+});
+// ============================== Switch ==============================
 var getSwitchStyle = function getSwitchStyle(prefixCls, token) {
-  return (0, _defineProperty2["default"])({}, "." + prefixCls + "-switcher-icon", {
+  return _defineProperty({}, ".".concat(prefixCls, "-switcher-icon"), {
     display: 'inline-block',
     fontSize: 10,
     verticalAlign: 'baseline',
     svg: {
-      transition: "transform " + token.motionDurationSlow
+      transition: "transform ".concat(token.motionDurationSlow)
     }
   });
-}; // =============================== Drop ===============================
-
-
+};
+// =============================== Drop ===============================
 var getDropIndicatorStyle = function getDropIndicatorStyle(prefixCls, token) {
-  return (0, _defineProperty2["default"])({}, "." + prefixCls + "-drop-indicator", {
+  return _defineProperty({}, ".".concat(prefixCls, "-drop-indicator"), {
     position: 'absolute',
     // it should displayed over the following node
     zIndex: 1,
@@ -59,41 +50,38 @@ var getDropIndicatorStyle = function getDropIndicatorStyle(prefixCls, token) {
       width: 8,
       height: 8,
       backgroundColor: 'transparent',
-      border: token.lineWidthBold + "px solid " + token.colorPrimary,
+      border: "".concat((0, _cssinjs.unit)(token.lineWidthBold), " solid ").concat(token.colorPrimary),
       borderRadius: '50%',
       content: '""'
     }
   });
 };
-
 var genBaseStyle = function genBaseStyle(prefixCls, token) {
-  var _ref3, _draggable, _ref7, _ref8, _showLine, _extends2;
-
+  var _$concat2, _draggable, _$concat6, _$concat$concat, _showLine, _Object$assign;
   var treeCls = token.treeCls,
-      treeNodeCls = token.treeNodeCls,
-      treeNodePadding = token.treeNodePadding,
-      treeTitleHeight = token.treeTitleHeight;
-  var treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2;
+    treeNodeCls = token.treeNodeCls,
+    treeNodePadding = token.treeNodePadding,
+    titleHeight = token.titleHeight,
+    nodeSelectedBg = token.nodeSelectedBg,
+    nodeHoverBg = token.nodeHoverBg;
   var treeCheckBoxMarginHorizontal = token.paddingXS;
-  return (0, _defineProperty2["default"])({}, treeCls, (0, _extends3["default"])((0, _extends3["default"])({}, (0, _style2.resetComponent)(token)), (_extends2 = {
+  return _defineProperty({}, treeCls, Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), (_Object$assign = {
     background: token.colorBgContainer,
     borderRadius: token.borderRadius,
-    transition: "background-color " + token.motionDurationSlow,
-    '&&-rtl': (0, _defineProperty2["default"])({}, treeCls + "-switcher", {
-      '&_close': (0, _defineProperty2["default"])({}, treeCls + "-switcher-icon", {
-        svg: {
-          transform: 'rotate(90deg)'
-        }
-      })
-    }),
-    '&-focused:not(:hover):not(&-active-focused)': (0, _extends3["default"])({}, (0, _style2.genFocusOutline)(token))
-  }, (0, _defineProperty2["default"])(_extends2, treeCls + "-list-holder-inner", {
+    transition: "background-color ".concat(token.motionDurationSlow)
+  }, _defineProperty(_Object$assign, "&".concat(treeCls, "-rtl"), _defineProperty({}, "".concat(treeCls, "-switcher"), {
+    '&_close': _defineProperty({}, "".concat(treeCls, "-switcher-icon"), {
+      svg: {
+        transform: 'rotate(90deg)'
+      }
+    })
+  })), _defineProperty(_Object$assign, "&-focused:not(:hover):not(".concat(treeCls, "-active-focused)"), Object.assign({}, (0, _style2.genFocusOutline)(token))), _defineProperty(_Object$assign, "".concat(treeCls, "-list-holder-inner"), {
     alignItems: 'flex-start'
-  }), (0, _defineProperty2["default"])(_extends2, "&" + treeCls + "-block-node", (0, _defineProperty2["default"])({}, treeCls + "-list-holder-inner", (_ref3 = {
+  }), _defineProperty(_Object$assign, "&".concat(treeCls, "-block-node"), _defineProperty({}, "".concat(treeCls, "-list-holder-inner"), (_$concat2 = {
     alignItems: 'stretch'
-  }, (0, _defineProperty2["default"])(_ref3, treeCls + "-node-content-wrapper", {
+  }, _defineProperty(_$concat2, "".concat(treeCls, "-node-content-wrapper"), {
     flex: 'auto'
-  }), (0, _defineProperty2["default"])(_ref3, treeNodeCls + ".dragging", {
+  }), _defineProperty(_$concat2, "".concat(treeNodeCls, ".dragging"), {
     position: 'relative',
     '&:after': {
       position: 'absolute',
@@ -101,7 +89,7 @@ var genBaseStyle = function genBaseStyle(prefixCls, token) {
       insetInlineEnd: 0,
       bottom: treeNodePadding,
       insetInlineStart: 0,
-      border: "1px solid " + token.colorPrimary,
+      border: "1px solid ".concat(token.colorPrimary),
       opacity: 0,
       animationName: treeNodeFX,
       animationDuration: token.motionDurationSlow,
@@ -110,60 +98,62 @@ var genBaseStyle = function genBaseStyle(prefixCls, token) {
       content: '""',
       pointerEvents: 'none'
     }
-  }), _ref3))), (0, _defineProperty2["default"])(_extends2, "" + treeNodeCls, (_ref7 = {
+  }), _$concat2))), _defineProperty(_Object$assign, "".concat(treeNodeCls), (_$concat6 = {
     display: 'flex',
     alignItems: 'flex-start',
-    padding: "0 0 " + treeNodePadding + "px 0",
+    padding: "0 0 ".concat((0, _cssinjs.unit)(treeNodePadding), " 0"),
     outline: 'none',
     '&-rtl': {
       direction: 'rtl'
     },
     // Disabled
-    '&-disabled': (0, _defineProperty2["default"])({}, treeCls + "-node-content-wrapper", {
+    '&-disabled': _defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), {
       color: token.colorTextDisabled,
       cursor: 'not-allowed',
       '&:hover': {
         background: 'transparent'
       }
     })
-  }, (0, _defineProperty2["default"])(_ref7, "&-active " + treeCls + "-node-content-wrapper", (0, _extends3["default"])({}, (0, _style2.genFocusOutline)(token))), (0, _defineProperty2["default"])(_ref7, "&:not(&-disabled).filter-node " + treeCls + "-title", {
+  }, _defineProperty(_$concat6, "&-active ".concat(treeCls, "-node-content-wrapper"), Object.assign({}, (0, _style2.genFocusOutline)(token))), _defineProperty(_$concat6, "&:not(".concat(treeNodeCls, "-disabled).filter-node ").concat(treeCls, "-title"), {
     color: 'inherit',
     fontWeight: 500
-  }), (0, _defineProperty2["default"])(_ref7, '&-draggable', (_draggable = {}, (0, _defineProperty2["default"])(_draggable, treeCls + "-draggable-icon", (0, _defineProperty2["default"])({
-    width: treeTitleHeight,
-    lineHeight: treeTitleHeight + "px",
+  }), _defineProperty(_$concat6, '&-draggable', (_draggable = {}, _defineProperty(_draggable, "".concat(treeCls, "-draggable-icon"), _defineProperty({
+    // https://github.com/ant-design/ant-design/issues/41915
+    flexShrink: 0,
+    width: titleHeight,
+    lineHeight: "".concat((0, _cssinjs.unit)(titleHeight)),
     textAlign: 'center',
     visibility: 'visible',
     opacity: 0.2,
-    transition: "opacity " + token.motionDurationSlow
-  }, treeNodeCls + ":hover &", {
+    transition: "opacity ".concat(token.motionDurationSlow)
+  }, "".concat(treeNodeCls, ":hover &"), {
     opacity: 0.45
-  })), (0, _defineProperty2["default"])(_draggable, "&" + treeNodeCls + "-disabled", (0, _defineProperty2["default"])({}, treeCls + "-draggable-icon", {
+  })), _defineProperty(_draggable, "&".concat(treeNodeCls, "-disabled"), _defineProperty({}, "".concat(treeCls, "-draggable-icon"), {
     visibility: 'hidden'
-  })), _draggable)), _ref7)), (0, _defineProperty2["default"])(_extends2, treeCls + "-indent", {
+  })), _draggable)), _$concat6)), _defineProperty(_Object$assign, "".concat(treeCls, "-indent"), {
     alignSelf: 'stretch',
     whiteSpace: 'nowrap',
     userSelect: 'none',
     '&-unit': {
       display: 'inline-block',
-      width: treeTitleHeight
+      width: titleHeight
     }
-  }), (0, _defineProperty2["default"])(_extends2, treeCls + "-draggable-icon", {
+  }), _defineProperty(_Object$assign, "".concat(treeCls, "-draggable-icon"), {
     visibility: 'hidden'
-  }), (0, _defineProperty2["default"])(_extends2, treeCls + "-switcher", (0, _extends3["default"])((0, _extends3["default"])({}, getSwitchStyle(prefixCls, token)), {
+  }), _defineProperty(_Object$assign, "".concat(treeCls, "-switcher"), Object.assign(Object.assign({}, getSwitchStyle(prefixCls, token)), {
     position: 'relative',
     flex: 'none',
     alignSelf: 'stretch',
-    width: treeTitleHeight,
+    width: titleHeight,
     margin: 0,
-    lineHeight: treeTitleHeight + "px",
+    lineHeight: "".concat((0, _cssinjs.unit)(titleHeight)),
     textAlign: 'center',
     cursor: 'pointer',
     userSelect: 'none',
     '&-noop': {
       cursor: 'default'
     },
-    '&_close': (0, _defineProperty2["default"])({}, treeCls + "-switcher-icon", {
+    '&_close': _defineProperty({}, "".concat(treeCls, "-switcher-icon"), {
       svg: {
         transform: 'rotate(-90deg)'
       }
@@ -181,74 +171,71 @@ var genBaseStyle = function genBaseStyle(prefixCls, token) {
       '&:before': {
         position: 'absolute',
         top: 0,
-        insetInlineEnd: treeTitleHeight / 2,
-        bottom: -treeNodePadding,
+        insetInlineEnd: token.calc(titleHeight).div(2).equal(),
+        bottom: token.calc(treeNodePadding).mul(-1).equal(),
         marginInlineStart: -1,
-        borderInlineEnd: "1px solid " + token.colorBorder,
+        borderInlineEnd: "1px solid ".concat(token.colorBorder),
         content: '""'
       },
       '&:after': {
         position: 'absolute',
-        width: treeTitleHeight / 2 * 0.8,
-        height: treeTitleHeight / 2,
-        borderBottom: "1px solid " + token.colorBorder,
+        width: token.calc(token.calc(titleHeight).div(2).equal()).mul(0.8).equal(),
+        height: token.calc(titleHeight).div(2).equal(),
+        borderBottom: "1px solid ".concat(token.colorBorder),
         content: '""'
       }
     }
-  })), (0, _defineProperty2["default"])(_extends2, treeCls + "-checkbox", {
+  })), _defineProperty(_Object$assign, "".concat(treeCls, "-checkbox"), {
     top: 'initial',
     marginInlineEnd: treeCheckBoxMarginHorizontal,
-    marginBlockStart: treeCheckBoxMarginVertical
-  }), (0, _defineProperty2["default"])(_extends2, treeCls + "-node-content-wrapper, " + treeCls + "-checkbox + span", {
-    paddingInline: 0
-  }), (0, _defineProperty2["default"])(_extends2, treeCls + "-node-content-wrapper", (_ref8 = {
-    display: 'flex',
-    flexWrap: 'nowrap',
+    alignSelf: 'flex-start',
+    marginTop: token.marginXXS
+  }), _defineProperty(_Object$assign, "".concat(treeCls, "-node-content-wrapper, ").concat(treeCls, "-checkbox + span"), (_$concat$concat = {
     position: 'relative',
     zIndex: 'auto',
-    minHeight: treeTitleHeight,
+    minHeight: titleHeight,
     margin: 0,
-    padding: "0 " + token.paddingXS / 2 + "px",
+    padding: "0 ".concat((0, _cssinjs.unit)(token.calc(token.paddingXS).div(2).equal())),
     color: 'inherit',
-    lineHeight: treeTitleHeight + "px",
+    lineHeight: "".concat((0, _cssinjs.unit)(titleHeight)),
     background: 'transparent',
     borderRadius: token.borderRadius,
     cursor: 'pointer',
-    transition: "all " + token.motionDurationMid + ", border 0s, line-height 0s, box-shadow 0s",
+    transition: "all ".concat(token.motionDurationMid, ", border 0s, line-height 0s, box-shadow 0s"),
     '&:hover': {
-      backgroundColor: token.controlItemBgHover
+      backgroundColor: nodeHoverBg
     }
-  }, (0, _defineProperty2["default"])(_ref8, "&" + treeCls + "-node-selected", {
-    backgroundColor: token.controlOutline
-  }), (0, _defineProperty2["default"])(_ref8, treeCls + "-iconEle", {
+  }, _defineProperty(_$concat$concat, "&".concat(treeCls, "-node-selected"), {
+    backgroundColor: nodeSelectedBg
+  }), _defineProperty(_$concat$concat, "".concat(treeCls, "-iconEle"), {
     display: 'inline-block',
-    width: treeTitleHeight,
-    height: treeTitleHeight,
-    lineHeight: treeTitleHeight + "px",
+    width: titleHeight,
+    height: titleHeight,
+    lineHeight: "".concat((0, _cssinjs.unit)(titleHeight)),
     textAlign: 'center',
     verticalAlign: 'top',
     '&:empty': {
       display: 'none'
     }
-  }), _ref8)), (0, _defineProperty2["default"])(_extends2, treeCls + "-unselectable " + treeCls + "-node-content-wrapper:hover", {
+  }), _$concat$concat)), _defineProperty(_Object$assign, "".concat(treeCls, "-unselectable ").concat(treeCls, "-node-content-wrapper:hover"), {
     backgroundColor: 'transparent'
-  }), (0, _defineProperty2["default"])(_extends2, treeCls + "-node-content-wrapper", (0, _extends3["default"])({
-    lineHeight: treeTitleHeight + "px",
+  }), _defineProperty(_Object$assign, "".concat(treeCls, "-node-content-wrapper"), Object.assign({
+    lineHeight: "".concat((0, _cssinjs.unit)(titleHeight)),
     userSelect: 'none'
-  }, getDropIndicatorStyle(prefixCls, token))), (0, _defineProperty2["default"])(_extends2, treeNodeCls + ".drop-container", {
+  }, getDropIndicatorStyle(prefixCls, token))), _defineProperty(_Object$assign, "".concat(treeNodeCls, ".drop-container"), {
     '> [draggable]': {
-      boxShadow: "0 0 0 2px " + token.colorPrimary
+      boxShadow: "0 0 0 2px ".concat(token.colorPrimary)
     }
-  }), (0, _defineProperty2["default"])(_extends2, '&-show-line', (_showLine = {}, (0, _defineProperty2["default"])(_showLine, treeCls + "-indent", {
+  }), _defineProperty(_Object$assign, '&-show-line', (_showLine = {}, _defineProperty(_showLine, "".concat(treeCls, "-indent"), {
     '&-unit': {
       position: 'relative',
       height: '100%',
       '&:before': {
         position: 'absolute',
         top: 0,
-        insetInlineEnd: treeTitleHeight / 2,
-        bottom: -treeNodePadding,
-        borderInlineEnd: "1px solid " + token.colorBorder,
+        insetInlineEnd: token.calc(titleHeight).div(2).equal(),
+        bottom: token.calc(treeNodePadding).mul(-1).equal(),
+        borderInlineEnd: "1px solid ".concat(token.colorBorder),
         content: '""'
       },
       '&-end': {
@@ -257,33 +244,32 @@ var genBaseStyle = function genBaseStyle(prefixCls, token) {
         }
       }
     }
-  }), (0, _defineProperty2["default"])(_showLine, treeCls + "-switcher", {
-    background: token.colorBgContainer,
+  }), _defineProperty(_showLine, "".concat(treeCls, "-switcher"), {
+    background: 'transparent',
     '&-line-icon': {
       // https://github.com/ant-design/ant-design/issues/32813
       verticalAlign: '-0.15em'
     }
-  }), _showLine)), (0, _defineProperty2["default"])(_extends2, treeNodeCls + "-leaf-last", (0, _defineProperty2["default"])({}, treeCls + "-switcher", {
+  }), _showLine)), _defineProperty(_Object$assign, "".concat(treeNodeCls, "-leaf-last"), _defineProperty({}, "".concat(treeCls, "-switcher"), {
     '&-leaf-line': {
       '&:before': {
         top: 'auto !important',
         bottom: 'auto !important',
-        height: treeTitleHeight / 2 + "px !important"
+        height: "".concat((0, _cssinjs.unit)(token.calc(titleHeight).div(2).equal()), " !important")
       }
     }
-  })), _extends2)));
-}; // ============================ Directory =============================
-
-
+  })), _Object$assign)));
+};
+// ============================ Directory =============================
 exports.genBaseStyle = genBaseStyle;
-
 var genDirectoryStyle = function genDirectoryStyle(token) {
   var _selected, _treeNodeCls;
-
   var treeCls = token.treeCls,
-      treeNodeCls = token.treeNodeCls,
-      treeNodePadding = token.treeNodePadding;
-  return (0, _defineProperty2["default"])({}, "" + treeCls + treeCls + "-directory", (0, _defineProperty2["default"])({}, treeNodeCls, (_treeNodeCls = {
+    treeNodeCls = token.treeNodeCls,
+    treeNodePadding = token.treeNodePadding,
+    directoryNodeSelectedBg = token.directoryNodeSelectedBg,
+    directoryNodeSelectedColor = token.directoryNodeSelectedColor;
+  return _defineProperty({}, "".concat(treeCls).concat(treeCls, "-directory"), _defineProperty({}, treeNodeCls, (_treeNodeCls = {
     position: 'relative',
     // Hover color
     '&:before': {
@@ -292,7 +278,7 @@ var genDirectoryStyle = function genDirectoryStyle(token) {
       insetInlineEnd: 0,
       bottom: treeNodePadding,
       insetInlineStart: 0,
-      transition: "background-color " + token.motionDurationMid,
+      transition: "background-color ".concat(token.motionDurationMid),
       content: '""',
       pointerEvents: 'none'
     },
@@ -305,52 +291,63 @@ var genDirectoryStyle = function genDirectoryStyle(token) {
     '> *': {
       zIndex: 1
     }
-  }, (0, _defineProperty2["default"])(_treeNodeCls, treeCls + "-switcher", {
-    transition: "color " + token.motionDurationMid
-  }), (0, _defineProperty2["default"])(_treeNodeCls, treeCls + "-node-content-wrapper", (0, _defineProperty2["default"])({
+  }, _defineProperty(_treeNodeCls, "".concat(treeCls, "-switcher"), {
+    transition: "color ".concat(token.motionDurationMid)
+  }), _defineProperty(_treeNodeCls, "".concat(treeCls, "-node-content-wrapper"), _defineProperty({
     borderRadius: 0,
     userSelect: 'none',
     '&:hover': {
       background: 'transparent'
     }
-  }, "&" + treeCls + "-node-selected", {
-    color: token.colorTextLightSolid,
+  }, "&".concat(treeCls, "-node-selected"), {
+    color: directoryNodeSelectedColor,
     background: 'transparent'
-  })), (0, _defineProperty2["default"])(_treeNodeCls, '&-selected', (_selected = {}, (0, _defineProperty2["default"])(_selected, "\n            &:hover::before,\n            &::before\n          ", {
-    background: token.colorPrimary
-  }), (0, _defineProperty2["default"])(_selected, treeCls + "-switcher", {
-    color: token.colorTextLightSolid
-  }), (0, _defineProperty2["default"])(_selected, treeCls + "-node-content-wrapper", {
-    color: token.colorTextLightSolid,
+  })), _defineProperty(_treeNodeCls, '&-selected', (_selected = {}, _defineProperty(_selected, "\n            &:hover::before,\n            &::before\n          ", {
+    background: directoryNodeSelectedBg
+  }), _defineProperty(_selected, "".concat(treeCls, "-switcher"), {
+    color: directoryNodeSelectedColor
+  }), _defineProperty(_selected, "".concat(treeCls, "-node-content-wrapper"), {
+    color: directoryNodeSelectedColor,
     background: 'transparent'
   }), _selected)), _treeNodeCls)));
-}; // ============================== Merged ==============================
-
-
+};
+// ============================== Merged ==============================
 exports.genDirectoryStyle = genDirectoryStyle;
-
 var genTreeStyle = function genTreeStyle(prefixCls, token) {
-  var treeCls = "." + prefixCls;
-  var treeNodeCls = treeCls + "-treenode";
-  var treeNodePadding = token.paddingXS / 2;
-  var treeTitleHeight = token.controlHeightSM;
+  var treeCls = ".".concat(prefixCls);
+  var treeNodeCls = "".concat(treeCls, "-treenode");
+  var treeNodePadding = token.calc(token.paddingXS).div(2).equal();
   var treeToken = (0, _internal.mergeToken)(token, {
     treeCls: treeCls,
     treeNodeCls: treeNodeCls,
-    treeNodePadding: treeNodePadding,
-    treeTitleHeight: treeTitleHeight
+    treeNodePadding: treeNodePadding
   });
-  return [// Basic
-  genBaseStyle(prefixCls, treeToken), // Directory
+  return [
+  // Basic
+  genBaseStyle(prefixCls, treeToken),
+  // Directory
   genDirectoryStyle(treeToken)];
-}; // ============================== Export ==============================
-
-
+};
 exports.genTreeStyle = genTreeStyle;
-
-var _default = (0, _internal.genComponentStyleHook)('Tree', function (token, _ref14) {
-  var prefixCls = _ref14.prefixCls;
-  return [(0, _defineProperty2["default"])({}, token.componentCls, (0, _style.getStyle)(prefixCls + "-checkbox", token)), genTreeStyle(prefixCls, token), (0, _motion.genCollapseMotion)(token)];
-});
-
-exports["default"] = _default;
+var initComponentToken = function initComponentToken(token) {
+  var controlHeightSM = token.controlHeightSM;
+  return {
+    titleHeight: controlHeightSM,
+    nodeHoverBg: token.controlItemBgHover,
+    nodeSelectedBg: token.controlItemBgActive
+  };
+};
+exports.initComponentToken = initComponentToken;
+var prepareComponentToken = function prepareComponentToken(token) {
+  var colorTextLightSolid = token.colorTextLightSolid,
+    colorPrimary = token.colorPrimary;
+  return Object.assign(Object.assign({}, initComponentToken(token)), {
+    directoryNodeSelectedColor: colorTextLightSolid,
+    directoryNodeSelectedBg: colorPrimary
+  });
+};
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Tree', function (token, _ref) {
+  var prefixCls = _ref.prefixCls;
+  return [_defineProperty({}, token.componentCls, (0, _style.getStyle)("".concat(prefixCls, "-checkbox"), token)), genTreeStyle(prefixCls, token), (0, _motion.genCollapseMotion)(token)];
+}, prepareComponentToken);

package/lib/tree/utils/dictUtil.d.ts

@@ -1,9 +1,13 @@
 import type { DataNode, Key } from 'rc-tree/lib/interface';
+import type { TreeProps } from '../Tree';
+type FieldNames = TreeProps['fieldNames'];
 /** 计算选中范围，只考虑expanded情况以优化性能 */
-export declare function calcRangeKeys({ treeData, expandedKeys, startKey, endKey, }: {
+export declare function calcRangeKeys({ treeData, expandedKeys, startKey, endKey, fieldNames, }: {
     treeData: DataNode[];
     expandedKeys: Key[];
     startKey?: Key;
     endKey?: Key;
+    fieldNames?: FieldNames;
 }): Key[];
-export declare function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[]): DataNode[];
+export declare function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[], fieldNames?: FieldNames): DataNode[];
+export {};