@chaoswise/ui 3.0.22 → 3.1.0

package/lib/Antd5/tree/style/directory.js

@@ -0,0 +1,39 @@
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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); }
+// ============================ Directory =============================
+export var genDirectoryStyle = function genDirectoryStyle(_ref) {
+  var treeCls = _ref.treeCls,
+    treeNodeCls = _ref.treeNodeCls,
+    directoryNodeSelectedBg = _ref.directoryNodeSelectedBg,
+    directoryNodeSelectedColor = _ref.directoryNodeSelectedColor,
+    motionDurationMid = _ref.motionDurationMid,
+    borderRadius = _ref.borderRadius,
+    controlItemBgHover = _ref.controlItemBgHover;
+  return _defineProperty({}, "".concat(treeCls).concat(treeCls, "-directory ").concat(treeNodeCls), _defineProperty(_defineProperty(_defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: 'static'
+  }, "> *:not(".concat(treeCls, "-drop-indicator)"), {
+    position: 'relative'
+  }), '&:hover', {
+    background: 'transparent'
+  }), '&:before', {
+    position: 'absolute',
+    inset: 0,
+    transition: "background-color ".concat(motionDurationMid),
+    content: '""',
+    borderRadius: borderRadius
+  }), '&:hover:before', {
+    background: controlItemBgHover
+  })), "".concat(treeCls, "-switcher, ").concat(treeCls, "-checkbox, ").concat(treeCls, "-draggable-icon"), {
+    zIndex: 1
+  }), '&-selected', _defineProperty(_defineProperty({}, "".concat(treeCls, "-switcher, ").concat(treeCls, "-draggable-icon"), {
+    color: directoryNodeSelectedColor
+  }), "".concat(treeCls, "-node-content-wrapper"), {
+    color: directoryNodeSelectedColor,
+    background: 'transparent',
+    '&:before, &:hover:before': {
+      background: directoryNodeSelectedBg
+    }
+  })));
+};

package/lib/Antd5/tree/style/index.js

@@ -9,6 +9,7 @@ import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { genFocusOutline, resetComponent } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
 import { genStyleHooks, mergeToken } from '../../theme/internal';
+import { genDirectoryStyle } from './directory';
 // ============================ Keyframes =============================
 var treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
   '0%': {
@@ -53,115 +54,127 @@ var getDropIndicatorStyle = function getDropIndicatorStyle(prefixCls, token) {
   });
 };
 export var genBaseStyle = function genBaseStyle(prefixCls, token) {
-  var _objectSpread3;
+  var _objectSpread4;
   var treeCls = token.treeCls,
     treeNodeCls = token.treeNodeCls,
     treeNodePadding = token.treeNodePadding,
     titleHeight = token.titleHeight,
+    indentSize = token.indentSize,
     nodeSelectedBg = token.nodeSelectedBg,
-    nodeHoverBg = token.nodeHoverBg;
-  var treeCheckBoxMarginHorizontal = token.paddingXS;
-  return _defineProperty({}, treeCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, (_objectSpread3 = {
+    nodeHoverBg = token.nodeHoverBg,
+    colorTextQuaternary = token.colorTextQuaternary;
+  return _defineProperty({}, treeCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, (_objectSpread4 = {
     background: token.colorBgContainer,
     borderRadius: token.borderRadius,
-    transition: "background-color ".concat(token.motionDurationSlow)
-  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread3, "&".concat(treeCls, "-rtl"), _defineProperty({}, "".concat(treeCls, "-switcher"), {
-    '&_close': _defineProperty({}, "".concat(treeCls, "-switcher-icon"), {
-      svg: {
-        transform: 'rotate(90deg)'
-      }
-    })
-  })), "&-focused:not(:hover):not(".concat(treeCls, "-active-focused)"), _objectSpread({}, genFocusOutline(token))), "".concat(treeCls, "-list-holder-inner"), {
+    transition: "background-color ".concat(token.motionDurationSlow),
+    '&-rtl': {
+      direction: 'rtl'
+    }
+  }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread4, "&".concat(treeCls, "-rtl ").concat(treeCls, "-switcher_close ").concat(treeCls, "-switcher-icon svg"), {
+    transform: 'rotate(90deg)'
+  }), "&-focused:not(:hover):not(".concat(treeCls, "-active-focused)"), _objectSpread({}, genFocusOutline(token))), "".concat(treeCls, "-list-holder-inner"), {
     alignItems: 'flex-start'
   }), "&".concat(treeCls, "-block-node"), _defineProperty({}, "".concat(treeCls, "-list-holder-inner"), _defineProperty(_defineProperty({
     alignItems: 'stretch'
   }, "".concat(treeCls, "-node-content-wrapper"), {
     flex: 'auto'
-  }), "".concat(treeNodeCls, ".dragging"), {
+  }), "".concat(treeNodeCls, ".dragging:after"), {
+    position: 'absolute',
+    inset: 0,
+    border: "1px solid ".concat(token.colorPrimary),
+    opacity: 0,
+    animationName: treeNodeFX,
+    animationDuration: token.motionDurationSlow,
+    animationPlayState: 'running',
+    animationFillMode: 'forwards',
+    content: '""',
+    pointerEvents: 'none',
+    borderRadius: token.borderRadius
+  }))), treeNodeCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    alignItems: 'flex-start',
+    marginBottom: treeNodePadding,
+    lineHeight: unit(titleHeight),
     position: 'relative',
-    '&:after': {
+    // 非常重要，避免 drop-indicator 在拖拽过程中闪烁
+    '&:before': {
+      content: '""',
       position: 'absolute',
-      top: 0,
-      insetInlineEnd: 0,
-      bottom: treeNodePadding,
+      zIndex: 1,
       insetInlineStart: 0,
-      border: "1px solid ".concat(token.colorPrimary),
-      opacity: 0,
-      animationName: treeNodeFX,
-      animationDuration: token.motionDurationSlow,
-      animationPlayState: 'running',
-      animationFillMode: 'forwards',
-      content: '""',
-      pointerEvents: 'none'
+      width: '100%',
+      top: '100%',
+      height: treeNodePadding
     }
-  }))), "".concat(treeNodeCls), _defineProperty(_defineProperty(_defineProperty({
-    display: 'flex',
-    alignItems: 'flex-start',
-    padding: "0 0 ".concat(unit(treeNodePadding), " 0"),
-    outline: 'none',
-    '&-rtl': {
-      direction: 'rtl'
-    },
-    // Disabled
-    '&-disabled': _defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), {
-      color: token.colorTextDisabled,
-      cursor: 'not-allowed',
-      '&:hover': {
-        background: 'transparent'
-      }
-    })
-  }, "&-active ".concat(treeCls, "-node-content-wrapper"), {
-    background: token.colorPrimaryBg
+  }, "&-disabled ".concat(treeCls, "-node-content-wrapper"), {
+    color: token.colorTextDisabled,
+    cursor: 'not-allowed',
+    '&:hover': {
+      background: 'transparent'
+    }
+  }), "&:not(".concat(treeNodeCls, "-disabled)"), _defineProperty({}, "".concat(treeCls, "-node-content-wrapper"), {
+    '&:hover': {
+      color: token.nodeHoverColor
+    }
+  })), "&-active ".concat(treeCls, "-node-content-wrapper"), {
+    background: token.controlItemBgHover
   }), "&:not(".concat(treeNodeCls, "-disabled).filter-node ").concat(treeCls, "-title"), {
-    color: 'inherit',
+    color: token.colorPrimary,
     fontWeight: 500
   }), '&-draggable', _defineProperty(_defineProperty({
     cursor: 'grab'
-  }, "".concat(treeCls, "-draggable-icon"), _defineProperty({
+  }, "".concat(treeCls, "-draggable-icon"), {
     // https://github.com/ant-design/ant-design/issues/41915
     flexShrink: 0,
     width: titleHeight,
-    lineHeight: "".concat(unit(titleHeight)),
     textAlign: 'center',
     visibility: 'visible',
-    opacity: 0.2,
-    transition: "opacity ".concat(token.motionDurationSlow)
-  }, "".concat(treeNodeCls, ":hover &"), {
-    opacity: 0.45
-  })), "&".concat(treeNodeCls, "-disabled"), _defineProperty({}, "".concat(treeCls, "-draggable-icon"), {
+    color: colorTextQuaternary
+  }), "&".concat(treeNodeCls, "-disabled ").concat(treeCls, "-draggable-icon"), {
     visibility: 'hidden'
-  })))), "".concat(treeCls, "-indent"), {
+  }))), "".concat(treeCls, "-indent"), {
     alignSelf: 'stretch',
     whiteSpace: 'nowrap',
     userSelect: 'none',
     '&-unit': {
       display: 'inline-block',
-      width: titleHeight
+      width: indentSize
     }
   }), "".concat(treeCls, "-draggable-icon"), {
     visibility: 'hidden'
+  }), "".concat(treeCls, "-switcher, ").concat(treeCls, "-checkbox"), {
+    marginInlineEnd: token.calc(token.calc(titleHeight).sub(token.controlInteractiveSize)).div(2).equal()
   }), "".concat(treeCls, "-switcher"), _objectSpread(_objectSpread({}, getSwitchStyle(prefixCls, token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     flex: 'none',
     alignSelf: 'stretch',
     width: titleHeight,
-    margin: 0,
-    lineHeight: "".concat(unit(titleHeight)),
     textAlign: 'center',
     cursor: 'pointer',
     userSelect: 'none',
     transition: "all ".concat(token.motionDurationSlow),
-    borderRadius: token.borderRadius,
     '&-noop': {
       cursor: 'unset'
+    },
+    '&:before': {
+      pointerEvents: 'none',
+      content: '""',
+      width: titleHeight,
+      height: titleHeight,
+      position: 'absolute',
+      left: {
+        _skip_check_: true,
+        value: 0
+      },
+      top: 0,
+      borderRadius: token.borderRadius,
+      transition: "all ".concat(token.motionDurationSlow)
     }
-  }, "&:not(".concat(treeCls, "-switcher-noop):hover"), {
+  }, "&:not(".concat(treeCls, "-switcher-noop):hover:before"), {
     backgroundColor: token.colorBgTextHover
-  }), '&_close', _defineProperty({}, "".concat(treeCls, "-switcher-icon"), {
-    svg: {
-      transform: 'rotate(-90deg)'
-    }
-  })), '&-loading-icon', {
+  }), "&_close ".concat(treeCls, "-switcher-icon svg"), {
+    transform: 'rotate(-90deg)'
+  }), '&-loading-icon', {
     color: token.colorPrimary
   }), '&-leaf-line', {
     position: 'relative',
@@ -186,128 +199,59 @@ export var genBaseStyle = function genBaseStyle(prefixCls, token) {
       borderBottom: "1px solid ".concat(token.colorBorder),
       content: '""'
     }
-  }))), "".concat(treeCls, "-checkbox"), {
-    top: 'initial',
-    marginInlineEnd: treeCheckBoxMarginHorizontal,
-    alignSelf: 'flex-start',
-    marginTop: token.marginXXS
-  }), "".concat(treeCls, "-node-content-wrapper, ").concat(treeCls, "-checkbox + span"), _defineProperty(_defineProperty({
+  }))), "".concat(treeCls, "-node-content-wrapper"), _objectSpread(_objectSpread({
     position: 'relative',
-    zIndex: 'auto',
     minHeight: titleHeight,
-    margin: 0,
-    padding: "0 ".concat(unit(token.calc(token.paddingXS).div(2).equal())),
-    color: 'inherit',
-    lineHeight: "".concat(unit(titleHeight)),
+    paddingBlock: 0,
+    paddingInline: token.paddingXS,
     background: 'transparent',
     borderRadius: token.borderRadius,
     cursor: 'pointer',
-    transition: "all ".concat(token.motionDurationMid, ", border 0s, line-height 0s, box-shadow 0s"),
+    transition: "all ".concat(token.motionDurationMid, ", border 0s, line-height 0s, box-shadow 0s")
+  }, getDropIndicatorStyle(prefixCls, token)), {}, _defineProperty(_defineProperty({
     '&:hover': {
       backgroundColor: nodeHoverBg
     }
   }, "&".concat(treeCls, "-node-selected"), {
+    color: token.nodeSelectedColor,
     backgroundColor: nodeSelectedBg
   }), "".concat(treeCls, "-iconEle"), {
     display: 'inline-block',
     width: titleHeight,
     height: titleHeight,
-    lineHeight: "".concat(unit(titleHeight)),
     textAlign: 'center',
     verticalAlign: 'top',
     '&:empty': {
       display: 'none'
     }
-  })), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread3, "".concat(treeCls, "-unselectable ").concat(treeCls, "-node-content-wrapper:hover"), {
+  }))), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_objectSpread4, "".concat(treeCls, "-unselectable ").concat(treeCls, "-node-content-wrapper:hover"), {
     backgroundColor: 'transparent'
-  }), "".concat(treeCls, "-node-content-wrapper"), _objectSpread({
-    lineHeight: "".concat(unit(titleHeight)),
-    userSelect: 'none'
-  }, getDropIndicatorStyle(prefixCls, token))), "".concat(treeNodeCls, ".drop-container"), {
-    '> [draggable]': {
-      boxShadow: "0 0 0 2px ".concat(token.colorPrimary)
-    }
-  }), '&-show-line', _defineProperty(_defineProperty({}, "".concat(treeCls, "-indent"), {
-    '&-unit': {
-      position: 'relative',
-      height: '100%',
-      '&:before': {
-        position: 'absolute',
-        top: 0,
-        insetInlineEnd: token.calc(titleHeight).div(2).equal(),
-        bottom: token.calc(treeNodePadding).mul(-1).equal(),
-        borderInlineEnd: "1px solid ".concat(token.colorBorder),
-        content: '""'
-      },
-      '&-end': {
-        '&:before': {
-          display: 'none'
-        }
-      }
-    }
-  }), "".concat(treeCls, "-switcher"), {
-    background: 'transparent',
-    '&-line-icon': {
-      // https://github.com/ant-design/ant-design/issues/32813
-      verticalAlign: '-0.15em'
-    }
-  })), "".concat(treeNodeCls, "-leaf-last"), _defineProperty({}, "".concat(treeCls, "-switcher"), {
-    '&-leaf-line': {
-      '&:before': {
-        top: 'auto !important',
-        bottom: 'auto !important',
-        height: "".concat(unit(token.calc(titleHeight).div(2).equal()), " !important")
-      }
-    }
-  })))));
-};
-// ============================ Directory =============================
-export var genDirectoryStyle = function genDirectoryStyle(token) {
-  var treeCls = token.treeCls,
-    treeNodeCls = token.treeNodeCls,
-    treeNodePadding = token.treeNodePadding,
-    directoryNodeSelectedBg = token.directoryNodeSelectedBg,
-    directoryNodeSelectedColor = token.directoryNodeSelectedColor;
-  return _defineProperty({}, "".concat(treeCls).concat(treeCls, "-directory"), _defineProperty({}, treeNodeCls, _defineProperty(_defineProperty(_defineProperty({
+  }), "".concat(treeNodeCls, ".drop-container > [draggable]"), {
+    boxShadow: "0 0 0 2px ".concat(token.colorPrimary)
+  }), '&-show-line', _defineProperty(_defineProperty({}, "".concat(treeCls, "-indent-unit"), {
     position: 'relative',
-    // Hover color
+    height: '100%',
     '&:before': {
       position: 'absolute',
       top: 0,
-      insetInlineEnd: 0,
-      bottom: treeNodePadding,
-      insetInlineStart: 0,
-      transition: "background-color ".concat(token.motionDurationMid),
-      content: '""',
-      pointerEvents: 'none'
-    },
-    '&:hover': {
-      '&:before': {
-        background: token.colorPrimaryBg
-      }
+      insetInlineEnd: token.calc(titleHeight).div(2).equal(),
+      bottom: token.calc(treeNodePadding).mul(-1).equal(),
+      borderInlineEnd: "1px solid ".concat(token.colorBorder),
+      content: '""'
     },
-    // Elements
-    '> *': {
-      zIndex: 1
-    }
-  }, "".concat(treeCls, "-switcher"), {
-    transition: "color ".concat(token.motionDurationMid)
-  }), "".concat(treeCls, "-node-content-wrapper"), _defineProperty({
-    borderRadius: 0,
-    userSelect: 'none',
-    '&:hover': {
-      background: 'transparent'
+    '&-end:before': {
+      display: 'none'
     }
-  }, "&".concat(treeCls, "-node-selected"), {
-    color: directoryNodeSelectedColor,
-    background: 'transparent'
-  })), '&-selected', _defineProperty(_defineProperty(_defineProperty({}, "\n            &:hover::before,\n            &::before\n          ", {
-    background: directoryNodeSelectedBg
   }), "".concat(treeCls, "-switcher"), {
-    color: directoryNodeSelectedColor
-  }), "".concat(treeCls, "-node-content-wrapper"), {
-    color: directoryNodeSelectedColor,
-    background: 'transparent'
+    background: 'transparent',
+    '&-line-icon': {
+      // https://github.com/ant-design/ant-design/issues/32813
+      verticalAlign: '-0.15em'
+    }
+  })), "".concat(treeNodeCls, "-leaf-last ").concat(treeCls, "-switcher-leaf-line:before"), {
+    top: 'auto !important',
+    bottom: 'auto !important',
+    height: "".concat(unit(token.calc(titleHeight).div(2).equal()), " !important")
   }))));
 };
 // ============================== Merged ==============================
@@ -327,23 +271,28 @@ export var genTreeStyle = function genTreeStyle(prefixCls, token) {
   genDirectoryStyle(treeToken)];
 };
 export var initComponentToken = function initComponentToken(token) {
-  var controlHeightSM = token.controlHeightSM;
+  var controlHeightSM = token.controlHeightSM,
+    controlItemBgHover = token.controlItemBgHover,
+    controlItemBgActive = token.controlItemBgActive;
+  var titleHeight = controlHeightSM;
   return {
-    titleHeight: controlHeightSM,
-    nodeHoverBg: token.colorPrimaryBg,
-    nodeSelectedBg: token.colorPrimaryBg
+    titleHeight: titleHeight,
+    indentSize: titleHeight,
+    nodeHoverBg: controlItemBgHover,
+    nodeHoverColor: token.colorText,
+    nodeSelectedBg: controlItemBgActive,
+    nodeSelectedColor: token.colorText
   };
 };
 export var prepareComponentToken = function prepareComponentToken(token) {
   var colorTextLightSolid = token.colorTextLightSolid,
-    colorPrimary = token.colorPrimary,
-    colorPrimaryBg = token.colorPrimaryBg;
+    colorPrimary = token.colorPrimary;
   return _objectSpread(_objectSpread({}, initComponentToken(token)), {}, {
     directoryNodeSelectedColor: colorTextLightSolid,
-    directoryNodeSelectedBg: colorPrimaryBg
+    directoryNodeSelectedBg: colorPrimary
   });
 };
-export default genStyleHooks('Tree', function (token, _ref5) {
-  var prefixCls = _ref5.prefixCls;
+export default genStyleHooks('Tree', function (token, _ref4) {
+  var prefixCls = _ref4.prefixCls;
   return [_defineProperty({}, token.componentCls, getCheckboxStyle("".concat(prefixCls, "-checkbox"), token)), genTreeStyle(prefixCls, token), genCollapseMotion(token)];
 }, prepareComponentToken);

package/lib/Antd5/tree/utils/dropIndicator.js

@@ -5,7 +5,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 export var offset = 4;
-export default function dropIndicatorRender(props) {
+function dropIndicatorRender(props) {
   var dropPosition = props.dropPosition,
     dropLevelOffset = props.dropLevelOffset,
     prefixCls = props.prefixCls,
@@ -32,4 +32,5 @@ export default function dropIndicatorRender(props) {
     style: style,
     className: "".concat(prefixCls, "-drop-indicator")
   });
-}
+}
+export default dropIndicatorRender;

package/lib/Antd5/tree/utils/iconUtil.js

@@ -12,11 +12,15 @@ var SwitcherIconCom = function SwitcherIconCom(props) {
   var prefixCls = props.prefixCls,
     switcherIcon = props.switcherIcon,
     treeNodeProps = props.treeNodeProps,
-    showLine = props.showLine;
+    showLine = props.showLine,
+    switcherLoadingIcon = props.switcherLoadingIcon;
   var isLeaf = treeNodeProps.isLeaf,
     expanded = treeNodeProps.expanded,
     loading = treeNodeProps.loading;
   if (loading) {
+    if (/*#__PURE__*/React.isValidElement(switcherLoadingIcon)) {
+      return switcherLoadingIcon;
+    }
     return _jsx(LoadingOutlined, {
       className: "".concat(prefixCls, "-switcher-loading-icon")
     });

package/lib/Antd5/tree-select/index.js

@@ -36,44 +36,44 @@ import useIcons from '../select/useIcons';
 import useShowArrow from '../select/useShowArrow';
 import { useCompactItemContext } from '../space/Compact';
 import SwitcherIconCom from '../tree/utils/iconUtil';
+import { useToken } from '../theme/internal';
 import useStyle from './style';
-var InternalTreeSelect = function InternalTreeSelect(_ref, ref) {
-  var _ref2;
-  var customizePrefixCls = _ref.prefixCls,
-    customizeSize = _ref.size,
-    customDisabled = _ref.disabled,
-    _ref$bordered = _ref.bordered,
-    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
-    className = _ref.className,
-    rootClassName = _ref.rootClassName,
-    treeCheckable = _ref.treeCheckable,
-    multiple = _ref.multiple,
-    _ref$listHeight = _ref.listHeight,
-    listHeight = _ref$listHeight === void 0 ? 256 : _ref$listHeight,
-    _ref$listItemHeight = _ref.listItemHeight,
-    listItemHeight = _ref$listItemHeight === void 0 ? 26 : _ref$listItemHeight,
-    placement = _ref.placement,
-    notFoundContent = _ref.notFoundContent,
-    switcherIcon = _ref.switcherIcon,
-    treeLine = _ref.treeLine,
-    getPopupContainer = _ref.getPopupContainer,
-    popupClassName = _ref.popupClassName,
-    dropdownClassName = _ref.dropdownClassName,
-    _ref$treeIcon = _ref.treeIcon,
-    treeIcon = _ref$treeIcon === void 0 ? false : _ref$treeIcon,
-    transitionName = _ref.transitionName,
-    _ref$choiceTransition = _ref.choiceTransitionName,
-    choiceTransitionName = _ref$choiceTransition === void 0 ? '' : _ref$choiceTransition,
-    customStatus = _ref.status,
-    treeExpandAction = _ref.treeExpandAction,
-    builtinPlacements = _ref.builtinPlacements,
-    dropdownMatchSelectWidth = _ref.dropdownMatchSelectWidth,
-    popupMatchSelectWidth = _ref.popupMatchSelectWidth,
-    allowClear = _ref.allowClear,
-    customVariant = _ref.variant,
-    dropdownStyle = _ref.dropdownStyle,
-    tagRender = _ref.tagRender,
-    props = _objectWithoutProperties(_ref, _excluded);
+var InternalTreeSelect = function InternalTreeSelect(props, ref) {
+  var _ref;
+  var customizePrefixCls = props.prefixCls,
+    customizeSize = props.size,
+    customDisabled = props.disabled,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? true : _props$bordered,
+    className = props.className,
+    rootClassName = props.rootClassName,
+    treeCheckable = props.treeCheckable,
+    multiple = props.multiple,
+    _props$listHeight = props.listHeight,
+    listHeight = _props$listHeight === void 0 ? 256 : _props$listHeight,
+    customListItemHeight = props.listItemHeight,
+    placement = props.placement,
+    notFoundContent = props.notFoundContent,
+    switcherIcon = props.switcherIcon,
+    treeLine = props.treeLine,
+    getPopupContainer = props.getPopupContainer,
+    popupClassName = props.popupClassName,
+    dropdownClassName = props.dropdownClassName,
+    _props$treeIcon = props.treeIcon,
+    treeIcon = _props$treeIcon === void 0 ? false : _props$treeIcon,
+    transitionName = props.transitionName,
+    _props$choiceTransiti = props.choiceTransitionName,
+    choiceTransitionName = _props$choiceTransiti === void 0 ? '' : _props$choiceTransiti,
+    customStatus = props.status,
+    treeExpandAction = props.treeExpandAction,
+    builtinPlacements = props.builtinPlacements,
+    dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
+    popupMatchSelectWidth = props.popupMatchSelectWidth,
+    allowClear = props.allowClear,
+    customVariant = props.variant,
+    dropdownStyle = props.dropdownStyle,
+    tagRender = props.tagRender,
+    restProps = _objectWithoutProperties(props, _excluded);
   var _React$useContext = React.useContext(ConfigContext),
     getContextPopupContainer = _React$useContext.getPopupContainer,
     getPrefixCls = _React$useContext.getPrefixCls,
@@ -82,6 +82,10 @@ var InternalTreeSelect = function InternalTreeSelect(_ref, ref) {
     virtual = _React$useContext.virtual,
     contextPopupMatchSelectWidth = _React$useContext.popupMatchSelectWidth,
     popupOverflow = _React$useContext.popupOverflow;
+  var _useToken = useToken(),
+    _useToken2 = _slicedToArray(_useToken, 2),
+    token = _useToken2[1];
+  var listItemHeight = customListItemHeight !== null && customListItemHeight !== void 0 ? customListItemHeight : (token === null || token === void 0 ? void 0 : token.controlHeightSM) + (token === null || token === void 0 ? void 0 : token.paddingXXS);
   if (process.env.NODE_ENV !== 'production') {
     var warning = devUseWarning('TreeSelect');
     warning(multiple !== false || !treeCheckable, 'usage', '`multiple` will always be `true` when `treeCheckable` is true');
@@ -107,14 +111,14 @@ var InternalTreeSelect = function InternalTreeSelect(_ref, ref) {
   var _useStyle = useStyle(treeSelectPrefixCls, treePrefixCls, treeSelectRootCls),
     _useStyle2 = _slicedToArray(_useStyle, 1),
     treeSelectWrapCSSVar = _useStyle2[0];
-  var _useVariant = useVariant(customVariant, bordered),
+  var _useVariant = useVariant('treeSelect', customVariant, bordered),
     _useVariant2 = _slicedToArray(_useVariant, 2),
     variant = _useVariant2[0],
     enableVariantCls = _useVariant2[1];
   var mergedDropdownClassName = classNames(popupClassName || dropdownClassName, "".concat(treeSelectPrefixCls, "-dropdown"), _defineProperty({}, "".concat(treeSelectPrefixCls, "-dropdown-rtl"), direction === 'rtl'), rootClassName, cssVarCls, rootCls, treeSelectRootCls, hashId);
   var isMultiple = !!(treeCheckable || multiple);
   var showSuffixIcon = useShowArrow(props.suffixIcon, props.showArrow);
-  var mergedPopupMatchSelectWidth = (_ref2 = popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : dropdownMatchSelectWidth) !== null && _ref2 !== void 0 ? _ref2 : contextPopupMatchSelectWidth;
+  var mergedPopupMatchSelectWidth = (_ref = popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : dropdownMatchSelectWidth) !== null && _ref !== void 0 ? _ref : contextPopupMatchSelectWidth;
   // ===================== Form =====================
   var _React$useContext2 = React.useContext(FormItemInputContext),
     contextStatus = _React$useContext2.status,
@@ -123,7 +127,7 @@ var InternalTreeSelect = function InternalTreeSelect(_ref, ref) {
     feedbackIcon = _React$useContext2.feedbackIcon;
   var mergedStatus = getMergedStatus(contextStatus, customStatus);
   // ===================== Icons =====================
-  var _useIcons = useIcons(_objectSpread(_objectSpread({}, props), {}, {
+  var _useIcons = useIcons(_objectSpread(_objectSpread({}, restProps), {}, {
       multiple: isMultiple,
       showSuffixIcon: showSuffixIcon,
       hasFeedback: hasFeedback,
@@ -147,7 +151,7 @@ var InternalTreeSelect = function InternalTreeSelect(_ref, ref) {
     });
   }
   // ==================== Render =====================
-  var selectProps = omit(props, ['suffixIcon', 'removeIcon', 'clearIcon', 'itemIcon', 'switcherIcon']);
+  var selectProps = omit(restProps, ['suffixIcon', 'removeIcon', 'clearIcon', 'itemIcon', 'switcherIcon']);
   // ===================== Placement =====================
   var memoizedPlacement = React.useMemo(function () {
     if (placement !== undefined) {
@@ -156,8 +160,8 @@ var InternalTreeSelect = function InternalTreeSelect(_ref, ref) {
     return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
   }, [placement, direction]);
   var mergedSize = useSize(function (ctx) {
-    var _ref3;
-    return (_ref3 = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref3 !== void 0 ? _ref3 : ctx;
+    var _ref2;
+    return (_ref2 = customizeSize !== null && customizeSize !== void 0 ? customizeSize : compactSize) !== null && _ref2 !== void 0 ? _ref2 : ctx;
   });
   // ===================== Disabled =====================
   var disabled = React.useContext(DisabledContext);