@douyinfe/semi-ui 2.48.0-alpha.0 → 2.48.0

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

@@ -10,12 +10,14 @@ export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
     focusVisible: boolean;
+    scale: number;
 }
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     static defaultProps: {
         size: string;
         color: string;
         shape: string;
+        gap: number;
         onClick: typeof noop;
         onMouseEnter: typeof noop;
         onMouseLeave: typeof noop;
@@ -29,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         hoverMask: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
+        gap: PropTypes.Requireable<number>;
         imgAttr: PropTypes.Requireable<object>;
         src: PropTypes.Requireable<string>;
         srcSet: PropTypes.Requireable<string>;
@@ -39,6 +42,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
     foundation: AvatarFoundation;
+    avatarRef: React.RefObject<HTMLElement | null>;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;

package/lib/cjs/avatar/index.js

@@ -95,8 +95,12 @@ class Avatar extends _baseComponent.default {
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
+        const stringStyle = {
+          transform: `scale(${this.state.scale})`
+        };
         content = /*#__PURE__*/_react.default.createElement("span", {
-          className: `${prefixCls}-content`
+          className: `${prefixCls}-content`,
+          style: stringStyle
         }, /*#__PURE__*/_react.default.createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -106,13 +110,15 @@ class Avatar extends _baseComponent.default {
     this.state = {
       isImgExist: true,
       hoverContent: '',
-      focusVisible: false
+      focusVisible: false,
+      scale: 1
     };
     this.onEnter = this.onEnter.bind(this);
     this.onLeave = this.onLeave.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.avatarRef = /*#__PURE__*/_react.default.createRef();
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -149,6 +155,15 @@ class Avatar extends _baseComponent.default {
         this.setState({
           focusVisible
         });
+      },
+      setScale: scale => {
+        this.setState({
+          scale
+        });
+      },
+      getAvatarNode: () => {
+        var _a;
+        return (_a = this.avatarRef) === null || _a === void 0 ? void 0 : _a.current;
       }
     });
   }
@@ -176,6 +191,9 @@ class Avatar extends _baseComponent.default {
         });
       };
     }
+    if (typeof this.props.children === "string" && this.props.children !== prevProps.children) {
+      this.foundation.changeScale();
+    }
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -219,9 +237,10 @@ class Avatar extends _baseComponent.default {
         src,
         srcSet,
         style,
-        alt
+        alt,
+        gap
       } = _a,
-      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
+      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
     const {
       isImgExist,
       hoverContent,
@@ -245,7 +264,8 @@ class Avatar extends _baseComponent.default {
       onClick: onClick,
       onMouseEnter: this.onEnter,
       onMouseLeave: this.onLeave,
-      role: 'listitem'
+      role: 'listitem',
+      ref: this.avatarRef
     }), this.getContent(), hoverRender);
   }
 }
@@ -254,6 +274,7 @@ Avatar.defaultProps = {
   size: 'medium',
   color: 'grey',
   shape: 'circle',
+  gap: 3,
   onClick: _function.noop,
   onMouseEnter: _function.noop,
   onMouseLeave: _function.noop
@@ -266,6 +287,7 @@ Avatar.propTypes = {
   hoverMask: _propTypes.default.node,
   className: _propTypes.default.string,
   style: _propTypes.default.object,
+  gap: _propTypes.default.number,
   imgAttr: _propTypes.default.object,
   src: _propTypes.default.string,
   srcSet: _propTypes.default.string,

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

@@ -12,6 +12,7 @@ export interface AvatarProps extends BaseProps {
     src?: string;
     srcSet?: string;
     alt?: string;
+    gap?: number;
     onError?: React.MouseEventHandler;
     onClick?: React.MouseEventHandler;
     onMouseEnter?: React.MouseEventHandler;

package/lib/cjs/slider/index.js

@@ -82,6 +82,7 @@ class Slider extends _baseComponent.default {
       });
       const handleContents = !range ? /*#__PURE__*/_react.default.createElement(_index.default, {
         content: tipChildren.min,
+        showArrow: this.props.showArrow,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
@@ -280,7 +281,7 @@ class Slider extends _baseComponent.default {
           [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ?
+        const dotDOM =
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         _react.default.createElement("span", {
@@ -290,11 +291,17 @@ class Slider extends _baseComponent.default {
           style: {
             [stylePos]: `calc(${markPercent * 100}% - 2px)`
           }
-        }) : null;
+        });
+        return activeResult ? this.props.tooltipOnMark ? /*#__PURE__*/_react.default.createElement(_index.default, {
+          content: marks[mark]
+        }, dotDOM) : dotDOM : null;
       })) : null;
       return labelContent;
     };
     this.renderLabel = () => {
+      if (!this.props.showMarkLabel) {
+        return null;
+      }
       const {
         min,
         max,
@@ -624,6 +631,7 @@ Slider.propTypes = {
   // allowClear: PropTypes.bool,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.array]),
   disabled: _propTypes.default.bool,
+  showMarkLabel: _propTypes.default.bool,
   included: _propTypes.default.bool,
   marks: _propTypes.default.object,
   max: _propTypes.default.number,
@@ -636,7 +644,9 @@ Slider.propTypes = {
   onAfterChange: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onMouseUp: _propTypes.default.func,
+  tooltipOnMark: _propTypes.default.bool,
   tooltipVisible: _propTypes.default.bool,
+  showArrow: _propTypes.default.bool,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   showBoundary: _propTypes.default.bool,
@@ -647,10 +657,13 @@ Slider.propTypes = {
 Slider.defaultProps = {
   // allowClear: false,
   disabled: false,
+  showMarkLabel: true,
+  tooltipOnMark: false,
   included: true,
   max: 100,
   min: 0,
   range: false,
+  showArrow: true,
   step: 1,
   tipFormatter: value => value,
   vertical: false,

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

@@ -190,6 +190,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
+    _flattenNodes: TreeState['flattenNodes'];
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
@@ -246,7 +247,6 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     };
     getTreeNodeKey: (treeNode: TreeNodeData) => string;
     handlePopoverClose: (isVisible: any) => void;
-    afterClose: () => void;
     renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
     itemKey: (index: number, data: Record<string, any>) => any;
     renderNodeList: () => JSX.Element;

package/lib/cjs/treeSelect/index.js

@@ -689,27 +689,13 @@ class TreeSelect extends _baseComponent.default {
         searchAutoFocus,
         searchPosition
       } = this.props;
-      // 将 inputValue 清空，如果有选中值的话，选中项能够快速回显
-      // Clear the inputValue. If there is a selected value, the selected item can be quickly echoed.
-      if (isVisible === false && filterTreeNode) {
-        this.foundation.clearInputValue();
+      if (isVisible === false && Boolean(filterTreeNode)) {
+        this.foundation.clearInput();
       }
       if (filterTreeNode && searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN && isVisible && searchAutoFocus) {
         this.foundation.focusInput(true);
       }
     };
-    this.afterClose = () => {
-      // flattenNode 的变化将导致弹出层面板中的选项数目变化
-      // 在弹层完全收起之后，再通过 clearInput 重新计算 state 中的 expandedKey， flattenNode
-      // 防止在弹出层未收起时弹层面板中选项数目变化导致视觉上出现弹层闪动问题
-      // Changes to flattenNode will cause the number of options in the popup panel to change
-      // After the pop-up layer is completely closed, recalculate the expandedKey and flattenNode in the state through clearInput.
-      // Prevent the pop-up layer from flickering visually due to changes in the number of options in the pop-up panel when the pop-up layer is not collapsed.
-      const {
-        filterTreeNode
-      } = this.props;
-      filterTreeNode && this.foundation.clearInput();
-    };
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
         data,
@@ -742,7 +728,6 @@ class TreeSelect extends _baseComponent.default {
     this.renderNodeList = () => {
       const {
         flattenNodes,
-        cachedFlattenNodes,
         motionKeys,
         motionType,
         filteredKeys
@@ -758,7 +743,7 @@ class TreeSelect extends _baseComponent.default {
       if (!virtualize || (0, _isEmpty2.default)(virtualize)) {
         return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
           flattenNodes: flattenNodes,
-          flattenList: cachedFlattenNodes,
+          flattenList: this._flattenNodes,
           motionKeys: motionExpand ? motionKeys : new Set([]),
           motionType: motionType,
           // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
@@ -877,7 +862,6 @@ class TreeSelect extends _baseComponent.default {
       keyEntities: {},
       treeData: [],
       flattenNodes: [],
-      cachedFlattenNodes: undefined,
       selectedKeys: [],
       checkedKeys: new Set(),
       halfCheckedKeys: new Set(),
@@ -907,7 +891,6 @@ class TreeSelect extends _baseComponent.default {
     };
   }
   static getDerivedStateFromProps(props, prevState) {
-    var _a;
     const {
       prevProps,
       rePosKey
@@ -925,8 +908,6 @@ class TreeSelect extends _baseComponent.default {
     };
     const needUpdateTreeData = needUpdate('treeData');
     const needUpdateExpandedKeys = needUpdate('expandedKeys');
-    const isExpandControlled = ('expandedKeys' in props);
-    const isSearching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     // TreeNode
     if (needUpdateTreeData) {
       treeData = props.treeData;
@@ -945,97 +926,31 @@ class TreeSelect extends _baseComponent.default {
       }
     }
     const expandAllWhenDataChange = needUpdateTreeData && props.expandAll;
-    if (!isSearching) {
-      // expandedKeys
-      if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
-        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-        // only show animation when treeData does not change
-        if (prevProps && props.motion && !treeData) {
-          const {
-            motionKeys,
-            motionType
-          } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
-          newState.motionKeys = new Set(motionKeys);
-          newState.motionType = motionType;
-          if (motionType === 'hide') {
-            // cache flatten nodes: expandedKeys changed may not be triggered by interaction
-            newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
-          }
-        }
-      } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
-        newState.expandedKeys = new Set(Object.keys(keyEntities));
-      } 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, keyMaps), keyEntities, props.multiple, valueEntities);
-      } else if (!prevProps && props.value) {
-        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject, keyMaps), keyEntities, props.multiple, valueEntities);
-      } else if (!isExpandControlled && needUpdateTreeData && props.value) {
-        // 当 treeData 已经设置具体的值，并且设置了 props.loadData ，则认为 treeData 的更新是因为 loadData 导致的
-        // 如果是因为 loadData 导致 treeData改变， 此时在这里重新计算 key 会导致为未选中的展开项目被收起
-        // 所以此时不需要重新计算 expandedKeys，因为在点击展开按钮时候已经把被展开的项添加到 expandedKeys 中
-        // When treeData has a specific value and props.loadData is set, it is considered that the update of treeData is caused by loadData
-        // If the treeData is changed because of loadData, recalculating the key here will cause the unselected expanded items to be collapsed
-        // So there is no need to recalculate expandedKeys at this time, because the expanded item has been added to expandedKeys when the expand button is clicked
-        if (!(prevState.treeData && ((_a = prevState.treeData) === null || _a === void 0 ? void 0 : _a.length) > 0 && props.loadData)) {
-          newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
-        }
-      }
-      if (!newState.expandedKeys) {
-        delete newState.expandedKeys;
-      }
-      if (treeData || newState.expandedKeys) {
-        const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, keyMaps);
-        newState.flattenNodes = flattenNodes;
-      }
-    } else {
-      let filteredState;
-      // treeData changed while searching
-      if (treeData) {
-        // Get filter data
-        filteredState = (0, _treeUtil.filterTreeData)({
-          treeData,
-          inputValue: prevState.inputValue,
-          filterTreeNode: props.filterTreeNode,
-          filterProps: props.treeNodeFilterProp,
-          showFilteredOnly: props.showFilteredOnly,
-          keyEntities: newState.keyEntities,
-          prevExpandedKeys: [...prevState.filteredExpandedKeys],
-          keyMaps: keyMaps
-        });
-        newState.flattenNodes = filteredState.flattenNodes;
-        newState.motionKeys = new Set([]);
-        newState.filteredKeys = filteredState.filteredKeys;
-        newState.filteredShownKeys = filteredState.filteredShownKeys;
-        newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
-      }
-      // expandedKeys changed while searching
-      if (props.expandedKeys) {
-        newState.filteredExpandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-        if (prevProps && props.motion) {
-          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]);
-          // only show animation when treeData does not change
-          if (!treeData) {
-            const motionResult = (0, _treeUtil.calcMotionKeys)(prevKeys, newState.filteredExpandedKeys, keyEntities);
-            let {
-              motionKeys
-            } = motionResult;
-            const {
-              motionType
-            } = motionResult;
-            if (props.showFilteredOnly) {
-              motionKeys = motionKeys.filter(key => prevState.filteredShownKeys.has(key));
-            }
-            if (motionType === 'hide') {
-              // cache flatten nodes: expandedKeys changed may not be triggered by interaction
-              newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
-            }
-            newState.motionKeys = new Set(motionKeys);
-            newState.motionType = motionType;
-          }
-        }
-        newState.flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, keyMaps, props.showFilteredOnly && prevState.filteredShownKeys);
+    // expandedKeys
+    if (needUpdateExpandedKeys || prevProps && needUpdate('autoExpandParent')) {
+      newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+      // only show animation when treeData does not change
+      if (prevProps && props.motion && !treeData) {
+        const {
+          motionKeys,
+          motionType
+        } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+        newState.motionKeys = new Set(motionKeys);
+        newState.motionType = motionType;
       }
+    } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+      newState.expandedKeys = new Set(Object.keys(keyEntities));
+    } 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, keyMaps), keyEntities, props.multiple, valueEntities);
+    } else if (!prevProps && props.value) {
+      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, keyMaps);
+      newState.flattenNodes = flattenNodes;
     }
     // selectedKeys: single mode controlled
     const isMultiple = props.multiple;
@@ -1142,9 +1057,7 @@ class TreeSelect extends _baseComponent.default {
         this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
-        this.setState({
-          cachedFlattenNodes: bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : undefined
-        });
+        this._flattenNodes = bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : null;
       },
       notifyLoad: (newLoadedKeys, data) => {
         const {
@@ -1289,8 +1202,7 @@ class TreeSelect extends _baseComponent.default {
       autoAdjustOverflow: autoAdjustOverflow,
       mouseLeaveDelay: mouseLeaveDelay,
       mouseEnterDelay: mouseEnterDelay,
-      onVisibleChange: this.handlePopoverClose,
-      afterClose: this.afterClose
+      onVisibleChange: this.handlePopoverClose
     }, selection);
   }
 }

package/lib/es/avatar/index.d.ts

@@ -10,12 +10,14 @@ export interface AvatarState {
     isImgExist: boolean;
     hoverContent: React.ReactNode;
     focusVisible: boolean;
+    scale: number;
 }
 export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
     static defaultProps: {
         size: string;
         color: string;
         shape: string;
+        gap: number;
         onClick: typeof noop;
         onMouseEnter: typeof noop;
         onMouseLeave: typeof noop;
@@ -29,6 +31,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         hoverMask: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
+        gap: PropTypes.Requireable<number>;
         imgAttr: PropTypes.Requireable<object>;
         src: PropTypes.Requireable<string>;
         srcSet: PropTypes.Requireable<string>;
@@ -39,6 +42,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
     };
     foundation: AvatarFoundation;
+    avatarRef: React.RefObject<HTMLElement | null>;
     constructor(props: AvatarProps);
     get adapter(): AvatarAdapter<AvatarProps, AvatarState>;
     componentDidMount(): void;

package/lib/es/avatar/index.js

@@ -76,8 +76,12 @@ export default class Avatar extends BaseComponent {
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
+        const stringStyle = {
+          transform: `scale(${this.state.scale})`
+        };
         content = /*#__PURE__*/React.createElement("span", {
-          className: `${prefixCls}-content`
+          className: `${prefixCls}-content`,
+          style: stringStyle
         }, /*#__PURE__*/React.createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -87,13 +91,15 @@ export default class Avatar extends BaseComponent {
     this.state = {
       isImgExist: true,
       hoverContent: '',
-      focusVisible: false
+      focusVisible: false,
+      scale: 1
     };
     this.onEnter = this.onEnter.bind(this);
     this.onLeave = this.onLeave.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.avatarRef = /*#__PURE__*/React.createRef();
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -130,6 +136,15 @@ export default class Avatar extends BaseComponent {
         this.setState({
           focusVisible
         });
+      },
+      setScale: scale => {
+        this.setState({
+          scale
+        });
+      },
+      getAvatarNode: () => {
+        var _a;
+        return (_a = this.avatarRef) === null || _a === void 0 ? void 0 : _a.current;
       }
     });
   }
@@ -157,6 +172,9 @@ export default class Avatar extends BaseComponent {
         });
       };
     }
+    if (typeof this.props.children === "string" && this.props.children !== prevProps.children) {
+      this.foundation.changeScale();
+    }
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -200,9 +218,10 @@ export default class Avatar extends BaseComponent {
         src,
         srcSet,
         style,
-        alt
+        alt,
+        gap
       } = _a,
-      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
+      others = __rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
     const {
       isImgExist,
       hoverContent,
@@ -226,7 +245,8 @@ export default class Avatar extends BaseComponent {
       onClick: onClick,
       onMouseEnter: this.onEnter,
       onMouseLeave: this.onLeave,
-      role: 'listitem'
+      role: 'listitem',
+      ref: this.avatarRef
     }), this.getContent(), hoverRender);
   }
 }
@@ -234,6 +254,7 @@ Avatar.defaultProps = {
   size: 'medium',
   color: 'grey',
   shape: 'circle',
+  gap: 3,
   onClick: noop,
   onMouseEnter: noop,
   onMouseLeave: noop
@@ -246,6 +267,7 @@ Avatar.propTypes = {
   hoverMask: PropTypes.node,
   className: PropTypes.string,
   style: PropTypes.object,
+  gap: PropTypes.number,
   imgAttr: PropTypes.object,
   src: PropTypes.string,
   srcSet: PropTypes.string,

package/lib/es/avatar/interface.d.ts

@@ -12,6 +12,7 @@ export interface AvatarProps extends BaseProps {
     src?: string;
     srcSet?: string;
     alt?: string;
+    gap?: number;
     onError?: React.MouseEventHandler;
     onClick?: React.MouseEventHandler;
     onMouseEnter?: React.MouseEventHandler;

package/lib/es/slider/index.js

@@ -75,6 +75,7 @@ export default class Slider extends BaseComponent {
       });
       const handleContents = !range ? /*#__PURE__*/React.createElement(Tooltip, {
         content: tipChildren.min,
+        showArrow: this.props.showArrow,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
@@ -273,7 +274,7 @@ export default class Slider extends BaseComponent {
           [`${prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ?
+        const dotDOM =
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         React.createElement("span", {
@@ -283,11 +284,17 @@ export default class Slider extends BaseComponent {
           style: {
             [stylePos]: `calc(${markPercent * 100}% - 2px)`
           }
-        }) : null;
+        });
+        return activeResult ? this.props.tooltipOnMark ? /*#__PURE__*/React.createElement(Tooltip, {
+          content: marks[mark]
+        }, dotDOM) : dotDOM : null;
       })) : null;
       return labelContent;
     };
     this.renderLabel = () => {
+      if (!this.props.showMarkLabel) {
+        return null;
+      }
       const {
         min,
         max,
@@ -616,6 +623,7 @@ Slider.propTypes = {
   // allowClear: PropTypes.bool,
   defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
   disabled: PropTypes.bool,
+  showMarkLabel: PropTypes.bool,
   included: PropTypes.bool,
   marks: PropTypes.object,
   max: PropTypes.number,
@@ -628,7 +636,9 @@ Slider.propTypes = {
   onAfterChange: PropTypes.func,
   onChange: PropTypes.func,
   onMouseUp: PropTypes.func,
+  tooltipOnMark: PropTypes.bool,
   tooltipVisible: PropTypes.bool,
+  showArrow: PropTypes.bool,
   style: PropTypes.object,
   className: PropTypes.string,
   showBoundary: PropTypes.bool,
@@ -639,10 +649,13 @@ Slider.propTypes = {
 Slider.defaultProps = {
   // allowClear: false,
   disabled: false,
+  showMarkLabel: true,
+  tooltipOnMark: false,
   included: true,
   max: 100,
   min: 0,
   range: false,
+  showArrow: true,
   step: 1,
   tipFormatter: value => value,
   vertical: false,

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

@@ -190,6 +190,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     triggerRef: React.RefObject<HTMLDivElement>;
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
+    _flattenNodes: TreeState['flattenNodes'];
     onNodeClick: any;
     onNodeDoubleClick: any;
     onMotionEnd: any;
@@ -246,7 +247,6 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     };
     getTreeNodeKey: (treeNode: TreeNodeData) => string;
     handlePopoverClose: (isVisible: any) => void;
-    afterClose: () => void;
     renderTreeNode: (treeNode: FlattenNode, ind: number, style: React.CSSProperties) => JSX.Element;
     itemKey: (index: number, data: Record<string, any>) => any;
     renderNodeList: () => JSX.Element;