@douyinfe/semi-ui 2.4.0-beta.0 → 2.4.0

package/lib/cjs/navigation/Item.js

@@ -204,7 +204,7 @@ class NavItem extends _baseComponent.default {
     } else {
       let placeholderIcons = null;
 
-      if (mode === _constants.strings.MODE_VERTICAL && !limitIndent) {
+      if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
         placeholderIcons = (0, _times2.default)(iconAmount, () => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false));
       }

package/lib/cjs/navigation/SubNav.js

@@ -230,7 +230,7 @@ class SubNav extends _baseComponent.default {
 
     let placeholderIcons = null;
 
-    if (mode === _constants.strings.MODE_VERTICAL && !limitIndent) {
+    if (mode === _constants.strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
       placeholderIcons = (0, _times2.default)(iconAmount, index => this.renderIcon(null, _constants.strings.ICON_POS_RIGHT, false, undefined, index));

package/lib/cjs/scrollList/scrollItem.d.ts

@@ -3,7 +3,10 @@ import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/cjs/scrollList/itemFoundation';
 import { Motion } from '../_base/base';
-declare type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void;
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -52,6 +55,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
     debouncedSelect: DebounceSelectFn;
     constructor(props?: {});
     get adapter(): ScrollItemAdapter<ScrollItemProps<T>, ScrollItemState, T>;
+    componentWillUnmount(): void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: ScrollItemProps<T>): void;
     _cacheNode: (name: string, node: Element) => Element;

package/lib/cjs/scrollList/scrollItem.js

@@ -451,6 +451,13 @@ class ScrollItem extends _baseComponent.default {
     });
   }
 
+  componentWillUnmount() {
+    if (this.props.cycled) {
+      this.throttledAdjustList.cancel();
+      this.debouncedSelect.cancel();
+    }
+  }
+
   componentDidMount() {
     this.foundation.init();
     const {

package/lib/cjs/treeSelect/index.js

@@ -950,7 +950,7 @@ class TreeSelect extends _baseComponent.default {
     } // if treeData keys changes, we won't show animation
 
 
-    if (treeData && props.motion && !(0, _isEqual2.default)(new _set.default((0, _keys.default)(newState.keyEntities)), new _set.default((0, _keys.default)(prevState.keyEntities)))) {
+    if (treeData && props.motion && !(0, _isEqual2.default)((0, _keys.default)(newState.keyEntities), (0, _keys.default)(prevState.keyEntities))) {
       if (prevProps && props.motion) {
         newState.motionKeys = new _set.default([]);
         newState.motionType = null;
@@ -996,7 +996,11 @@ class TreeSelect extends _baseComponent.default {
         newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
-        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
+        if (props.value) {
+          newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
+        } else {
+          newState.selectedKeys = (0, _treeUtil.updateKeys)(prevState.selectedKeys, keyEntities);
+        }
       }
     } else {
       // checkedKeys: multiple mode controlled || data changed
@@ -1008,7 +1012,11 @@ class TreeSelect extends _baseComponent.default {
         checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
-        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
+        if (props.value) {
+          checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
+        } else {
+          checkedKeyValues = (0, _treeUtil.updateKeys)(prevState.checkedKeys, keyEntities);
+        }
       }
 
       if (checkedKeyValues) {

package/lib/cjs/typography/util.js

@@ -77,7 +77,6 @@ const getRenderText = function (originEle, rows) {
   ellipsisContainer.style.zIndex = '-1000'; // clean up css overflow
 
   ellipsisContainer.style.textOverflow = 'clip';
-  ellipsisContainer.style.whiteSpace = 'normal';
   ellipsisContainer.style.webkitLineClamp = 'none'; // Render fake container
 
   _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content

package/lib/es/navigation/Item.js

@@ -176,7 +176,7 @@ export default class NavItem extends BaseComponent {
     } else {
       let placeholderIcons = null;
 
-      if (mode === strings.MODE_VERTICAL && !limitIndent) {
+      if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
         placeholderIcons = _times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
       }

package/lib/es/navigation/SubNav.js

@@ -200,7 +200,7 @@ export default class SubNav extends BaseComponent {
 
     let placeholderIcons = null;
 
-    if (mode === strings.MODE_VERTICAL && !limitIndent) {
+    if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
       placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));

package/lib/es/scrollList/scrollItem.d.ts

@@ -3,7 +3,10 @@ import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { Item, ScrollItemAdapter } from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
 import { Motion } from '../_base/base';
-declare type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void;
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -52,6 +55,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
     debouncedSelect: DebounceSelectFn;
     constructor(props?: {});
     get adapter(): ScrollItemAdapter<ScrollItemProps<T>, ScrollItemState, T>;
+    componentWillUnmount(): void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: ScrollItemProps<T>): void;
     _cacheNode: (name: string, node: Element) => Element;

package/lib/es/scrollList/scrollItem.js

@@ -429,6 +429,13 @@ export default class ScrollItem extends BaseComponent {
     });
   }
 
+  componentWillUnmount() {
+    if (this.props.cycled) {
+      this.throttledAdjustList.cancel();
+      this.debouncedSelect.cancel();
+    }
+  }
+
   componentDidMount() {
     this.foundation.init();
     const {

package/lib/es/treeSelect/index.js

@@ -17,7 +17,7 @@ import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import TreeSelectFoundation from '@douyinfe/semi-foundation/lib/es/treeSelect/foundation';
-import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
+import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, findKeysForValues, calcCheckedKeys, calcExpandedKeys, getValueOrKey, normalizeKeyList, calcDisabledKeys, normalizeValue, updateKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
 import { FixedSizeList as VirtualList } from 'react-window';
@@ -896,7 +896,7 @@ class TreeSelect extends BaseComponent {
     } // if treeData keys changes, we won't show animation
 
 
-    if (treeData && props.motion && !_isEqual(new _Set(_Object$keys(newState.keyEntities)), new _Set(_Object$keys(prevState.keyEntities)))) {
+    if (treeData && props.motion && !_isEqual(_Object$keys(newState.keyEntities), _Object$keys(prevState.keyEntities))) {
       if (prevProps && props.motion) {
         newState.motionKeys = new _Set([]);
         newState.motionType = null;
@@ -942,7 +942,11 @@ class TreeSelect extends BaseComponent {
         newState.selectedKeys = findKeysForValues(normalizeValue(props.defaultValue, withObject), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
-        newState.selectedKeys = findKeysForValues(normalizeValue(props.value, withObject) || '', valueEntities, isMultiple);
+        if (props.value) {
+          newState.selectedKeys = findKeysForValues(normalizeValue(props.value, withObject) || '', valueEntities, isMultiple);
+        } else {
+          newState.selectedKeys = updateKeys(prevState.selectedKeys, keyEntities);
+        }
       }
     } else {
       // checkedKeys: multiple mode controlled || data changed
@@ -954,7 +958,11 @@ class TreeSelect extends BaseComponent {
         checkedKeyValues = findKeysForValues(normalizeValue(props.defaultValue, withObject), valueEntities, isMultiple);
       } else if (treeData) {
         // If `treeData` changed, we also need check it
-        checkedKeyValues = findKeysForValues(normalizeValue(props.value, withObject) || [], valueEntities, isMultiple);
+        if (props.value) {
+          checkedKeyValues = findKeysForValues(normalizeValue(props.value, withObject) || [], valueEntities, isMultiple);
+        } else {
+          checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
+        }
       }
 
       if (checkedKeyValues) {

package/lib/es/typography/util.js

@@ -62,7 +62,6 @@ const getRenderText = function (originEle, rows) {
   ellipsisContainer.style.zIndex = '-1000'; // clean up css overflow
 
   ellipsisContainer.style.textOverflow = 'clip';
-  ellipsisContainer.style.whiteSpace = 'normal';
   ellipsisContainer.style.webkitLineClamp = 'none'; // Render fake container
 
   ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content

package/navigation/Item.tsx

@@ -195,7 +195,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             itemChildren = children;
         } else {
             let placeholderIcons = null;
-            if (mode === strings.MODE_VERTICAL && !limitIndent) {
+            if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
                 const iconAmount = (icon && !indent) ? level : level - 1;
                 placeholderIcons = times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
             }

package/navigation/SubNav.tsx

@@ -237,7 +237,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         }
 
         let placeholderIcons = null;
-        if (mode === strings.MODE_VERTICAL && !limitIndent) {
+        if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
             /* Different icons' amount means different indents.*/
             const iconAmount = (icon && !indent) ? level : level - 1;
             placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.4.0-beta.0",
+    "version": "2.4.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,11 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.4.0-beta.0",
-        "@douyinfe/semi-foundation": "2.4.0-beta.0",
-        "@douyinfe/semi-icons": "2.4.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.4.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.4.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.4.0",
+        "@douyinfe/semi-foundation": "2.4.0",
+        "@douyinfe/semi-icons": "2.4.0",
+        "@douyinfe/semi-illustrations": "2.4.0",
+        "@douyinfe/semi-theme-default": "2.4.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -68,13 +68,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "ebf8a78f5152f9733af771cd567f042eccb8c4b9",
+    "gitHead": "d902a6f731475dea585d63907aee06ebe1153419",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.4.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.4.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/scrollItem.tsx

@@ -13,8 +13,10 @@ import { Motion } from '../_base/base';
 const msPerFrame = 1000 / 60;
 const blankReg = /^\s*$/;
 const wheelMode = 'wheel';
-
-type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -110,7 +112,12 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
             scrollToCenter: this.scrollToCenter,
         };
     }
-
+    componentWillUnmount(){
+        if (this.props.cycled) {
+            this.throttledAdjustList.cancel();
+            this.debouncedSelect.cancel();
+        }
+    }
     componentDidMount() {
         this.foundation.init();
 

package/table/_story/v2/FixedColumnsChange/index.jsx

@@ -15,7 +15,7 @@ const getData = () => {
             name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
             owner: isSemiDesign ? '姜鹏志' : '郝宣',
             size: randomNumber,
-            updateTime: new Date().valueOf() + randomNumber * DAY,
+            updateTime: new Date('2022-01-01').valueOf() + randomNumber * DAY,
             avatarBg: isSemiDesign ? 'grey' : 'red'
         });
     }

package/table/_story/v2/FixedZIndex/index.jsx

@@ -58,7 +58,7 @@ export default function App() {
     };
 
     for (let i = 0; i < 46; i++) {
-        let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
+        let age = (i * 1000) % 149;
         let name = `Edward King ${i}`;
         data.push({
             key: `${ i}`,

package/timePicker/__test__/timePicker.test.js

@@ -89,6 +89,7 @@ describe(`TimePicker`, () => {
         const args = onChange.getCall(0).args;
         expect(args[0] instanceof Date).toBe(true);
         expect(typeof args[1]).toBe('string');
+        elem.unmount();
     });
 
     it(`test controlled value`, async () => {
@@ -120,6 +121,7 @@ describe(`TimePicker`, () => {
         let currentDate0 = elem0.state('value')[0];
 
         expect(currentDate0.getMinutes()).toBe(defaultMinute);
+        elem0.unmount();
     });
 
     it(`test controlled value with onchange`, async () => {
@@ -156,6 +158,7 @@ describe(`TimePicker`, () => {
 
         let currentDate1 = elem1.state('value')[0];
         expect(currentDate1.getMinutes()).toBe(newInputMinute);
+        elem1.unmount();
     });
 
     it(`test controlled open`, async () => {
@@ -234,6 +237,7 @@ describe(`TimePicker`, () => {
         nextSelectedLi.simulate('click');
         await sleep(200);
         expect(elem.state('value')[0].getHours()).toBe(newHour);
+        elem.unmount();
     });
 
     it('test isTimeFormatLike function', () => {
@@ -286,6 +290,7 @@ describe(`TimePicker`, () => {
         const args = onChange.getCall(0).args;
         expect(args[0]).toBe(undefined);
         expect(args[1]).toBe('');
+        elem.unmount();
     });
 
     it('test onChangeWithDateFirst=false', async () => {
@@ -297,7 +302,8 @@ describe(`TimePicker`, () => {
             onChangeWithDateFirst: false,
             autofocus: true,
             locale: Locale.TimePicker,
-            localeCode: Locale.code
+            localeCode: Locale.code,
+            scrollItemProps: { cycled: false }
         };
         const elem = mount(<TimePicker {...props} />);
         // click minute
@@ -305,10 +311,12 @@ describe(`TimePicker`, () => {
         const minuteLis = minuteUl.find(`li`);
 
         minuteUl.simulate('click', { target: minuteLis.at(0).getDOMNode(), nativeEvent: null });
+        await sleep(200);
 
         expect(onChange.called).toBeTruthy();
         const args = onChange.getCall(0).args;
         expect(typeof args[0]).toBe('string');
         expect(args[1] instanceof Date).toBe(true);
+        elem.unmount();
     });
 });

package/treeSelect/__test__/treeSelect.test.js

@@ -97,6 +97,26 @@ const treeData2 = [
     }
 ];
 
+const treeData3 = [
+    {
+        label: '亚洲',
+        value: 'Asia',
+        key: '0',
+        children: [
+            {
+                label: '中国',
+                value: 'China',
+                key: '0-0',
+            },
+        ],
+    },
+    {
+        label: '北美洲',
+        value: 'North America',
+        key: '1',
+    }
+];
+
 let commonProps = {
     motion: false,
     motionExpand: false,
@@ -780,4 +800,141 @@ describe('TreeSelect', () => {
             done();
         }, 100);
     });
+
+    it('treeData is updated should not clear value when uncontrolled mode and single selection', () => {
+        const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => { } } }
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true
+        });
+        treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-option-list .${BASE_CLASS_PREFIX}-tree-option`)
+            .at(2)
+            .simulate('click', nativeEvent);
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData2});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('');
+    });
+
+    it('treeData is updated should not clear value when uncontrolled mode and multiple selection', () => {
+        const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => { } } }
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true,
+            multiple: true,
+        });
+        treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-option-list .${BASE_CLASS_PREFIX}-tree-option`)
+            .at(2)
+            .simulate('click', nativeEvent);
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData2});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .length
+        ).toEqual(0);
+    });
+
+    it('treeData is updated should not clear value when controlled mode and single selection', () => {
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true,
+            value: 'Beijing'
+        });
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData3});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('');
+    });
+
+    it('treeData is updated should not clear value when controlled mode and multiple selection', () => {
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true,
+            multiple: true,
+            value: 'Beijing'
+        });
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData3});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .length
+        ).toEqual(0);
+    });
+
 })

package/treeSelect/index.tsx

@@ -23,7 +23,8 @@ import {
     getValueOrKey,
     normalizeKeyList,
     calcDisabledKeys,
-    normalizeValue
+    normalizeValue,
+    updateKeys,
 } from '@douyinfe/semi-foundation/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
@@ -362,7 +363,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         if (
             treeData &&
             props.motion &&
-            !isEqual(new Set(Object.keys(newState.keyEntities)), new Set(Object.keys(prevState.keyEntities)))
+            !isEqual(Object.keys(newState.keyEntities), Object.keys(prevState.keyEntities))
         ) {
             if (prevProps && props.motion) {
                 newState.motionKeys = new Set([]);
@@ -432,11 +433,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                newState.selectedKeys = findKeysForValues(
-                    normalizeValue(props.value, withObject) || '',
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    newState.selectedKeys = findKeysForValues(
+                        normalizeValue(props.value, withObject) || '',
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    newState.selectedKeys = updateKeys(prevState.selectedKeys, keyEntities);
+                }
             }
         } else {
             // checkedKeys: multiple mode controlled || data changed
@@ -456,11 +461,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                checkedKeyValues = findKeysForValues(
-                    normalizeValue(props.value, withObject) || [],
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    checkedKeyValues = findKeysForValues(
+                        normalizeValue(props.value, withObject) || [],
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
+                }
             }
 
             if (checkedKeyValues) {

package/typography/_story/typography.stories.js

@@ -309,6 +309,14 @@ export const EllipsisMultiple = () => (
       Web 应用。 区别于其他的设计系统而言，Semi Design
       以用户中心、内容优先、设计人性化为设计理念，具有四大优势。
     </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-line' }}>
+      {'这是一个多行截断的\n例子： Semi Design 是由互娱社区\n前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-wrap' }}>
+      {'这是一个多行截断的\n例子： Semi Des    ign 是由互               娱社区\n前端团队与 UED      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
   </div>
 );
 

package/typography/util.tsx

@@ -63,7 +63,6 @@ const getRenderText = (
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.whiteSpace = 'normal';
     ellipsisContainer.style.webkitLineClamp = 'none';
 
     // Render fake container