@douyinfe/semi-ui 2.46.0 → 2.47.0-beta.0

package/lib/cjs/_base/base.css

@@ -458,6 +458,26 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
+  --semi-color-data-0:rgba(22, 100, 255, 1);
+  --semi-color-data-1:rgba(178, 207, 255, 1);
+  --semi-color-data-2:rgba(26, 198, 255, 1);
+  --semi-color-data-3:rgba(148, 239, 255, 1);
+  --semi-color-data-4:rgba(255, 138, 0, 1);
+  --semi-color-data-5:rgba(255, 206, 122, 1);
+  --semi-color-data-6:rgba(60, 199, 128, 1);
+  --semi-color-data-7:rgba(185, 237, 205, 1);
+  --semi-color-data-8:rgba(116, 66, 212, 1);
+  --semi-color-data-9:rgba(221, 197, 250, 1);
+  --semi-color-data-10:rgba(255, 196, 0, 1);
+  --semi-color-data-11:rgba(250, 232, 120, 1);
+  --semi-color-data-12:rgba(48, 77, 119, 1);
+  --semi-color-data-13:rgba(139, 149, 158, 1);
+  --semi-color-data-14:rgba(180, 141, 235, 1);
+  --semi-color-data-15:rgba(239, 227, 255, 1);
+  --semi-color-data-16:rgba(0, 148, 136, 1);
+  --semi-color-data-17:rgba(89, 186, 168, 1);
+  --semi-color-data-18:rgba(255, 125, 218, 1);
+  --semi-color-data-19:rgba(255, 207, 238, 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -548,6 +568,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
+  --semi-color-data-0:rgba(22, 100, 255, 1);
+  --semi-color-data-1:rgba(178, 207, 255, 1);
+  --semi-color-data-2:rgba(26, 198, 255, 1);
+  --semi-color-data-3:rgba(148, 239, 255, 1);
+  --semi-color-data-4:rgba(255, 138, 0, 1);
+  --semi-color-data-5:rgba(255, 206, 122, 1);
+  --semi-color-data-6:rgba(60, 199, 128, 1);
+  --semi-color-data-7:rgba(185, 237, 205, 1);
+  --semi-color-data-8:rgba(116, 66, 212, 1);
+  --semi-color-data-9:rgba(221, 197, 250, 1);
+  --semi-color-data-10:rgba(255, 196, 0, 1);
+  --semi-color-data-11:rgba(250, 232, 120, 1);
+  --semi-color-data-12:rgba(48, 77, 119, 1);
+  --semi-color-data-13:rgba(139, 149, 158, 1);
+  --semi-color-data-14:rgba(180, 141, 235, 1);
+  --semi-color-data-15:rgba(239, 227, 255, 1);
+  --semi-color-data-16:rgba(0, 148, 136, 1);
+  --semi-color-data-17:rgba(89, 186, 168, 1);
+  --semi-color-data-18:rgba(255, 125, 218, 1);
+  --semi-color-data-19:rgba(255, 207, 238, 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/cjs/button/Button.js

@@ -59,7 +59,8 @@ class Button extends _react.PureComponent {
         [`${prefixCls}-light`]: theme === 'light',
         [`${prefixCls}-block`]: block,
         [`${prefixCls}-circle`]: circle,
-        [`${prefixCls}-borderless`]: theme === 'borderless'
+        [`${prefixCls}-borderless`]: theme === 'borderless',
+        [`${prefixCls}-${type}-disabled`]: disabled && type
       }, className),
       type: htmlType,
       'aria-disabled': disabled

package/lib/cjs/collapse/item.d.ts

@@ -11,6 +11,7 @@ export interface CollapsePanelProps {
     style?: CSSProperties;
     showArrow?: boolean;
     disabled?: boolean;
+    onMotionEnd?: () => void;
 }
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;

package/lib/cjs/collapse/item.js

@@ -120,6 +120,7 @@ class CollapsePanel extends _react.PureComponent {
       isOpen: active,
       keepDOM: keepDOM,
       motion: motion,
+      onMotionEnd: this.props.onMotionEnd,
       reCalcKey: reCalcKey
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: contentCls,

package/lib/cjs/pagination/index.js

@@ -210,7 +210,8 @@ class Pagination extends _baseComponent.default {
     const {
       showSizeChanger,
       popoverPosition = defaultPopoverPosition,
-      disabled
+      disabled,
+      popoverZIndex
     } = this.props;
     const {
       pageSize
@@ -236,6 +237,7 @@ class Pagination extends _baseComponent.default {
       key: pageSize,
       position: popoverPosition || 'bottomRight',
       clickToHide: true,
+      zIndex: popoverZIndex,
       dropdownClassName: `${prefixCls}-select-dropdown`
     }, options));
   }

package/lib/cjs/popconfirm/index.d.ts

@@ -24,6 +24,7 @@ export interface PopconfirmProps extends PopoverProps {
     prefixCls?: string;
     zIndex?: number;
     trigger?: Trigger;
+    showCloseIcon?: boolean;
     position?: Position;
     onCancel?: (e: React.MouseEvent) => Promise<any> | void;
     onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
@@ -59,6 +60,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         okButtonProps: PropTypes.Requireable<object>;
         cancelButtonProps: PropTypes.Requireable<object>;
         stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
+        showCloseIcon: PropTypes.Requireable<boolean>;
         zIndex: PropTypes.Requireable<number>;
         trigger: PropTypes.Requireable<string>;
         position: PropTypes.Requireable<string>;
@@ -73,6 +75,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         cancelType: string;
         prefixCls: string;
         zIndex: number;
+        showCloseIcon: boolean;
         onCancel: (...args: any[]) => void;
         onConfirm: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;

package/lib/cjs/popconfirm/index.js

@@ -48,7 +48,8 @@ class Popconfirm extends _baseComponent.default {
         style,
         cancelType,
         icon,
-        prefixCls
+        prefixCls,
+        showCloseIcon
       } = this.props;
       const {
         direction
@@ -82,14 +83,14 @@ class Popconfirm extends _baseComponent.default {
         }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
           className: `${prefixCls}-header-title`,
           "x-semi-prop": "title"
-        }, title) : null), /*#__PURE__*/_react.default.createElement(_button.default, {
+        }, title) : null), showCloseIcon ? /*#__PURE__*/_react.default.createElement(_button.default, {
           className: `${prefixCls}-btn-close`,
           icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
           size: "small",
           theme: 'borderless',
           type: cancelType,
           onClick: this.handleCancel
-        })), showContent ? /*#__PURE__*/_react.default.createElement("div", {
+        }) : null), showContent ? /*#__PURE__*/_react.default.createElement("div", {
           className: bodyCls,
           "x-semi-prop": "content"
         }, (0, _isFunction2.default)(content) ? content({
@@ -254,6 +255,7 @@ Popconfirm.propTypes = {
   okButtonProps: _propTypes.default.object,
   cancelButtonProps: _propTypes.default.object,
   stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  showCloseIcon: _propTypes.default.bool,
   zIndex: _propTypes.default.number,
   // private
   trigger: _propTypes.default.string,
@@ -272,6 +274,7 @@ Popconfirm.defaultProps = {
   cancelType: 'tertiary',
   prefixCls: _constants.cssClasses.PREFIX,
   zIndex: _constants.numbers.DEFAULT_Z_INDEX,
+  showCloseIcon: true,
   onCancel: _noop2.default,
   onConfirm: _noop2.default,
   onClickOutSide: _noop2.default

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

@@ -41,11 +41,12 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         showFilteredOnly: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<object>;
         treeData: PropTypes.Requireable<PropTypes.InferProps<{
-            key: PropTypes.Validator<string>;
+            key: PropTypes.Requireable<string>;
             value: PropTypes.Requireable<NonNullable<string | number>>;
             label: PropTypes.Requireable<any>;
             isLeaf: PropTypes.Requireable<boolean>;
         }>[]>;
+        keyMaps: PropTypes.Requireable<object>;
         treeDataSimpleJson: PropTypes.Requireable<object>;
         treeNodeFilterProp: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<NonNullable<string | number | object>>;

package/lib/cjs/tree/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {};
 exports.default = void 0;
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 var _get2 = _interopRequireDefault(require("lodash/get"));
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
@@ -162,17 +164,20 @@ class Tree extends _baseComponent.default {
     };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
-        data
-      } = treeNode;
-      const {
+        data,
         key
-      } = data;
+      } = treeNode;
       const treeNodeProps = this.foundation.getTreeNodeProps(key);
       if (!treeNodeProps) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_treeNode.default, Object.assign({}, treeNodeProps, data, {
-        key: key,
+      const {
+        keyMaps
+      } = this.props;
+      const props = (0, _pick2.default)(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon']);
+      const children = data[(0, _get2.default)(keyMaps, 'children', 'children')];
+      !(0, _isUndefined2.default)(children) && (props.children = children);
+      return /*#__PURE__*/_react.default.createElement(_treeNode.default, Object.assign({}, treeNodeProps, data, props, {
         data: data,
         style: (0, _isEmpty2.default)(style) ? {} : style
       }));
@@ -232,6 +237,9 @@ class Tree extends _baseComponent.default {
     const {
       prevProps
     } = prevState;
+    const {
+      keyMaps
+    } = props;
     let treeData;
     let keyEntities = prevState.keyEntities || {};
     let valueEntities = prevState.cachedKeyValuePairs || {};
@@ -258,7 +266,7 @@ class Tree extends _baseComponent.default {
     if (needUpdateTreeData || props.draggable && needUpdateData()) {
       treeData = props.treeData;
       newState.treeData = treeData;
-      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData, keyMaps);
       newState.keyEntities = Object.assign({}, entitiesMap.keyEntities);
       keyEntities = newState.keyEntities;
       newState.cachedKeyValuePairs = Object.assign({}, entitiesMap.valueEntities);
@@ -267,7 +275,7 @@ class Tree extends _baseComponent.default {
       // Convert treeDataSimpleJson to treeData
       treeData = (0, _treeUtil.convertJsonToData)(props.treeDataSimpleJson);
       newState.treeData = treeData;
-      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData, keyMaps);
       newState.keyEntities = Object.assign({}, entitiesMap.keyEntities);
       keyEntities = newState.keyEntities;
       newState.cachedKeyValuePairs = Object.assign({}, entitiesMap.valueEntities);
@@ -323,7 +331,7 @@ class Tree extends _baseComponent.default {
       }
       // Update flattenNodes
       if (treeData || newState.expandedKeys) {
-        const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
+        const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
         newState.flattenNodes = flattenNodes;
       }
     } else {
@@ -338,7 +346,8 @@ class Tree extends _baseComponent.default {
           filterProps: props.treeNodeFilterProp,
           showFilteredOnly: props.showFilteredOnly,
           keyEntities: newState.keyEntities,
-          prevExpandedKeys: [...prevState.filteredExpandedKeys]
+          prevExpandedKeys: [...prevState.filteredExpandedKeys],
+          keyMaps: keyMaps
         });
         newState.flattenNodes = filteredState.flattenNodes;
         newState.motionKeys = new Set([]);
@@ -371,7 +380,7 @@ class Tree extends _baseComponent.default {
             newState.motionType = motionType;
           }
         }
-        newState.flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, props.showFilteredOnly && prevState.filteredShownKeys);
+        newState.flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, keyMaps, props.showFilteredOnly && prevState.filteredShownKeys);
       }
     }
     // Handle single selection and multiple selection in controlled mode
@@ -382,26 +391,26 @@ class Tree extends _baseComponent.default {
       if (needUpdate('value')) {
         newState.selectedKeys = (0, _treeUtil.findKeysForValues)(
         // In both cases whether withObject is turned on, the value is standardized to string
-        (0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+        (0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), valueEntities, isMultiple);
       } else if (!prevProps && props.defaultValue) {
-        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
         if (props.value) {
-          newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
+          newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps) || '', valueEntities, isMultiple);
         }
       }
     } else {
       let checkedKeyValues;
       // Get the selected node during multiple selection
       if (needUpdate('value')) {
-        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), valueEntities, isMultiple);
       } else if (!prevProps && props.defaultValue) {
-        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
         if (props.value) {
-          checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
+          checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps) || [], valueEntities, isMultiple);
         } else {
           checkedKeyValues = (0, _treeUtil.updateKeys)(props.checkRelation === 'related' ? prevState.checkedKeys : prevState.realCheckedKeys, keyEntities);
         }
@@ -425,7 +434,7 @@ class Tree extends _baseComponent.default {
     }
     // update disableStrictly
     if (treeData && props.disableStrictly && props.checkRelation === 'related') {
-      newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
+      newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities, keyMaps);
     }
     return newState;
   }
@@ -703,11 +712,12 @@ Tree.propTypes = {
   showFilteredOnly: _propTypes.default.bool,
   style: _propTypes.default.object,
   treeData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
+    key: _propTypes.default.string,
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     label: _propTypes.default.any,
     isLeaf: _propTypes.default.bool
   })),
+  keyMaps: _propTypes.default.object,
   treeDataSimpleJson: _propTypes.default.object,
   treeNodeFilterProp: _propTypes.default.string,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),

package/lib/cjs/tree/interface.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import { BasicTreeProps, BasicExpandedOtherProps, BasicRenderFullLabelProps, BasicSearchRenderProps, BasicTreeInnerData, BasicKeyEntities, BasicKeyEntity, BasicTreeNodeProps, BasicFlattenNode, BasicTreeNodeData, BasicOnDragProps } from '@douyinfe/semi-foundation/lib/cjs/tree/foundation';
+import { BasicTreeProps, BasicExpandedOtherProps, BasicRenderFullLabelProps, BasicSearchRenderProps, BasicTreeInnerData, BasicKeyEntities, BasicKeyEntity, BasicTreeNodeProps, BasicFlattenNode, BasicTreeNodeData, BasicOnDragProps, KeyMapProps } from '@douyinfe/semi-foundation/lib/cjs/tree/foundation';
 export type Value = string | number | TreeNodeData | Array<TreeNodeData | number | string>;
 export interface DragTreeNode extends TreeNodeData {
     expanded: boolean;
@@ -49,6 +49,7 @@ export interface TreeProps extends BasicTreeProps {
     treeData?: TreeNodeData[];
     value?: Value;
     icon?: ReactNode;
+    keyMaps?: KeyMapProps;
     loadData?: (treeNode?: TreeNodeData) => Promise<void>;
     onChange?: (value?: Value) => void;
     onDoubleClick?: (e: MouseEvent, node: TreeNodeData) => void;

package/lib/cjs/tree/nodeList.js

@@ -12,13 +12,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const getTreeNodeKey = treeNode => {
-  const {
-    data
-  } = treeNode;
-  const {
-    key
-  } = data;
-  return key;
+  return treeNode.key;
 };
 class NodeList extends _react.PureComponent {
   constructor(props) {

package/lib/cjs/treeSelect/index.d.ts

@@ -29,7 +29,7 @@ export type RenderSelectedItemInMultiple = (treeNode: TreeNodeData, otherProps:
     content: React.ReactNode;
 };
 export type RenderSelectedItem = RenderSelectedItemInSingle | RenderSelectedItemInMultiple;
-export type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand';
+export type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand' | 'keyMaps';
 /**
 * Type definition description:
 * TreeSelectProps inherits some properties from BasicTreeSelectProps (from foundation) and TreeProps (from semi-ui-react).
@@ -136,9 +136,10 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         showFilteredOnly: PropTypes.Requireable<boolean>;
         motionExpand: PropTypes.Requireable<boolean>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        keyMaps: PropTypes.Requireable<object>;
         leafOnly: PropTypes.Requireable<boolean>;
         treeData: PropTypes.Requireable<PropTypes.InferProps<{
-            key: PropTypes.Validator<string>;
+            key: PropTypes.Requireable<string>;
             value: PropTypes.Requireable<NonNullable<string | number>>;
             label: PropTypes.Requireable<any>;
         }>[]>;

package/lib/cjs/treeSelect/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
 var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
@@ -172,11 +173,13 @@ class TreeSelect extends _baseComponent.default {
         disableStrictly,
         size,
         checkRelation,
-        renderSelectedItem: propRenderSelectedItem
+        renderSelectedItem: propRenderSelectedItem,
+        keyMaps
       } = this.props;
+      const realLabelName = (0, _get2.default)(keyMaps, 'label', treeNodeLabelProp);
       const renderSelectedItem = (0, _isFunction2.default)(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
         isRenderInTag: true,
-        content: (0, _get2.default)(item, treeNodeLabelProp, null)
+        content: (0, _get2.default)(item, realLabelName, null)
       });
       let renderKeys = [];
       if (checkRelation === 'related') {
@@ -186,7 +189,7 @@ class TreeSelect extends _baseComponent.default {
       }
       const tagList = [];
       renderKeys.forEach((key, index) => {
-        const item = keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
+        const item = keyEntities[key] && keyEntities[key].key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
         const onClose = (tagContent, e) => {
           if (e && typeof e.preventDefault === 'function') {
             // make sure that tag will not hidden immediately in controlled mode
@@ -197,7 +200,7 @@ class TreeSelect extends _baseComponent.default {
         const {
           content,
           isRenderInTag
-        } = item && treeNodeLabelProp in item ? renderSelectedItem(item, {
+        } = item ? renderSelectedItem(item, {
           index,
           onClose
         }) : {};
@@ -460,11 +463,13 @@ class TreeSelect extends _baseComponent.default {
         disabled,
         disableStrictly,
         renderSelectedItem: propRenderSelectedItem,
-        treeNodeLabelProp
+        treeNodeLabelProp,
+        keyMaps
       } = this.props;
+      const realLabelName = (0, _get2.default)(keyMaps, 'label', treeNodeLabelProp);
       const keyList = (0, _treeUtil.normalizeKeyList)([key], keyEntities, leafOnly, true);
-      const nodes = keyList.map(i => keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
-      const value = (0, _treeUtil.getValueOrKey)(nodes);
+      const nodes = keyList.map(i => keyEntities[key] && keyEntities[key].key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
+      const value = (0, _treeUtil.getValueOrKey)(nodes, keyMaps);
       const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
         [`${prefixcls}-selection-tag-disabled`]: disabled
       });
@@ -487,13 +492,13 @@ class TreeSelect extends _baseComponent.default {
       const item = nodes[0];
       const renderSelectedItem = (0, _isFunction2.default)(propRenderSelectedItem) ? propRenderSelectedItem : selectedItem => ({
         isRenderInTag: true,
-        content: (0, _get2.default)(selectedItem, treeNodeLabelProp, null)
+        content: (0, _get2.default)(selectedItem, realLabelName, null)
       });
       if ((0, _isFunction2.default)(renderSelectedItem)) {
         const {
           content,
           isRenderInTag
-        } = item && treeNodeLabelProp in item ? renderSelectedItem(item, {
+        } = item ? renderSelectedItem(item, {
           index: idx,
           onClose
         }) : {};
@@ -693,17 +698,20 @@ class TreeSelect extends _baseComponent.default {
     };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
-        data
-      } = treeNode;
-      const {
+        data,
         key
-      } = data;
+      } = treeNode;
       const treeNodeProps = this.foundation.getTreeNodeProps(key);
       if (!treeNodeProps) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_treeNode.default, Object.assign({}, treeNodeProps, data, {
-        key: key,
+      const props = (0, _pick2.default)(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon']);
+      const {
+        keyMaps
+      } = this.props;
+      const children = data[(0, _get2.default)(keyMaps, 'children', 'children')];
+      !(0, _isUndefined2.default)(children) && (props.children = children);
+      return /*#__PURE__*/_react.default.createElement(_treeNode.default, Object.assign({}, treeNodeProps, data, props, {
         data: data,
         style: style
       }));
@@ -887,6 +895,9 @@ class TreeSelect extends _baseComponent.default {
       prevProps,
       rePosKey
     } = prevState;
+    const {
+      keyMaps
+    } = props;
     const needUpdate = name => !prevProps && name in props || prevProps && !(0, _isEqual2.default)(prevProps[name], props[name]);
     let treeData;
     const withObject = props.onChangeWithObject;
@@ -901,7 +912,7 @@ class TreeSelect extends _baseComponent.default {
     if (needUpdateTreeData) {
       treeData = props.treeData;
       newState.treeData = treeData;
-      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData, keyMaps);
       newState.keyEntities = Object.assign({}, entitiesMap.keyEntities);
       keyEntities = newState.keyEntities;
       newState.cachedKeyValuePairs = Object.assign({}, entitiesMap.valueEntities);
@@ -932,26 +943,26 @@ class TreeSelect extends _baseComponent.default {
     } else if (!prevProps && props.defaultExpandedKeys) {
       newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
     } else if (!prevProps && props.defaultValue) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), keyEntities, props.multiple, valueEntities);
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
     } else if (!prevProps && props.value) {
-      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), keyEntities, props.multiple, valueEntities);
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
     }
     // flattenNodes
     if (treeData || needUpdateExpandedKeys) {
-      const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
+      const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
       newState.flattenNodes = flattenNodes;
     }
     // selectedKeys: single mode controlled
     const isMultiple = props.multiple;
     if (!isMultiple) {
       if (needUpdate('value')) {
-        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), valueEntities, isMultiple);
       } else if (!prevProps && props.defaultValue) {
-        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
         if (props.value) {
-          newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
+          newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps) || '', valueEntities, isMultiple);
         } else {
           newState.selectedKeys = (0, _treeUtil.updateKeys)(prevState.selectedKeys, keyEntities);
         }
@@ -960,13 +971,13 @@ class TreeSelect extends _baseComponent.default {
       // checkedKeys: multiple mode controlled || data changed
       let checkedKeyValues;
       if (needUpdate('value')) {
-        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), valueEntities, isMultiple);
       } else if (!prevProps && props.defaultValue) {
-        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject, keyMaps), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
         if (props.value) {
-          checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
+          checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps) || [], valueEntities, isMultiple);
         } else {
           checkedKeyValues = (0, _treeUtil.updateKeys)(props.checkRelation === 'related' ? prevState.checkedKeys : prevState.realCheckedKeys, keyEntities);
         }
@@ -994,7 +1005,7 @@ class TreeSelect extends _baseComponent.default {
     }
     // ================ disableStrictly =================
     if (treeData && props.disableStrictly && props.checkRelation === 'related') {
-      newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
+      newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities, keyMaps);
     }
     return newState;
   }
@@ -1238,9 +1249,10 @@ TreeSelect.propTypes = {
   showFilteredOnly: _propTypes.default.bool,
   motionExpand: _propTypes.default.bool,
   emptyContent: _propTypes.default.node,
+  keyMaps: _propTypes.default.object,
   leafOnly: _propTypes.default.bool,
   treeData: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
+    key: _propTypes.default.string,
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     label: _propTypes.default.any
   })),

package/lib/es/_base/base.css

@@ -458,6 +458,26 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
+  --semi-color-data-0:rgba(22, 100, 255, 1);
+  --semi-color-data-1:rgba(178, 207, 255, 1);
+  --semi-color-data-2:rgba(26, 198, 255, 1);
+  --semi-color-data-3:rgba(148, 239, 255, 1);
+  --semi-color-data-4:rgba(255, 138, 0, 1);
+  --semi-color-data-5:rgba(255, 206, 122, 1);
+  --semi-color-data-6:rgba(60, 199, 128, 1);
+  --semi-color-data-7:rgba(185, 237, 205, 1);
+  --semi-color-data-8:rgba(116, 66, 212, 1);
+  --semi-color-data-9:rgba(221, 197, 250, 1);
+  --semi-color-data-10:rgba(255, 196, 0, 1);
+  --semi-color-data-11:rgba(250, 232, 120, 1);
+  --semi-color-data-12:rgba(48, 77, 119, 1);
+  --semi-color-data-13:rgba(139, 149, 158, 1);
+  --semi-color-data-14:rgba(180, 141, 235, 1);
+  --semi-color-data-15:rgba(239, 227, 255, 1);
+  --semi-color-data-16:rgba(0, 148, 136, 1);
+  --semi-color-data-17:rgba(89, 186, 168, 1);
+  --semi-color-data-18:rgba(255, 125, 218, 1);
+  --semi-color-data-19:rgba(255, 207, 238, 1);
 }
 
 body[theme-mode=dark], body .semi-always-dark {
@@ -548,6 +568,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-full: 9999px;
   --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
+  --semi-color-data-0:rgba(22, 100, 255, 1);
+  --semi-color-data-1:rgba(178, 207, 255, 1);
+  --semi-color-data-2:rgba(26, 198, 255, 1);
+  --semi-color-data-3:rgba(148, 239, 255, 1);
+  --semi-color-data-4:rgba(255, 138, 0, 1);
+  --semi-color-data-5:rgba(255, 206, 122, 1);
+  --semi-color-data-6:rgba(60, 199, 128, 1);
+  --semi-color-data-7:rgba(185, 237, 205, 1);
+  --semi-color-data-8:rgba(116, 66, 212, 1);
+  --semi-color-data-9:rgba(221, 197, 250, 1);
+  --semi-color-data-10:rgba(255, 196, 0, 1);
+  --semi-color-data-11:rgba(250, 232, 120, 1);
+  --semi-color-data-12:rgba(48, 77, 119, 1);
+  --semi-color-data-13:rgba(139, 149, 158, 1);
+  --semi-color-data-14:rgba(180, 141, 235, 1);
+  --semi-color-data-15:rgba(239, 227, 255, 1);
+  --semi-color-data-16:rgba(0, 148, 136, 1);
+  --semi-color-data-17:rgba(89, 186, 168, 1);
+  --semi-color-data-18:rgba(255, 125, 218, 1);
+  --semi-color-data-19:rgba(255, 207, 238, 1);
 }
 
 .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {

package/lib/es/button/Button.js

@@ -50,7 +50,8 @@ export default class Button extends PureComponent {
         [`${prefixCls}-light`]: theme === 'light',
         [`${prefixCls}-block`]: block,
         [`${prefixCls}-circle`]: circle,
-        [`${prefixCls}-borderless`]: theme === 'borderless'
+        [`${prefixCls}-borderless`]: theme === 'borderless',
+        [`${prefixCls}-${type}-disabled`]: disabled && type
       }, className),
       type: htmlType,
       'aria-disabled': disabled

package/lib/es/collapse/item.d.ts

@@ -11,6 +11,7 @@ export interface CollapsePanelProps {
     style?: CSSProperties;
     showArrow?: boolean;
     disabled?: boolean;
+    onMotionEnd?: () => void;
 }
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType>;