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

package/lib/cjs/form/hoc/withField.js

@@ -358,6 +358,7 @@ function withField(Component, opts) {
       validateRef.current = validate;
     }, [rules, validate]);
     useIsomorphicEffect(() => {
+      isUnmounted.current = false;
       // exec validate once when trigger include 'mount'
       if (validateOnMount) {
         fieldValidate(value);

package/lib/cjs/form/hooks/useFieldApi.js

@@ -12,6 +12,7 @@ const buildFieldApi = (formApi, field) => ({
   getTouched: () => formApi.getTouched(field),
   setTouched: isTouched => formApi.setTouched(field, isTouched),
   getValue: () => formApi.getValue(field),
+  // @ts-ignore
   setValue: value => formApi.setValue(field, value)
 });
 function useFieldApi(field) {

package/lib/cjs/index.d.ts

@@ -85,3 +85,4 @@ export { default as LocaleConsumer } from './locale/localeConsumer';
 export { Form, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi, withField, ArrayField, } from './form';
 export { default as Image } from './image';
 export { Preview as ImagePreview } from './image';
+export { default as semiGlobal } from "./_utils/semi-global";

package/lib/cjs/index.js

@@ -531,6 +531,12 @@ Object.defineProperty(exports, "Upload", {
     return _upload.default;
   }
 });
+Object.defineProperty(exports, "semiGlobal", {
+  enumerable: true,
+  get: function () {
+    return _semiGlobal.default;
+  }
+});
 Object.defineProperty(exports, "useFieldApi", {
   enumerable: true,
   get: function () {
@@ -658,6 +664,7 @@ var _localeProvider = _interopRequireDefault(require("./locale/localeProvider"))
 var _localeConsumer = _interopRequireDefault(require("./locale/localeConsumer"));
 var _form = require("./form");
 var _image = _interopRequireWildcard(require("./image"));
+var _semiGlobal = _interopRequireDefault(require("./_utils/semi-global"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 }; }

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

@@ -15,6 +15,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private maxHanleEl;
     private dragging;
     private eventListenerSet;
+    private handleDownEventListenerSet;
     foundation: SliderFoundation;
     constructor(props: SliderProps);
     get adapter(): SliderAdapter;

package/lib/cjs/slider/index.js

@@ -109,9 +109,6 @@ class Slider extends _baseComponent.default {
         onMouseLeave: () => {
           this.foundation.onHandleLeave();
         },
-        onMouseUp: e => {
-          this.foundation.onHandleUp(e);
-        },
         onKeyUp: e => {
           this.foundation.onHandleUp(e);
         },
@@ -168,9 +165,6 @@ class Slider extends _baseComponent.default {
         onMouseLeave: () => {
           this.foundation.onHandleLeave();
         },
-        onMouseUp: e => {
-          this.foundation.onHandleUp(e);
-        },
         onKeyUp: e => {
           this.foundation.onHandleUp(e);
         },
@@ -224,9 +218,6 @@ class Slider extends _baseComponent.default {
         onMouseLeave: () => {
           this.foundation.onHandleLeave();
         },
-        onMouseUp: e => {
-          this.foundation.onHandleUp(e);
-        },
         onKeyUp: e => {
           this.foundation.onHandleUp(e);
         },
@@ -387,6 +378,7 @@ class Slider extends _baseComponent.default {
     this.dragging = [false, false];
     this.foundation = new _foundation.default(this.adapter);
     this.eventListenerSet = new Set();
+    this.handleDownEventListenerSet = new Set();
   }
   get adapter() {
     var _this = this;
@@ -477,9 +469,9 @@ class Slider extends _baseComponent.default {
       getMinHandleEl: () => this.minHanleEl.current,
       getMaxHandleEl: () => this.maxHanleEl.current,
       onHandleDown: e => {
-        this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
-        this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false);
-        this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
+        this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false));
+        this.handleDownEventListenerSet.add(this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false));
+        this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false));
       },
       onHandleMove: function (mousePos, isMin) {
         let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _noop2.default;
@@ -546,8 +538,8 @@ class Slider extends _baseComponent.default {
         (_b = (_a = this.props).onMouseUp) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         e.stopPropagation();
         e.preventDefault();
-        document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
-        document.body.removeEventListener('mouseup', this.foundation.onHandleUp, false);
+        Array.from(this.handleDownEventListenerSet).forEach(clear => clear());
+        this.handleDownEventListenerSet.clear();
       },
       onHandleUpAfter: () => {
         const {

package/lib/cjs/tabs/TabBar.d.ts

@@ -30,11 +30,14 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     };
     constructor(props: TabBarProps);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     renderIcon(icon: ReactNode): ReactNode;
     renderExtra(): ReactNode;
     handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
     handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
     renderTabItem: (panel: PlainTab) => ReactNode;
+    scrollTabItemIntoViewByKey: (key: string, logicalPosition?: ScrollLogicalPosition) => void;
+    scrollActiveTabItemIntoView: (logicalPosition?: ScrollLogicalPosition) => void;
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
     renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;

package/lib/cjs/tabs/TabBar.js

@@ -29,18 +29,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 class TabBar extends _react.default.Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.handleItemClick = (itemKey, e) => {
       this.props.onTabClick(itemKey, e);
-      if (this.props.collapsible) {
-        const key = this._getItemKey(itemKey);
-        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-        tabItem.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
     };
     this.handleKeyDown = (event, itemKey, closable) => {
       this.props.handleKeyDown(event, itemKey, closable);
@@ -65,6 +58,19 @@ class TabBar extends _react.default.Component {
         onClick: this.handleItemClick
       }));
     };
+    this.scrollTabItemIntoViewByKey = function (key) {
+      let logicalPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nearest';
+      const tabItem = document.querySelector(`[data-uuid="${_this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+      tabItem === null || tabItem === void 0 ? void 0 : tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: logicalPosition,
+        inline: logicalPosition
+      });
+    };
+    this.scrollActiveTabItemIntoView = logicalPosition => {
+      const key = this._getItemKey(this.props.activeKey);
+      this.scrollTabItemIntoViewByKey(key, logicalPosition);
+    };
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
     this.handleArrowClick = (items, pos) => {
       const lastItem = pos === 'start' ? items.pop() : items.shift();
@@ -72,12 +78,7 @@ class TabBar extends _react.default.Component {
         return;
       }
       const key = this._getItemKey(lastItem.itemKey);
-      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${_constants.cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-      tabItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
+      this.scrollTabItemIntoViewByKey(key);
     };
     this.renderCollapse = (items, icon, pos) => {
       if ((0, _isEmpty2.default)(items)) {
@@ -227,6 +228,13 @@ class TabBar extends _react.default.Component {
       uuid: (0, _uuid.getUuidv4)()
     });
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      if (this.props.collapsible) {
+        this.scrollActiveTabItemIntoView();
+      }
+    }
+  }
   renderIcon(icon) {
     return /*#__PURE__*/_react.default.createElement("span", null, icon);
   }

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

@@ -48,7 +48,7 @@ export interface TreeProps extends BasicTreeProps {
     style?: React.CSSProperties;
     treeData?: TreeNodeData[];
     value?: Value;
-    icon?: ReactNode;
+    icon?: ReactNode | ((props: TreeNodeProps) => ReactNode);
     keyMaps?: KeyMapProps;
     loadData?: (treeNode?: TreeNodeData) => Promise<void>;
     onChange?: (value?: Value) => void;

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

@@ -3,7 +3,7 @@ import { Virtualize, ExpandAction } from '@douyinfe/semi-foundation/lib/cjs/tree
 import { TreeNodeData, KeyEntities, TreeNodeProps, FlattenNode, RenderFullLabelProps } from './interface';
 export interface TreeContextValue {
     treeDisabled?: boolean;
-    treeIcon?: ReactNode;
+    treeIcon?: ReactNode | ((props: TreeNodeProps) => ReactNode);
     motion?: boolean;
     motionKeys?: Set<string>;
     motionType?: string;

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

@@ -59,7 +59,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     renderArrow(): JSX.Element;
     renderCheckbox(): JSX.Element;
     renderSwitcher: () => JSX.Element;
-    renderIcon(): any;
+    renderIcon(): string | number | boolean | React.ReactFragment | JSX.Element;
     renderEmptyNode(): JSX.Element;
     renderRealLabel: () => any;
     setRef: (node: HTMLElement) => void;

package/lib/cjs/tree/treeNode.js

@@ -307,29 +307,30 @@ class TreeNode extends _react.PureComponent {
     } = this.context;
     const {
       expanded,
-      icon
+      icon,
+      data
     } = this.props;
-    const hasChild = !this.isLeaf();
-    const hasIcon = icon || treeIcon;
-    let itemIcon;
-    if (hasIcon || directory) {
-      if (hasIcon) {
-        itemIcon = icon || treeIcon;
+    if (icon) {
+      return icon;
+    }
+    if (treeIcon) {
+      return typeof treeIcon === 'function' ? treeIcon(this.props) : treeIcon;
+    }
+    if (directory) {
+      const hasChild = !this.isLeaf();
+      if (!hasChild) {
+        return /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
+          className: `${prefixcls}-item-icon`
+        });
       } else {
-        if (!hasChild) {
-          itemIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
-            className: `${prefixcls}-item-icon`
-          });
-        } else {
-          itemIcon = expanded ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolderOpen, {
-            className: `${prefixcls}-item-icon`
-          }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolder, {
-            className: `${prefixcls}-item-icon`
-          });
-        }
+        return expanded ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolderOpen, {
+          className: `${prefixcls}-item-icon`
+        }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolder, {
+          className: `${prefixcls}-item-icon`
+        });
       }
     }
-    return itemIcon;
+    return null;
   }
   renderEmptyNode() {
     const {

package/lib/cjs/typography/base.d.ts

@@ -85,7 +85,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         spacing: PropTypes.Requireable<"normal" | "extended">;
         strong: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<"small" | "normal">;
+        size: PropTypes.Requireable<"small" | "normal" | "inherit">;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
@@ -110,6 +110,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         style: {};
         className: string;
     };
+    static contextType: React.Context<"small" | "normal" | "inherit">;
+    context: TypographyBaseSize;
     wrapperRef: React.RefObject<any>;
     expandRef: React.RefObject<any>;
     copyRef: React.RefObject<any>;

package/lib/cjs/typography/base.js

@@ -23,6 +23,7 @@ var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs
 var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 var _utils = require("../_utils");
+var _context = _interopRequireDefault(require("./context"));
 var _resizeObserver = _interopRequireWildcard(require("../resizeObserver"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
@@ -545,15 +546,16 @@ class Base extends _react.Component {
       icon,
       size
     } = this.props;
+    const realSize = size === 'inherit' ? this.context : size;
     if (!icon) {
       return null;
     }
-    const iconSize = size === 'small' ? 'small' : 'default';
+    const iconSize = realSize === 'small' ? 'small' : 'default';
     return /*#__PURE__*/_react.default.createElement("span", {
       className: `${prefixCls}-icon`,
       "x-semi-prop": "icon"
     }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
-      size: iconSize
+      realSize: iconSize
     }) : icon);
   }
   renderContent() {
@@ -577,6 +579,7 @@ class Base extends _react.Component {
     const textProps = (0, _omit2.default)(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code',
     // 'link',
     'delete']);
+    const realSize = size === 'inherit' ? this.context : size;
     const iconNode = this.renderIcon();
     const ellipsisOpt = this.getEllipsisOpt();
     const {
@@ -596,7 +599,7 @@ class Base extends _react.Component {
     const wrapperCls = (0, _classnames.default)(className, ellipsisCls, {
       // [`${prefixCls}-primary`]: !type || type === 'primary',
       [`${prefixCls}-${type}`]: type && !link,
-      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-${realSize}`]: realSize,
       [`${prefixCls}-link`]: link,
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-${spacing}`]: spacing,
@@ -643,13 +646,19 @@ class Base extends _react.Component {
   }
   render() {
     var _this = this;
-    const content = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+    const {
+      size
+    } = this.props;
+    const realSize = size === 'inherit' ? this.context : size;
+    const content = /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+      value: realSize
+    }, /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Typography"
     }, locale => {
       this.expandStr = locale.expand;
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
-    });
+    }));
     if (this.props.ellipsis) {
       return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
         onResize: function () {
@@ -720,4 +729,5 @@ Base.defaultProps = {
   size: 'normal',
   style: {},
   className: ''
-};
+};
+Base.contextType = _context.default;

package/lib/cjs/typography/context.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SizeContext: React.Context<"small" | "normal" | "inherit">;
+export default SizeContext;

package/lib/cjs/typography/context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SizeContext = /*#__PURE__*/_react.default.createContext('normal');
+var _default = SizeContext;
+exports.default = _default;

package/lib/cjs/typography/numeral.d.ts

@@ -39,7 +39,7 @@ export default class Numeral extends PureComponent<NumeralProps> {
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
-        size: PropTypes.Requireable<"small" | "normal">;
+        size: PropTypes.Requireable<"small" | "normal" | "inherit">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         code: PropTypes.Requireable<boolean>;

package/lib/cjs/typography/paragraph.d.ts

@@ -51,7 +51,7 @@ export default class Paragraph extends PureComponent<ParagraphProps> {
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
-        size: PropTypes.Requireable<"small" | "normal">;
+        size: PropTypes.Requireable<"small" | "normal" | "inherit">;
         spacing: PropTypes.Requireable<"normal" | "extended">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

package/lib/cjs/typography/text.d.ts

@@ -54,7 +54,7 @@ export default class Text extends PureComponent<TextProps> {
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         strong: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "danger" | "tertiary" | "quaternary">;
-        size: PropTypes.Requireable<"small" | "normal">;
+        size: PropTypes.Requireable<"small" | "normal" | "inherit">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         code: PropTypes.Requireable<boolean>;

package/lib/es/form/hoc/withField.js

@@ -348,6 +348,7 @@ function withField(Component, opts) {
       validateRef.current = validate;
     }, [rules, validate]);
     useIsomorphicEffect(() => {
+      isUnmounted.current = false;
       // exec validate once when trigger include 'mount'
       if (validateOnMount) {
         fieldValidate(value);

package/lib/es/form/hooks/useFieldApi.js

@@ -5,6 +5,7 @@ const buildFieldApi = (formApi, field) => ({
   getTouched: () => formApi.getTouched(field),
   setTouched: isTouched => formApi.setTouched(field, isTouched),
   getValue: () => formApi.getValue(field),
+  // @ts-ignore
   setValue: value => formApi.setValue(field, value)
 });
 function useFieldApi(field) {

package/lib/es/index.d.ts

@@ -85,3 +85,4 @@ export { default as LocaleConsumer } from './locale/localeConsumer';
 export { Form, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi, withField, ArrayField, } from './form';
 export { default as Image } from './image';
 export { Preview as ImagePreview } from './image';
+export { default as semiGlobal } from "./_utils/semi-global";

package/lib/es/index.js

@@ -84,4 +84,5 @@ export { default as LocaleConsumer } from './locale/localeConsumer';
 /** Form */
 export { Form, useFormApi, useFormState, useFieldApi, useFieldState, withFormState, withFormApi, withField, ArrayField } from './form';
 export { default as Image } from './image';
-export { Preview as ImagePreview } from './image';
+export { Preview as ImagePreview } from './image';
+export { default as semiGlobal } from "./_utils/semi-global";

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

@@ -15,6 +15,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
     private maxHanleEl;
     private dragging;
     private eventListenerSet;
+    private handleDownEventListenerSet;
     foundation: SliderFoundation;
     constructor(props: SliderProps);
     get adapter(): SliderAdapter;

package/lib/es/slider/index.js

@@ -102,9 +102,6 @@ export default class Slider extends BaseComponent {
         onMouseLeave: () => {
           this.foundation.onHandleLeave();
         },
-        onMouseUp: e => {
-          this.foundation.onHandleUp(e);
-        },
         onKeyUp: e => {
           this.foundation.onHandleUp(e);
         },
@@ -161,9 +158,6 @@ export default class Slider extends BaseComponent {
         onMouseLeave: () => {
           this.foundation.onHandleLeave();
         },
-        onMouseUp: e => {
-          this.foundation.onHandleUp(e);
-        },
         onKeyUp: e => {
           this.foundation.onHandleUp(e);
         },
@@ -217,9 +211,6 @@ export default class Slider extends BaseComponent {
         onMouseLeave: () => {
           this.foundation.onHandleLeave();
         },
-        onMouseUp: e => {
-          this.foundation.onHandleUp(e);
-        },
         onKeyUp: e => {
           this.foundation.onHandleUp(e);
         },
@@ -380,6 +371,7 @@ export default class Slider extends BaseComponent {
     this.dragging = [false, false];
     this.foundation = new SliderFoundation(this.adapter);
     this.eventListenerSet = new Set();
+    this.handleDownEventListenerSet = new Set();
   }
   get adapter() {
     var _this = this;
@@ -470,9 +462,9 @@ export default class Slider extends BaseComponent {
       getMinHandleEl: () => this.minHanleEl.current,
       getMaxHandleEl: () => this.maxHanleEl.current,
       onHandleDown: e => {
-        this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
-        this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false);
-        this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false);
+        this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false));
+        this.handleDownEventListenerSet.add(this._addEventListener(window, 'mouseup', this.foundation.onHandleUp, false));
+        this.handleDownEventListenerSet.add(this._addEventListener(document.body, 'touchmove', this.foundation.onHandleTouchMove, false));
       },
       onHandleMove: function (mousePos, isMin) {
         let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _noop;
@@ -539,8 +531,8 @@ export default class Slider extends BaseComponent {
         (_b = (_a = this.props).onMouseUp) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         e.stopPropagation();
         e.preventDefault();
-        document.body.removeEventListener('mousemove', this.foundation.onHandleMove, false);
-        document.body.removeEventListener('mouseup', this.foundation.onHandleUp, false);
+        Array.from(this.handleDownEventListenerSet).forEach(clear => clear());
+        this.handleDownEventListenerSet.clear();
       },
       onHandleUpAfter: () => {
         const {

package/lib/es/tabs/TabBar.d.ts

@@ -30,11 +30,14 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
     };
     constructor(props: TabBarProps);
     componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
     renderIcon(icon: ReactNode): ReactNode;
     renderExtra(): ReactNode;
     handleItemClick: (itemKey: string, e: MouseEvent<Element>) => void;
     handleKeyDown: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
     renderTabItem: (panel: PlainTab) => ReactNode;
+    scrollTabItemIntoViewByKey: (key: string, logicalPosition?: ScrollLogicalPosition) => void;
+    scrollActiveTabItemIntoView: (logicalPosition?: ScrollLogicalPosition) => void;
     renderTabComponents: (list: Array<PlainTab>) => Array<ReactNode>;
     handleArrowClick: (items: Array<OverflowItem>, pos: 'start' | 'end') => void;
     renderCollapse: (items: Array<OverflowItem>, icon: ReactNode, pos: 'start' | 'end') => ReactNode;

package/lib/es/tabs/TabBar.js

@@ -22,18 +22,11 @@ import TabItem from './TabItem';
 import LocaleConsumer from "../locale/localeConsumer";
 class TabBar extends React.Component {
   constructor(props) {
+    var _this;
     super(props);
+    _this = this;
     this.handleItemClick = (itemKey, e) => {
       this.props.onTabClick(itemKey, e);
-      if (this.props.collapsible) {
-        const key = this._getItemKey(itemKey);
-        const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-        tabItem.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
     };
     this.handleKeyDown = (event, itemKey, closable) => {
       this.props.handleKeyDown(event, itemKey, closable);
@@ -58,6 +51,19 @@ class TabBar extends React.Component {
         onClick: this.handleItemClick
       }));
     };
+    this.scrollTabItemIntoViewByKey = function (key) {
+      let logicalPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'nearest';
+      const tabItem = document.querySelector(`[data-uuid="${_this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
+      tabItem === null || tabItem === void 0 ? void 0 : tabItem.scrollIntoView({
+        behavior: 'smooth',
+        block: logicalPosition,
+        inline: logicalPosition
+      });
+    };
+    this.scrollActiveTabItemIntoView = logicalPosition => {
+      const key = this._getItemKey(this.props.activeKey);
+      this.scrollTabItemIntoViewByKey(key, logicalPosition);
+    };
     this.renderTabComponents = list => list.map(panel => this.renderTabItem(panel));
     this.handleArrowClick = (items, pos) => {
       const lastItem = pos === 'start' ? items.pop() : items.shift();
@@ -65,12 +71,7 @@ class TabBar extends React.Component {
         return;
       }
       const key = this._getItemKey(lastItem.itemKey);
-      const tabItem = document.querySelector(`[data-uuid="${this.state.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
-      tabItem.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
+      this.scrollTabItemIntoViewByKey(key);
     };
     this.renderCollapse = (items, icon, pos) => {
       if (_isEmpty(items)) {
@@ -220,6 +221,13 @@ class TabBar extends React.Component {
       uuid: getUuidv4()
     });
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeKey !== this.props.activeKey) {
+      if (this.props.collapsible) {
+        this.scrollActiveTabItemIntoView();
+      }
+    }
+  }
   renderIcon(icon) {
     return /*#__PURE__*/React.createElement("span", null, icon);
   }

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

@@ -48,7 +48,7 @@ export interface TreeProps extends BasicTreeProps {
     style?: React.CSSProperties;
     treeData?: TreeNodeData[];
     value?: Value;
-    icon?: ReactNode;
+    icon?: ReactNode | ((props: TreeNodeProps) => ReactNode);
     keyMaps?: KeyMapProps;
     loadData?: (treeNode?: TreeNodeData) => Promise<void>;
     onChange?: (value?: Value) => void;

package/lib/es/tree/treeContext.d.ts

@@ -3,7 +3,7 @@ import { Virtualize, ExpandAction } from '@douyinfe/semi-foundation/lib/es/tree/
 import { TreeNodeData, KeyEntities, TreeNodeProps, FlattenNode, RenderFullLabelProps } from './interface';
 export interface TreeContextValue {
     treeDisabled?: boolean;
-    treeIcon?: ReactNode;
+    treeIcon?: ReactNode | ((props: TreeNodeProps) => ReactNode);
     motion?: boolean;
     motionKeys?: Set<string>;
     motionType?: string;

package/lib/es/tree/treeNode.d.ts

@@ -59,7 +59,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     renderArrow(): JSX.Element;
     renderCheckbox(): JSX.Element;
     renderSwitcher: () => JSX.Element;
-    renderIcon(): any;
+    renderIcon(): string | number | boolean | React.ReactFragment | JSX.Element;
     renderEmptyNode(): JSX.Element;
     renderRealLabel: () => any;
     setRef: (node: HTMLElement) => void;