@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.0

package/navigation/Item.tsx

@@ -4,12 +4,16 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { times, noop } from 'lodash';
+import { noop, times } from 'lodash';
 
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
 import { cloneDeep, isSemiIcon } from '../_utils';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/navigation/itemFoundation';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
+import ItemFoundation, {
+    ItemAdapter,
+    ItemProps,
+    SelectedItemProps
+} from '@douyinfe/semi-foundation/navigation/itemFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/navigation/constants';
 
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
@@ -114,7 +118,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         };
     }
 
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false) {
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false, key: number | string = 0) {
         if (this.props.isSubNav) {
             return null;
         }
@@ -134,8 +138,8 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         });
 
         return (
-            <i className={className}>
-                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), {size: (icon as React.ReactElement).props.size || iconSize}) : icon}
+            <i className={className} key={key}>
+                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: (icon as React.ReactElement).props.size || iconSize }) : icon}
             </i>
         );
     }
@@ -189,7 +193,6 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         const selected = this.adapter.getSelected();
 
 
-
         let itemChildren = null;
         if (!isNullOrUndefined(children)) {
             itemChildren = children;
@@ -197,15 +200,15 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             let placeholderIcons = null;
             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));
+                placeholderIcons = times(iconAmount, (index) => this.renderIcon(null, strings.ICON_POS_RIGHT, false, index));
             }
             itemChildren = (
                 <>
                     {placeholderIcons}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
-                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT) : null}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
+                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null}
                     {!isNullOrUndefined(text) ? <span className={`${cssClasses.PREFIX}-item-text`}>{text}</span> : ''}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
                 </>
             );
         }
@@ -246,7 +249,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             );
         } else {
             // Items are divided into normal and sub-wrap
-            const popoverItemCls = cls(`${className || `${clsPrefix }-normal`}`, {
+            const popoverItemCls = cls(`${className || `${clsPrefix}-normal`}`, {
                 [clsPrefix]: true,
                 [`${clsPrefix}-sub`]: isSubNav,
                 [`${clsPrefix}-selected`]: selected && !isSubNav,

package/navigation/SubNav.tsx

@@ -240,15 +240,15 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         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));
+            placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
         }
 
         const titleDiv = (
             <div
                 role="menuitem"
                 tabIndex={-1}
-                ref={this.setTitleRef as any} 
-                className={titleCls} 
+                ref={this.setTitleRef as any}
+                className={titleCls}
                 onClick={this.handleClick}
                 onKeyPress={this.handleKeyPress}
             >
@@ -256,7 +256,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
                     {placeholderIcons}
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left')}
                     {icon || indent || (isInSubNav && mode !== strings.MODE_HORIZONTAL)
-                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left')
+                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left')
                         : null}
                     <span className={`${prefixCls}-item-text`}>{text}</span>
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.5.1",
+    "version": "2.7.0-beta.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.5.1",
-        "@douyinfe/semi-animation-react": "2.5.1",
-        "@douyinfe/semi-foundation": "2.5.1",
-        "@douyinfe/semi-icons": "2.5.1",
-        "@douyinfe/semi-illustrations": "2.5.1",
-        "@douyinfe/semi-theme-default": "2.5.1",
+        "@douyinfe/semi-animation": "2.7.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.7.0-beta.0",
+        "@douyinfe/semi-foundation": "2.7.0-beta.0",
+        "@douyinfe/semi-icons": "2.7.0-beta.0",
+        "@douyinfe/semi-illustrations": "2.7.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.7.0-beta.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "3f83639f8a4fff7f912a237bf2842cb0944d993c",
+    "gitHead": "51cc4f6fa52f3275728d2112a98446ba54619c5b",
     "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.5.1",
+        "@douyinfe/semi-scss-compile": "2.7.0-beta.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/_story/ScrollList/index.js

@@ -43,6 +43,7 @@ class ScrollListDemo extends React.Component {
                     type={1}
                     selectedIndex={this.state.selectIndex1}
                     onSelect={this.onSelect}
+                    aria-label="1"
                 />
                 <ScrollItem
                     mode="normal"
@@ -50,6 +51,7 @@ class ScrollListDemo extends React.Component {
                     type={2}
                     selectedIndex={this.state.selectIndex2}
                     onSelect={this.onSelect}
+                    aria-label="2"
                 />
                 <ScrollItem
                     mode="normal"
@@ -57,6 +59,7 @@ class ScrollListDemo extends React.Component {
                     type={3}
                     selectedIndex={this.state.selectIndex3}
                     onSelect={this.onSelect}
+                    aria-label="3"
                 />
             </ScrollList>
         );

package/scrollList/_story/WheelList/index.js

@@ -92,6 +92,7 @@ class ScrollListDemo extends React.Component {
                         type={1}
                         selectedIndex={this.state.selectIndex1}
                         onSelect={this.onSelectAP}
+                        aria-label="时段"
                     />
                     <ScrollItem
                         {...commonProps}
@@ -99,6 +100,7 @@ class ScrollListDemo extends React.Component {
                         type={2}
                         selectedIndex={this.state.selectIndex2}
                         onSelect={this.onSelectHour}
+                        aria-label="小时"
                     />
                     <ScrollItem
                         {...commonProps}
@@ -106,6 +108,7 @@ class ScrollListDemo extends React.Component {
                         type={3}
                         selectedIndex={this.state.selectIndex3}
                         onSelect={this.onSelectMinute}
+                        aria-label="分钟"
                     />
                 </ScrollList>
             </div>

package/scrollList/scrollItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -28,6 +28,7 @@ export interface ScrollItemProps<T extends Item> {
     motion?: Motion;
     style?: React.CSSProperties;
     type?: string | number; // used to identify the scrollItem, used internally by the semi component, and does not need to be exposed to the user
+    'aria-label'?: AriaAttributes['aria-label'];
 }
 
 export interface ScrollItemState {
@@ -413,15 +414,15 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
             const { transform: itemTrans } = item;
 
             const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
-
+            const selected = selectedIndex === index;
             const cls = classnames({
-                [`${cssClasses.PREFIX}-item-sel`]: selectedIndex === index && mode !== wheelMode,
+                [`${cssClasses.PREFIX}-item-sel`]: selected && mode !== wheelMode,
                 [`${cssClasses.PREFIX}-item-disabled`]: Boolean(item.disabled),
             });
 
             let text = '';
 
-            if (selectedIndex === index) {
+            if (selected) {
                 if (typeof transform === 'function') {
                     text = transform(item.value, item.text);
                 } else {
@@ -441,7 +442,14 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
 
             return (
                 // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-                <li key={prefixKey + index} {...events} className={cls}>
+                <li
+                    key={prefixKey + index}
+                    {...events}
+                    className={cls}
+                    role="option"
+                    aria-selected={selected}
+                    aria-disabled={item.disabled}
+                >
                     {text}
                 </li>
             );
@@ -457,7 +465,14 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
 
         return (
             <div style={style} className={wrapperCls} ref={this._cacheWrapperNode}>
-                <ul ref={this._cacheListNode}>{inner}</ul>
+                <ul
+                    role="listbox"
+                    aria-multiselectable={false}
+                    aria-label={this.props['aria-label']}
+                    ref={this._cacheListNode}
+                >
+                    {inner}
+                </ul>
             </div>
         );
     };
@@ -470,13 +485,13 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { prependCount, appendCount } = this.state;
 
         const prependList = times(prependCount).reduce((arr, num) => {
-            const items = this.renderItemList(`pre_${ num }_`);
+            const items = this.renderItemList(`pre_${num}_`);
             arr.unshift(...items);
 
             return arr;
         }, []);
         const appendList = times(appendCount).reduce((arr, num) => {
-            const items = this.renderItemList(`app_${ num }_`);
+            const items = this.renderItemList(`app_${num}_`);
             arr.push(...items);
             return arr;
         }, []);
@@ -500,7 +515,13 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
                 <div className={selectorCls} ref={this._cacheSelectorNode} />
                 <div className={postShadeCls} />
                 <div className={listWrapperCls} ref={this._cacheWrapperNode} onScroll={this.scrollToSelectItem}>
-                    <ul ref={this._cacheListNode} onClick={this.clickToSelectItem}>
+                    <ul
+                        role="listbox"
+                        aria-label={this.props['aria-label']}
+                        aria-multiselectable={false}
+                        ref={this._cacheListNode}
+                        onClick={this.clickToSelectItem}
+                    >
                         {prependList}
                         {inner}
                         {appendList}

package/table/Body/index.tsx

@@ -89,6 +89,8 @@ export interface BodyState {
 
 export interface BodyContext {
     getVirtualizedListRef: GetVirtualizedListRef;
+    flattenedColumns: ColumnProps[];
+    getCellWidths: (flattenedColumns: ColumnProps[]) => number[];
 }
 
 class Body extends BaseComponent<BodyProps, BodyState> {
@@ -128,6 +130,8 @@ class Body extends BaseComponent<BodyProps, BodyState> {
     listRef: React.MutableRefObject<any>;
     observer: ResizeObserver;
     foundation: BodyFoundation;
+    cellWidths: number[];
+    flattenedColumns: ColumnProps[];
     constructor(props: BodyProps, context: BodyContext) {
         super(props);
         this.ref = React.createRef();
@@ -142,7 +146,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
         };
 
         this.listRef = React.createRef();
-        const { getVirtualizedListRef } = context;
+        const { getVirtualizedListRef, flattenedColumns, getCellWidths } = context;
         if (getVirtualizedListRef) {
             if (props.virtualized) {
                 getVirtualizedListRef(this.listRef);
@@ -152,6 +156,8 @@ class Body extends BaseComponent<BodyProps, BodyState> {
             }
         }
         this.foundation = new BodyFoundation(this.adapter);
+        this.flattenedColumns = flattenedColumns;
+        this.cellWidths = getCellWidths(flattenedColumns);
         this.observer = null;
     }
 
@@ -199,7 +205,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                     this.observer.unobserve(bodyWrapDOM);
                     this.observer = null;
                 }
-            }
+            },
         };
     }
 
@@ -494,7 +500,12 @@ class Body extends BaseComponent<BodyProps, BodyState> {
         }
 
         const { flattenedColumns, getCellWidths } = this.context;
-        const cellWidths = getCellWidths(flattenedColumns);
+
+        // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+        if (flattenedColumns !== this.flattenedColumns) {
+            this.flattenedColumns = flattenedColumns;
+            this.cellWidths = getCellWidths(flattenedColumns);
+        }
 
         return (
             <ExpandedRow
@@ -508,7 +519,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 index={index}
                 virtualized={virtualized}
                 key={genExpandedRowKey(key)}
-                cellWidths={cellWidths}
+                cellWidths={this.cellWidths}
             />
         );
     };

package/table/__test__/table.test.js

@@ -1930,4 +1930,22 @@ describe(`Table`, () => {
         expect(newExpandedRows.length).toEqual(1);
         expect(table.state(`expandedRowKeys`)).toEqual(['1']);
     });
+
+    it(`test expanded row re-render`, () => {
+        const expandedRowRender = sinon.spy(() => <div>Semi Design</div>);
+        const demo = mount(
+            <Table
+                columns={columns}
+                dataSource={data}
+                expandedRowRender={expandedRowRender}
+            />
+        );
+
+        const table = demo.find(BaseTable);
+
+        const expandIcons = demo.find(`.semi-table-tbody .semi-table-row .semi-table-expand-icon`);
+        expandIcons.at(0).simulate('click');
+        expandIcons.at(1).simulate('click');
+        expect(expandedRowRender.calledTwice).toBeTruthy();
+    });
 });

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const columns = [
+    {
+        title: '标题',
+        width: 500,
+        dataIndex: 'name',
+        render: (text, record, index) => {
+            return (
+                <span>
+                    <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                    {text}
+                </span>
+            );
+        },
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+    },
+    {
+        title: '所有者',
+        dataIndex: 'owner',
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                        {typeof text === 'string' && text.slice(0, 1)}
+                    </Avatar>
+                    {text}
+                </div>
+            );
+        },
+    },
+    {
+        title: '更新日期',
+        dataIndex: 'updateTime',
+    },
+    {
+        title: '',
+        dataIndex: 'operate',
+        render: () => {
+            return <IconMore />;
+        },
+    },
+];
+
+const data = [
+    {
+        key: '1',
+        name: 'Semi Design 设计稿.fig',
+        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+        size: '2M',
+        owner: '姜鹏志',
+        updateTime: '2020-02-02 05:13',
+        avatarBg: 'grey',
+    },
+    {
+        key: '2',
+        name: 'Semi Design 分享演示文稿',
+        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+        size: '2M',
+        owner: '郝宣',
+        updateTime: '2020-01-17 05:31',
+        avatarBg: 'red',
+    },
+    {
+        key: '3',
+        name: '设计文档',
+        nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+        size: '34KB',
+        owner: 'Zoey Edwards',
+        updateTime: '2020-01-26 11:01',
+        avatarBg: 'light-blue',
+    },
+];
+
+export default function App() {
+    const expandRowRender = (record, index) => {
+        console.log('render', index);
+        return <div>semi design</div>;
+    };
+
+    return (
+        <Table
+            rowKey="name"
+            columns={columns}
+            dataSource={data}
+            expandedRowRender={expandRowRender}
+            pagination={false}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -2,4 +2,5 @@ export { default as DefaultFilteredValue } from './defaultFilteredValue';
 export { default as FixedColumnsChange } from './FixedColumnsChange';
 export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
-export { default as FixedResizable } from './FixedResizable';
+export { default as FixedResizable } from './FixedResizable';
+export { default as FixedExpandedRow } from './FixedExpandedRow';

package/tree/__test__/tree.test.js

@@ -1,6 +1,7 @@
-import { Tree, Icon } from '../../index';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { isEqual } from 'lodash';
 import { IconMapPin } from '@douyinfe/semi-icons';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { Tree, Button } from '../../index';
 
 const treeChildren = [
     {
@@ -672,6 +673,90 @@ describe('Tree', () => {
         expect(tree.state().selectedKeys.length).toEqual(0);
     });
 
+
+    /**
+     * Detect whether the expanded item will be expanded according to the value when the value
+     *  or treeData is changed, when expandedKeys is not controlled
+     */
+     const treeJsonData1 = {
+        "Node0": {
+            "Child Node0-0": '0-0',
+            "Child Node0-1": '0-1',
+        },
+        "Node1": {
+            "Child Node1-0": '1-0',
+            "Child Node1-1": '1-1',
+        }
+    };
+    const treeJsonData2 = {
+        "Updated Node0": { 
+            "Updated Child Node0-0": {
+                'Updated Child Node0-0-0':'0-0'
+            }, 
+            "Updated Child Node0-1": '0-1', 
+        },
+        "Updated Node1": { 
+            "Updated Child Node1-0": '1-0', 
+            "Updated Child Node1-1": '1-1', 
+        }
+    };
+
+    it('expandedKeys when treeDataSimpleJson update', () => {
+        const tree = mount(
+            <Tree
+                value='0-0'
+                multiple
+                treeDataSimpleJson={treeJsonData1}
+            />,
+            {
+                attachTo: document.getElementById('container')
+            }
+        );
+        const treeDataButton = mount(
+            <Button
+                onClick={() => {
+                    if (isEqual(tree.props().treeDataSimpleJson, treeJsonData1)) {
+                        tree.setProps({ treeDataSimpleJson: treeJsonData2 });
+                        tree.update();
+                    } else {
+                        tree.setProps({ treeDataSimpleJson: treeJsonData1 });
+                        tree.update();
+                    }
+                }}
+            >
+                update treeData
+            </Button>
+        );
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-1`)
+            .at(0)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(false);
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(true);
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-1`)
+            .at(1)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(true);
+        treeDataButton.simulate('click');
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .hasClass(`${BASE_CLASS_PREFIX}-tree-option-collapsed`)
+        ).toEqual(false);
+        treeDataButton.simulate('click');
+        tree.unmount();
+        treeDataButton.unmount();
+    });
+
     it('expandAction = false / default behavior', () => {
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => { } } }
         let spyOnExpand = sinon.spy(() => { });

package/tree/_story/tree.stories.js

@@ -1,12 +1,11 @@
 import React, { useRef, useState } from 'react';
+import { cloneDeep, difference, isEqual } from 'lodash';
+import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
 import AutoSizer from '../autoSizer';
-import { Button, ButtonGroup, Input, Popover, Toast } from '../../index';
+import { Button, ButtonGroup, Input, Popover, Toast, Space } from '../../index';
 import BigTree from './BigData';
 import testData from './data';
-import { cloneDeep, difference, isEqual } from 'lodash';
-import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
-
 const TreeNode = Tree.TreeNode;
 
 export default {
@@ -2338,4 +2337,65 @@ export const CheckRelationDemo = () => {
       />
     </>
   );
-};
+};
+
+export const ValueImpactExpansionWithDynamicTreeData = () => {
+  const json = {
+      "Node0": { 
+          "Child Node0-0": '0-0', 
+          "Child Node0-1": '0-1', 
+      },
+      "Node1": { 
+          "Child Node1-0": '1-0', 
+          "Child Node1-1": '1-1', 
+      }
+  }
+  const json2 = {
+      "Updated Node0": { 
+          "Updated Child Node0-0": {
+              'Updated Child Node0-0-0':'0-0'
+          }, 
+          "Updated Child Node0-1": '0-1', 
+      },
+      "Updated Node1": { 
+          "Updated Child Node1-0": '1-0', 
+          "Updated Child Node1-1": '1-1', 
+      }
+  }
+  const style = {
+      width: 260,
+      height: 420,
+      border: '1px solid var(--color-border)'
+  }
+  const [value, setValue] = useState('0-0')
+  const [tree, setTree] = useState(json);
+  const handleValueButtonClick = () => {
+      if (value === '0-0') {
+          setValue('1-0');
+      } else {
+          setValue('0-0');
+      }
+  }
+  const handleTreeDataButtonClick = () => {
+      if(isEqual(tree, json)){
+          setTree(json2);
+      } else {
+          setTree(json);
+      }
+  }
+  return (  
+    <>
+      <div>value 受控时，当 treeData/treeDataSimpleJson 改变时，应该根据 value 自动展开</div>
+      <Tree 
+          value={value}
+          treeDataSimpleJson={tree} 
+          style={style}
+          onChange={v => setValue(v)}
+      />
+      <Space>
+          <Button onClick={handleValueButtonClick}>改变 value</Button>
+          <Button onClick={handleTreeDataButtonClick}>改变 TreeData</Button>    
+      </Space>
+    </>
+  )
+}