@kdcloudjs/kdesign 1.7.2 → 1.7.3

package/es/config-provider/compDefaultProps.d.ts

@@ -436,6 +436,7 @@ declare const compDefaultProps: {
         placeholder: string;
         optionLabelProp: string;
         treeNodeFilterProp: string;
+        treeExpandOnClickNode: boolean;
         showSearch: boolean;
         switcherIcon: () => JSX.Element;
         expandOnClickNode: boolean;

package/es/config-provider/compDefaultProps.js

@@ -450,6 +450,7 @@ var compDefaultProps = {
     placeholder: '请输入需要搜索的内容',
     optionLabelProp: 'title',
     treeNodeFilterProp: 'title',
+    treeExpandOnClickNode: true,
     showSearch: true,
     switcherIcon: function switcherIcon() {
       return /*#__PURE__*/React.createElement(Icon, {

package/es/select/select.js

@@ -88,10 +88,11 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     singleVal = _useState4[0],
     setSingleVal = _useState4[1];
-  var _useState5 = useState(!!props.visible || defaultOpen),
+  var _useState5 = useState(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState6 = _slicedToArray(_useState5, 2),
     optionShow = _useState6[0],
-    setOptionShow = _useState6[1]; // 下拉列表是否展示
+    setOptionShow = _useState6[1];
+  // 下拉列表是否展示
   // const [searchInput, setSearchInput] = useState<string>('') // 搜索框值
   var _useState7 = useState(''),
     _useState8 = _slicedToArray(_useState7, 2),
@@ -118,7 +119,9 @@ var InternalSelect = function InternalSelect(props, ref) {
   // 多选，单选公共样式
   var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _classNames6));
   useEffect(function () {
-    setOptionShow(!!props.visible);
+    if (typeof props.visible !== 'undefined') {
+      setOptionShow(props.visible);
+    }
   }, [props.visible]);
   // realchildren更新时数据处理---待解决
   useEffect(function () {

package/es/tree/tree.d.ts

@@ -39,6 +39,7 @@ export interface TreeProps {
     setTreeNodeStyle?: (node: any) => Map<string, string>;
     estimatedItemSize?: number;
     expandOnClickNode?: boolean;
+    onlyExpandOnClickIcon?: boolean;
 }
 export declare type TreeNodeData = {
     checkable?: boolean;

package/es/tree/tree.js

@@ -64,6 +64,8 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     filterTreeNode = TreeProps.filterTreeNode,
     filterValue = TreeProps.filterValue,
     expandOnClickNode = TreeProps.expandOnClickNode,
+    _TreeProps$onlyExpand = TreeProps.onlyExpandOnClickIcon,
+    onlyExpandOnClickIcon = _TreeProps$onlyExpand === void 0 ? false : _TreeProps$onlyExpand,
     loadData = TreeProps.loadData,
     notFoundContent = TreeProps.notFoundContent;
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
@@ -403,6 +405,7 @@ var InternalTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
     item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
     item.dropPosition = dropPosition;
     item.expandOnClickNode = expandOnClickNode;
+    item.onlyExpandOnClickIcon = onlyExpandOnClickIcon;
     item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
     item.loadData = loadData;
     return /*#__PURE__*/React.createElement(TreeNode, _extends({}, item, {

package/es/tree/treeHooks.js

@@ -116,7 +116,7 @@ export var useSelect = function useSelect(selectedKeysProps, defaultSelectedKeys
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
   useEffect(function () {
-    setSelectedKeys(selectedKeysProps);
+    selectedKeysProps && setSelectedKeys(selectedKeysProps);
   }, [selectedKeysProps]);
   return [selectedKeys, setSelectedKeys];
 };

package/es/tree/treeNode.d.ts

@@ -26,6 +26,8 @@ export interface TreeNodeProps {
     estimatedItemSize?: number;
     dragOver?: boolean;
     isLeaf?: boolean;
+    expandOnClickNode?: boolean;
+    onlyExpandOnClickIcon?: boolean;
     onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
     onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
     onExpand?: (value: boolean, node: React.ReactNode) => void;

package/es/tree/treeNode.js

@@ -51,6 +51,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     dragOver = TreeNodeProps.dragOver,
     dropPosition = TreeNodeProps.dropPosition,
     expandOnClickNode = TreeNodeProps.expandOnClickNode,
+    onlyExpandOnClickIcon = TreeNodeProps.onlyExpandOnClickIcon,
     loading = TreeNodeProps.loading,
     onExpand = TreeNodeProps.onExpand,
     onCheck = TreeNodeProps.onCheck,
@@ -61,7 +62,7 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onDragEnd = TreeNodeProps.onDragEnd,
     onDrop = TreeNodeProps.onDrop,
     onSelect = TreeNodeProps.onSelect,
-    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
   var nodeData = React.useMemo(function () {
     return _extends({
       selectable: selectable,
@@ -168,12 +169,12 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (Array.isArray(switcherIcon) && switcherIcon.length === 2) {
         return /*#__PURE__*/React.createElement("span", {
           className: classNames("".concat(treeNodePrefixCls, "-icon"), _defineProperty({}, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode)),
-          onClick: expandOnClickNode ? undefined : handleExpandIconClick
+          onClick: expandOnClickNode ? onlyExpandOnClickIcon ? handleExpandIconClick : undefined : handleExpandIconClick
         }, expandState ? renderIcon(switcherIcon[1]) : renderIcon(switcherIcon[0]));
       }
       return /*#__PURE__*/React.createElement("span", {
         className: classNames("".concat(treeNodePrefixCls, "-icon"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), _defineProperty(_classNames3, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode), _classNames3)),
-        onClick: expandOnClickNode ? undefined : handleExpandIconClick
+        onClick: expandOnClickNode ? onlyExpandOnClickIcon ? handleExpandIconClick : undefined : handleExpandIconClick
       }, renderIcon(switcherIcon || /*#__PURE__*/React.createElement(Icon, {
         type: "arrow-right-solid"
       })));
@@ -241,9 +242,11 @@ var TreeNode = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [expandState, nodeData, nodeKey, onExpand, setExpandState]);
   var handleClick = React.useCallback(function (e) {
     e.stopPropagation();
-    expandOnClickNode && handleExpandIconClick();
+    if (expandOnClickNode) {
+      !onlyExpandOnClickIcon && handleExpandIconClick();
+    }
     handleSelect(e);
-  }, [expandOnClickNode, handleExpandIconClick, handleSelect]);
+  }, [expandOnClickNode, handleExpandIconClick, handleSelect, onlyExpandOnClickIcon]);
   var handleDragStart = React.useCallback(function (e) {
     if (!draggable) return;
     setDragNode(nodeData);

package/es/tree-select/style/index.css

@@ -240,9 +240,8 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   max-height: 200px;
 }
-.kd-tree-select-dropdown .kd-tree {
-  padding-left: 16px;
-  padding-right: 16px;
+.kd-tree-select-dropdown .kd-tree-node-item {
+  padding: 0 var(--kd-c-tree-select-dropdown-node-spacing-padding-horizontal, 16px);
 }
 .kd-tree-select-dropdown-scroll {
   overflow-y: auto;

package/es/tree-select/style/index.less

@@ -137,11 +137,9 @@
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
     max-height: 200px;
 
-    .@{tree-prefix-cls} {
-      padding-left: 16px;
-      padding-right: 16px;
+    .@{tree-prefix-cls}-node-item {
+      padding: 0 @tree-select-dropdown-node-horizontal;
     }
-    
 
     &-scroll {
       overflow-y: auto;

package/es/tree-select/style/token.less

@@ -1,54 +1,54 @@
 @import '../../style/themes/token.less';
 
-@select-custom-prefix: ~'--@{kd-prefix}-c-tree-select';
-
+@tree-select-custom-prefix: ~'--@{kd-prefix}-c-tree-select';
 
 // color
-@tree-select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
-@tree-select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
-@tree-select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
-@tree-select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
-@tree-select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
-@tree-select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
-@tree-select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
-@tree-select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
-@tree-select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
-@tree-select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
-@tree-select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
-@tree-select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
-@tree-select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
-@tree-select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
-@tree-select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
-@tree-select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
-@tree-select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
-@tree-select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
-@tree-select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
+@tree-select-dropdown-bg: var(~'@{tree-select-custom-prefix}-dropdown-color-background', @color-background);
+@tree-select-disabled-option-bg: var(~'@{tree-select-custom-prefix}-item-color-background-disabled', #fff);
+@tree-select-item-active-bg: var(~'@{tree-select-custom-prefix}-color-background', #f5f5f5);
+@tree-select-item-selected-bg: var(~'@{tree-select-custom-prefix}-color-background-selected', @color-theme-3);
+@tree-select-g-color-border: var(~'@{tree-select-custom-prefix}-color-border', @color-input);
+@tree-select-g-color-border-foucs: var(~'@{tree-select-custom-prefix}-color-border-foucs', @color-theme);
+@tree-select-g-color-border-hover: var(~'@{tree-select-custom-prefix}-color-border-hover', @color-theme);
+@tree-select-border-g-color-border: var(~'@{tree-select-custom-prefix}-border-color-border', @color-border-strong);
+@tree-select-placeholder-color: var(~'@{tree-select-custom-prefix}-placeholder-color-text', #b2b2b2);
+@tree-select-item-selected-color: var(~'@{tree-select-custom-prefix}-item-color-text-selected', @color-theme);
+@tree-select-font-color: var(~'@{tree-select-custom-prefix}-footer-color-text', @color-text-primary);
+@tree-select-footer-g-text-color-selected: var(~'@{tree-select-custom-prefix}-footer-color-text-selected', #0e5fd8);
+@tree-select-g-item-text-color-disabled: var(~'@{tree-select-custom-prefix}-item-color-text-disabled', @color-disabled);
+@tree-select-color-background-disabled: var(~'@{tree-select-custom-prefix}-color-background-disabled', #f5f5f5);
+@tree-select-color-text-disabled: var(~'@{tree-select-custom-prefix}-color-text-disabled', @color-disabled);
+@tree-select-arrow-icon-color-text-disabled: var(~'@{tree-select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
+@tree-select-single-color-text: var(~'@{tree-select-custom-prefix}-single-color-text', @color-text-primary);
+@tree-select-clear-color: var(~'@{tree-select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@tree-select-clear-color-hover: var(~'@{tree-select-custom-prefix}-icon-clear-color-text-hover', #999);
 
 // font
-@tree-select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
-@tree-select-large-font-size: var(~'@{select-custom-prefix}-font-size-large', 16px); // 大号字体
-@tree-select-middle-font-size: var(~'@{select-custom-prefix}-font-size-middle', 14px); // 中号高度
-@tree-select-small-font-size: var(~'@{select-custom-prefix}-font-size-small', 12px); // 小号高度
+@tree-select-list-font-size: var(~'@{tree-select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
+@tree-select-large-font-size: var(~'@{tree-select-custom-prefix}-font-size-large', 16px); // 大号字体
+@tree-select-middle-font-size: var(~'@{tree-select-custom-prefix}-font-size-middle', 14px); // 中号高度
+@tree-select-small-font-size: var(~'@{tree-select-custom-prefix}-font-size-small', 12px); // 小号高度
 
 // line-height
-@tree-select-dropdown-line-height: var(~'@{select-custom-prefix}-dropdown-line-height', 22px);
-@tree-select-large-line-height: var(~'@{select-custom-prefix}-line-height-large', 28px);
-@tree-select-middle-line-height: var(~'@{select-custom-prefix}-line-height-middle', 22px);
-@tree-select-small-line-height: var(~'@{select-custom-prefix}-line-height-small', 14px);
+@tree-select-dropdown-line-height: var(~'@{tree-select-custom-prefix}-dropdown-line-height', 22px);
+@tree-select-large-line-height: var(~'@{tree-select-custom-prefix}-line-height-large', 28px);
+@tree-select-middle-line-height: var(~'@{tree-select-custom-prefix}-line-height-middle', 22px);
+@tree-select-small-line-height: var(~'@{tree-select-custom-prefix}-line-height-small', 14px);
 
 // sizing
-@tree-select-dropdown-height: var(~'@{select-custom-prefix}-item-sizing-height', 22px);
-@tree-select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
-@tree-select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 32px); // 中号高度lh:22px
-@tree-select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+@tree-select-dropdown-height: var(~'@{tree-select-custom-prefix}-item-sizing-height', 22px);
+@tree-select-large-height: var(~'@{tree-select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
+@tree-select-middle-height: var(~'@{tree-select-custom-prefix}-sizing-height-middle', 32px); // 中号高度lh:22px
+@tree-select-small-height: var(~'@{tree-select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
 
 // spacing
-@tree-select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
-@tree-select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@tree-select-bordered: var(~'@{tree-select-custom-prefix}-bordered-spacing-padding-left', 8px);
+@tree-select-wrapper-padding: var(~'@{tree-select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@tree-select-dropdown-node-horizontal: var(~'@{tree-select-custom-prefix}-dropdown-node-spacing-padding-horizontal', 16px);
 
 // radius
-@tree-select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);
-@tree-select-border-radius-border: var(~'@{select-custom-prefix}-bordered-radius-border', 2px);
+@tree-select-g-radius-border: var(~'@{tree-select-custom-prefix}-radius-border', @radius-border);
+@tree-select-border-radius-border: var(~'@{tree-select-custom-prefix}-bordered-radius-border', 2px);
 
 // z-index
-@tree-select-z-index: var(~'@{select-custom-prefix}-z-index', @z-index-popper);
+@tree-select-z-index: var(~'@{tree-select-custom-prefix}-z-index', @z-index-popper);

package/es/tree-select/tree-select.js

@@ -308,6 +308,7 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
       icon: treeIcon,
       showIcon: showTreeIcon,
       switcherIcon: switcherIcon,
+      onlyExpandOnClickIcon: true,
       notFoundContent: renderNotContent(),
       filterTreeNode: defFilterTreeNode,
       onSelect: handleSelect,

package/lib/config-provider/compDefaultProps.d.ts

@@ -436,6 +436,7 @@ declare const compDefaultProps: {
         placeholder: string;
         optionLabelProp: string;
         treeNodeFilterProp: string;
+        treeExpandOnClickNode: boolean;
         showSearch: boolean;
         switcherIcon: () => JSX.Element;
         expandOnClickNode: boolean;

package/lib/config-provider/compDefaultProps.js

@@ -461,6 +461,7 @@ var compDefaultProps = {
     placeholder: '请输入需要搜索的内容',
     optionLabelProp: 'title',
     treeNodeFilterProp: 'title',
+    treeExpandOnClickNode: true,
     showSearch: true,
     switcherIcon: function switcherIcon() {
       return /*#__PURE__*/React.createElement(_index.Icon, {

package/lib/select/select.js

@@ -100,10 +100,11 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     singleVal = _useState4[0],
     setSingleVal = _useState4[1];
-  var _useState5 = (0, _react.useState)(!!props.visible || defaultOpen),
+  var _useState5 = (0, _react.useState)(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     optionShow = _useState6[0],
-    setOptionShow = _useState6[1]; // 下拉列表是否展示
+    setOptionShow = _useState6[1];
+  // 下拉列表是否展示
   // const [searchInput, setSearchInput] = useState<string>('') // 搜索框值
   var _useState7 = (0, _react.useState)(''),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
@@ -130,7 +131,9 @@ var InternalSelect = function InternalSelect(props, ref) {
   // 多选，单选公共样式
   var commCls = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames6, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _classNames6));
   (0, _react.useEffect)(function () {
-    setOptionShow(!!props.visible);
+    if (typeof props.visible !== 'undefined') {
+      setOptionShow(props.visible);
+    }
   }, [props.visible]);
   // realchildren更新时数据处理---待解决
   (0, _react.useEffect)(function () {

package/lib/tree/tree.d.ts

@@ -39,6 +39,7 @@ export interface TreeProps {
     setTreeNodeStyle?: (node: any) => Map<string, string>;
     estimatedItemSize?: number;
     expandOnClickNode?: boolean;
+    onlyExpandOnClickIcon?: boolean;
 }
 export declare type TreeNodeData = {
     checkable?: boolean;

package/lib/tree/tree.js

@@ -76,6 +76,8 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     filterTreeNode = TreeProps.filterTreeNode,
     filterValue = TreeProps.filterValue,
     expandOnClickNode = TreeProps.expandOnClickNode,
+    _TreeProps$onlyExpand = TreeProps.onlyExpandOnClickIcon,
+    onlyExpandOnClickIcon = _TreeProps$onlyExpand === void 0 ? false : _TreeProps$onlyExpand,
     loadData = TreeProps.loadData,
     notFoundContent = TreeProps.notFoundContent;
   var treePrefixCls = getPrefixCls(prefixCls, 'tree', customPrefixcls); // 树样式前缀
@@ -415,6 +417,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     item.dragOver = dragOverNodeKey === item.key && dropPosition === 0;
     item.dropPosition = dropPosition;
     item.expandOnClickNode = expandOnClickNode;
+    item.onlyExpandOnClickIcon = onlyExpandOnClickIcon;
     item.loading = loadingKeys.has(item.key) && !loadedKeys.has(item.key);
     item.loadData = loadData;
     return /*#__PURE__*/_react.default.createElement(_treeNode.default, (0, _extends2.default)({}, item, {

package/lib/tree/treeHooks.js

@@ -134,7 +134,7 @@ var useSelect = function useSelect(selectedKeysProps, defaultSelectedKeys) {
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];
   (0, _react.useEffect)(function () {
-    setSelectedKeys(selectedKeysProps);
+    selectedKeysProps && setSelectedKeys(selectedKeysProps);
   }, [selectedKeysProps]);
   return [selectedKeys, setSelectedKeys];
 };

package/lib/tree/treeNode.d.ts

@@ -26,6 +26,8 @@ export interface TreeNodeProps {
     estimatedItemSize?: number;
     dragOver?: boolean;
     isLeaf?: boolean;
+    expandOnClickNode?: boolean;
+    onlyExpandOnClickIcon?: boolean;
     onCheck?: (key: string, value: boolean, node: React.ReactNode, event: React.MouseEvent<MouseEvent>, pos: string) => void;
     onSelect?: (event: React.MouseEvent<MouseEvent>, node: React.ReactNode, key: string) => void;
     onExpand?: (value: boolean, node: React.ReactNode) => void;

package/lib/tree/treeNode.js

@@ -63,6 +63,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     dragOver = TreeNodeProps.dragOver,
     dropPosition = TreeNodeProps.dropPosition,
     expandOnClickNode = TreeNodeProps.expandOnClickNode,
+    onlyExpandOnClickIcon = TreeNodeProps.onlyExpandOnClickIcon,
     loading = TreeNodeProps.loading,
     onExpand = TreeNodeProps.onExpand,
     onCheck = TreeNodeProps.onCheck,
@@ -73,7 +74,7 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onDragEnd = TreeNodeProps.onDragEnd,
     onDrop = TreeNodeProps.onDrop,
     onSelect = TreeNodeProps.onSelect,
-    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
+    others = __rest(TreeNodeProps, ["nodeKey", "prefixCls", "selectable", "checkable", "className", "icon", "switcherIcon", "disabled", "draggable", "pos", "checked", "level", "getDragNode", "hasChildNode", "expand", "title", "showLine", "showIcon", "selected", "setDragNode", "style", "indeterminate", "estimatedItemSize", "dragOver", "dropPosition", "expandOnClickNode", "onlyExpandOnClickIcon", "loading", "onExpand", "onCheck", "onDragStart", "onDragOver", "onDragLeave", "onDragEnter", "onDragEnd", "onDrop", "onSelect"]);
   var nodeData = _react.default.useMemo(function () {
     return (0, _extends2.default)({
       selectable: selectable,
@@ -180,12 +181,12 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       if (Array.isArray(switcherIcon) && switcherIcon.length === 2) {
         return /*#__PURE__*/_react.default.createElement("span", {
           className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-icon"), (0, _defineProperty2.default)({}, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode)),
-          onClick: expandOnClickNode ? undefined : handleExpandIconClick
+          onClick: expandOnClickNode ? onlyExpandOnClickIcon ? handleExpandIconClick : undefined : handleExpandIconClick
         }, expandState ? renderIcon(switcherIcon[1]) : renderIcon(switcherIcon[0]));
       }
       return /*#__PURE__*/_react.default.createElement("span", {
         className: (0, _classnames.default)("".concat(treeNodePrefixCls, "-icon"), (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, "".concat(treeNodePrefixCls, "-animation-expand"), expandState), (0, _defineProperty2.default)(_classNames3, "".concat(treeNodePrefixCls, "-animation-collapse"), !expandState), (0, _defineProperty2.default)(_classNames3, "".concat(treeNodePrefixCls, "-icon-hover"), !expandOnClickNode), _classNames3)),
-        onClick: expandOnClickNode ? undefined : handleExpandIconClick
+        onClick: expandOnClickNode ? onlyExpandOnClickIcon ? handleExpandIconClick : undefined : handleExpandIconClick
       }, renderIcon(switcherIcon || /*#__PURE__*/_react.default.createElement(_icon.default, {
         type: "arrow-right-solid"
       })));
@@ -253,9 +254,11 @@ var TreeNode = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [expandState, nodeData, nodeKey, onExpand, setExpandState]);
   var handleClick = _react.default.useCallback(function (e) {
     e.stopPropagation();
-    expandOnClickNode && handleExpandIconClick();
+    if (expandOnClickNode) {
+      !onlyExpandOnClickIcon && handleExpandIconClick();
+    }
     handleSelect(e);
-  }, [expandOnClickNode, handleExpandIconClick, handleSelect]);
+  }, [expandOnClickNode, handleExpandIconClick, handleSelect, onlyExpandOnClickIcon]);
   var handleDragStart = _react.default.useCallback(function (e) {
     if (!draggable) return;
     setDragNode(nodeData);

package/lib/tree-select/style/index.css

@@ -240,9 +240,8 @@
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
   max-height: 200px;
 }
-.kd-tree-select-dropdown .kd-tree {
-  padding-left: 16px;
-  padding-right: 16px;
+.kd-tree-select-dropdown .kd-tree-node-item {
+  padding: 0 var(--kd-c-tree-select-dropdown-node-spacing-padding-horizontal, 16px);
 }
 .kd-tree-select-dropdown-scroll {
   overflow-y: auto;

package/lib/tree-select/style/index.less

@@ -137,11 +137,9 @@
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
     max-height: 200px;
 
-    .@{tree-prefix-cls} {
-      padding-left: 16px;
-      padding-right: 16px;
+    .@{tree-prefix-cls}-node-item {
+      padding: 0 @tree-select-dropdown-node-horizontal;
     }
-    
 
     &-scroll {
       overflow-y: auto;

package/lib/tree-select/style/token.less

@@ -1,54 +1,54 @@
 @import '../../style/themes/token.less';
 
-@select-custom-prefix: ~'--@{kd-prefix}-c-tree-select';
-
+@tree-select-custom-prefix: ~'--@{kd-prefix}-c-tree-select';
 
 // color
-@tree-select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
-@tree-select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
-@tree-select-item-active-bg: var(~'@{select-custom-prefix}-color-background', #f5f5f5);
-@tree-select-item-selected-bg: var(~'@{select-custom-prefix}-color-background-selected', @color-theme-3);
-@tree-select-g-color-border: var(~'@{select-custom-prefix}-color-border', @color-input);
-@tree-select-g-color-border-foucs: var(~'@{select-custom-prefix}-color-border-foucs', @color-theme);
-@tree-select-g-color-border-hover: var(~'@{select-custom-prefix}-color-border-hover', @color-theme);
-@tree-select-border-g-color-border: var(~'@{select-custom-prefix}-border-color-border', @color-border-strong);
-@tree-select-placeholder-color: var(~'@{select-custom-prefix}-placeholder-color-text', #b2b2b2);
-@tree-select-item-selected-color: var(~'@{select-custom-prefix}-item-color-text-selected', @color-theme);
-@tree-select-font-color: var(~'@{select-custom-prefix}-footer-color-text', @color-text-primary);
-@tree-select-footer-g-text-color-selected: var(~'@{select-custom-prefix}-footer-color-text-selected', #0e5fd8);
-@tree-select-g-item-text-color-disabled: var(~'@{select-custom-prefix}-item-color-text-disabled', @color-disabled);
-@tree-select-color-background-disabled: var(~'@{select-custom-prefix}-color-background-disabled', #f5f5f5);
-@tree-select-color-text-disabled: var(~'@{select-custom-prefix}-color-text-disabled', @color-disabled);
-@tree-select-arrow-icon-color-text-disabled: var(~'@{select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
-@tree-select-single-color-text: var(~'@{select-custom-prefix}-single-color-text', @color-text-primary);
-@tree-select-clear-color: var(~'@{select-custom-prefix}-icon-clear-color-text', #d9d9d9);
-@tree-select-clear-color-hover: var(~'@{select-custom-prefix}-icon-clear-color-text-hover', #999);
+@tree-select-dropdown-bg: var(~'@{tree-select-custom-prefix}-dropdown-color-background', @color-background);
+@tree-select-disabled-option-bg: var(~'@{tree-select-custom-prefix}-item-color-background-disabled', #fff);
+@tree-select-item-active-bg: var(~'@{tree-select-custom-prefix}-color-background', #f5f5f5);
+@tree-select-item-selected-bg: var(~'@{tree-select-custom-prefix}-color-background-selected', @color-theme-3);
+@tree-select-g-color-border: var(~'@{tree-select-custom-prefix}-color-border', @color-input);
+@tree-select-g-color-border-foucs: var(~'@{tree-select-custom-prefix}-color-border-foucs', @color-theme);
+@tree-select-g-color-border-hover: var(~'@{tree-select-custom-prefix}-color-border-hover', @color-theme);
+@tree-select-border-g-color-border: var(~'@{tree-select-custom-prefix}-border-color-border', @color-border-strong);
+@tree-select-placeholder-color: var(~'@{tree-select-custom-prefix}-placeholder-color-text', #b2b2b2);
+@tree-select-item-selected-color: var(~'@{tree-select-custom-prefix}-item-color-text-selected', @color-theme);
+@tree-select-font-color: var(~'@{tree-select-custom-prefix}-footer-color-text', @color-text-primary);
+@tree-select-footer-g-text-color-selected: var(~'@{tree-select-custom-prefix}-footer-color-text-selected', #0e5fd8);
+@tree-select-g-item-text-color-disabled: var(~'@{tree-select-custom-prefix}-item-color-text-disabled', @color-disabled);
+@tree-select-color-background-disabled: var(~'@{tree-select-custom-prefix}-color-background-disabled', #f5f5f5);
+@tree-select-color-text-disabled: var(~'@{tree-select-custom-prefix}-color-text-disabled', @color-disabled);
+@tree-select-arrow-icon-color-text-disabled: var(~'@{tree-select-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
+@tree-select-single-color-text: var(~'@{tree-select-custom-prefix}-single-color-text', @color-text-primary);
+@tree-select-clear-color: var(~'@{tree-select-custom-prefix}-icon-clear-color-text', #d9d9d9);
+@tree-select-clear-color-hover: var(~'@{tree-select-custom-prefix}-icon-clear-color-text-hover', #999);
 
 // font
-@tree-select-list-font-size: var(~'@{select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
-@tree-select-large-font-size: var(~'@{select-custom-prefix}-font-size-large', 16px); // 大号字体
-@tree-select-middle-font-size: var(~'@{select-custom-prefix}-font-size-middle', 14px); // 中号高度
-@tree-select-small-font-size: var(~'@{select-custom-prefix}-font-size-small', 12px); // 小号高度
+@tree-select-list-font-size: var(~'@{tree-select-custom-prefix}-dropdown-font-size', 12px); // 下拉列表文字大小
+@tree-select-large-font-size: var(~'@{tree-select-custom-prefix}-font-size-large', 16px); // 大号字体
+@tree-select-middle-font-size: var(~'@{tree-select-custom-prefix}-font-size-middle', 14px); // 中号高度
+@tree-select-small-font-size: var(~'@{tree-select-custom-prefix}-font-size-small', 12px); // 小号高度
 
 // line-height
-@tree-select-dropdown-line-height: var(~'@{select-custom-prefix}-dropdown-line-height', 22px);
-@tree-select-large-line-height: var(~'@{select-custom-prefix}-line-height-large', 28px);
-@tree-select-middle-line-height: var(~'@{select-custom-prefix}-line-height-middle', 22px);
-@tree-select-small-line-height: var(~'@{select-custom-prefix}-line-height-small', 14px);
+@tree-select-dropdown-line-height: var(~'@{tree-select-custom-prefix}-dropdown-line-height', 22px);
+@tree-select-large-line-height: var(~'@{tree-select-custom-prefix}-line-height-large', 28px);
+@tree-select-middle-line-height: var(~'@{tree-select-custom-prefix}-line-height-middle', 22px);
+@tree-select-small-line-height: var(~'@{tree-select-custom-prefix}-line-height-small', 14px);
 
 // sizing
-@tree-select-dropdown-height: var(~'@{select-custom-prefix}-item-sizing-height', 22px);
-@tree-select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
-@tree-select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 32px); // 中号高度lh:22px
-@tree-select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+@tree-select-dropdown-height: var(~'@{tree-select-custom-prefix}-item-sizing-height', 22px);
+@tree-select-large-height: var(~'@{tree-select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
+@tree-select-middle-height: var(~'@{tree-select-custom-prefix}-sizing-height-middle', 32px); // 中号高度lh:22px
+@tree-select-small-height: var(~'@{tree-select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
 
 // spacing
-@tree-select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
-@tree-select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@tree-select-bordered: var(~'@{tree-select-custom-prefix}-bordered-spacing-padding-left', 8px);
+@tree-select-wrapper-padding: var(~'@{tree-select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@tree-select-dropdown-node-horizontal: var(~'@{tree-select-custom-prefix}-dropdown-node-spacing-padding-horizontal', 16px);
 
 // radius
-@tree-select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);
-@tree-select-border-radius-border: var(~'@{select-custom-prefix}-bordered-radius-border', 2px);
+@tree-select-g-radius-border: var(~'@{tree-select-custom-prefix}-radius-border', @radius-border);
+@tree-select-border-radius-border: var(~'@{tree-select-custom-prefix}-bordered-radius-border', 2px);
 
 // z-index
-@tree-select-z-index: var(~'@{select-custom-prefix}-z-index', @z-index-popper);
+@tree-select-z-index: var(~'@{tree-select-custom-prefix}-z-index', @z-index-popper);

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

@@ -320,6 +320,7 @@ var InternalTreeSelect = function InternalTreeSelect(props, ref) {
       icon: treeIcon,
       showIcon: showTreeIcon,
       switcherIcon: switcherIcon,
+      onlyExpandOnClickIcon: true,
       notFoundContent: renderNotContent(),
       filterTreeNode: defFilterTreeNode,
       onSelect: handleSelect,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [