@douyinfe/semi-ui 2.6.0 → 2.7.1

package/lib/es/treeSelect/index.js

@@ -741,7 +741,8 @@ class TreeSelect extends BaseComponent {
       const {
         flattenNodes,
         motionKeys,
-        motionType
+        motionType,
+        filteredKeys
       } = this.state;
       const {
         direction
@@ -750,6 +751,7 @@ class TreeSelect extends BaseComponent {
         virtualize,
         motionExpand
       } = this.props;
+      const isExpandControlled = ('expandedKeys' in this.props);
 
       if (!virtualize || _isEmpty(virtualize)) {
         return /*#__PURE__*/React.createElement(NodeList, {
@@ -757,6 +759,8 @@ class TreeSelect extends BaseComponent {
           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
+          searchTargetIsDeep: isExpandControlled && motionExpand && _isEmpty(motionKeys) && !_isEmpty(filteredKeys),
           onMotionEnd: this.onMotionEnd,
           renderTreeNode: this.renderTreeNode
         });
@@ -897,6 +901,10 @@ class TreeSelect extends BaseComponent {
     this.clickOutsideHandler = null;
     this.foundation = new TreeSelectFoundation(this.adapter);
     this.treeSelectID = _sliceInstanceProperty(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 
@@ -1076,8 +1084,8 @@ class TreeSelect extends BaseComponent {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: input => {
-        this.props.onSearch && this.props.onSearch(input);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this._flattenNodes = bool ? cloneDeep(this.state.flattenNodes) : null;

package/modal/_story/modal.stories.js

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Select, Modal, Button, Tooltip, Popover } from '../../index';
+import en_GB from '../../locale/source/en_GB';
+
+import { Select, Modal, Button, Tooltip, Popover, ConfigProvider, Tag, Space } from '../../index';
 import CollapsibleInModal from './CollapsibleInModal';
 import DynamicContextDemo from './DynamicContext';
 
@@ -248,4 +250,94 @@ KeepDomNotLazy.story = {
   name: 'keepDOM && not lazy',
 };
 
+export const UseModalDemo = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const config = { 'title': 'old title', 'content': 'old content' };
+
+  return (
+      <ConfigProvider locale={en_GB}>
+          <div>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.update({ title: "new title", content: "new content" });
+                      }, 1000);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+          </div>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalDemo.storyName = "useModal";
+
+export const UseModalDestroy = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const config = { 'title': 'old title', 'content': 'old content' };
+
+  return (
+      <ConfigProvider locale={en_GB}>
+          <div>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.destroy();
+                      }, 1000);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+          </div>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalDestroy.storyName = "useModal destroy";
+
+export const UseModalAfterClose = () => {
+  const [modal, contextHolder] = Modal.useModal();
+  const [closed, setClosed] = React.useState(false);
+  const [leave, setLeave] = React.useState(false);
+
+  const config = { 
+    title: 'old title', 
+    content: 'old content', 
+    afterClose: () => {
+      setClosed(true);
+    },
+    motion: {
+      didLeave: () => {
+        console.log('didLeave');
+        setLeave(true);
+      }
+    }
+  };
 
+  return (
+      <ConfigProvider locale={en_GB}>
+          <Space>
+              <Button
+                  onClick={() => {
+                      const currentModal = modal.confirm(config);
+
+                      setTimeout(() => {
+                        currentModal.destroy();
+                      }, 0);
+                  }}
+              >
+                  Confirm Modal
+              </Button>
+              <Tag>{`closed: ${closed}`}</Tag>
+              {/* <Tag>{`motion leave: ${leave}`}</Tag> */}
+          </Space>
+          {contextHolder}
+      </ConfigProvider>
+  );
+};
+UseModalAfterClose.storyName = "useModal afterClose";

package/modal/useModal/HookModal.tsx

@@ -35,6 +35,7 @@ const HookModal = ({ afterClose, config, ...props }: PropsWithChildren<HookModal
     }));
 
     const { motion } = props;
+    /* istanbul ignore next */
     const mergedMotion =
         typeof motion === 'undefined' || motion ?
             {

package/notification/_story/useNotification/index.jsx

@@ -4,18 +4,32 @@ import { Button, ConfigProvider } from '../../../index';
 import Context from './context';
 
 function App({ children, globalVars }) {
-    return <Context.Provider value={{ title: '1111', ...globalVars }}>{children}</Context.Provider>;
+    return (
+        <div data-cy="notice-container">
+            <Context.Provider value={{ title: '1111', ...globalVars }}>{children}</Context.Provider>
+        </div>
+    );
 }
 
 export default function Demo() {
-    const [Notice, elements] = useNotification();
+    const [notice, elements] = useNotification();
+    const config = {
+        content: 'Hello World',
+        position: 'top',
+        title: <Context.Consumer>{({ title }) => <strong>{title}</strong>}</Context.Consumer>,
+        duration: 0,
+    };
 
     const addNotice = () => {
-        Notice.addNotice({
-            content: 'Hello World',
-            position: 'top',
-            title: <Context.Consumer>{({ title }) => <strong>{title}</strong>}</Context.Consumer>,
-        });
+        const id1 = notice.info(config);
+        const id2 = notice.success(config);
+        const id3 = notice.warning(config);
+        const id4 = notice.error(config);
+        const id5 = notice.open(config);
+
+        // setTimeout(() => {
+        //     notice.close(id5);
+        // }, 1000);
     };
 
     return (

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.6.0",
+    "version": "2.7.1",
     "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.6.0",
-        "@douyinfe/semi-animation-react": "2.6.0",
-        "@douyinfe/semi-foundation": "2.6.0",
-        "@douyinfe/semi-icons": "2.6.0",
-        "@douyinfe/semi-illustrations": "2.6.0",
-        "@douyinfe/semi-theme-default": "2.6.0",
+        "@douyinfe/semi-animation": "2.7.1",
+        "@douyinfe/semi-animation-react": "2.7.1",
+        "@douyinfe/semi-foundation": "2.7.1",
+        "@douyinfe/semi-icons": "2.7.1",
+        "@douyinfe/semi-illustrations": "2.7.1",
+        "@douyinfe/semi-theme-default": "2.7.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "d3a844137fb02b81a93320eb5c183636b05a4a68",
+    "gitHead": "d0dbd6f932a74386b429dedbc32ae92d9e0af7b9",
     "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.6.0",
+        "@douyinfe/semi-scss-compile": "2.7.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/__test__/radioGroup.test.jsx

@@ -196,4 +196,12 @@ describe('RadioGroup', () => {
         expect(middleRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-middle`)).toEqual(true);
         expect(largeRadio.exists(`.${BASE_CLASS_PREFIX}-radio-addon-buttonRadio-large`)).toEqual(true);
     });
-});
+
+    it('does not trigger Maximum update exceeded when setting radio-group\'s value to NaN', () => {
+        const radioGroup = mount(
+            createRadioGroup({ value: NaN }),
+        );
+
+        expect(radioGroup.exists(`${BASE_CLASS_PREFIX}-radio-checked`)).toEqual(false);
+    });
+});

package/radio/_story/radio.stories.js

@@ -865,4 +865,25 @@ export const FixWithFieldLossRef = () => {
     </Form>
   );
 }
-FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';
+FixWithFieldLossRef.storyName = '修复 Form Field 丢失 ref 问题 #384';
+
+
+export const SwitchValueToNaN = () => {
+  const [val, setVal] = useState(1);
+
+  return (
+    <>
+      <RadioGroup direction="vertical" aria-label="单选组合示例" value={val}>
+          <Radio value={1}>A</Radio>
+          <Radio value={2}>B</Radio>
+          <Radio value={3}>C</Radio>
+          <Radio value={4}>D</Radio>
+      </RadioGroup>
+      <Space>
+        <Button onClick={() => setVal(NaN)}>NaN</Button>
+        <Button onClick={() => setVal(2)}>2</Button>
+      </Space>
+    </>
+  );
+}
+SwitchValueToNaN.storyName = 'SwitchValueToNaN';

package/radio/radioGroup.tsx

@@ -97,6 +97,15 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     }
 
     componentDidUpdate(prevProps: RadioGroupProps) {
+        if (typeof prevProps.value === 'number'
+            && isNaN(prevProps.value)
+            && typeof this.props.value === 'number'
+            && isNaN(this.props.value)
+        ) {
+            // `NaN === NaN` returns false, and this will fail the next if check
+            // therefore triggering an infinite loop
+            return;
+        }
         if (prevProps.value !== this.props.value) {
             this.foundation.handlePropValueChange(this.props.value);
         }

package/select/_story/select.stories.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 
 import './select.scss';
-import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space } from '../../index';
+import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag } from '../../index';
 import CustomTrigger from './CustomTrigger';
 import classNames from 'classnames';
 import { getHighLightTextHTML } from '../../_utils/index';
@@ -2903,4 +2903,75 @@ export const AutoClearSearchValue = () => {
 
 SelectInputPropsDemo.story = {
   name: 'AutoClearSearchValue',
-};
+};
+
+
+export const RenderSelectedItemCallCount = () => {
+      const list = [
+        { "name": "夏可漫", "email": "xiakeman@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg" },
+        { "name": "申悦", "email": "shenyue@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/bf8647bffab13c38772c9ff94bf91a9d.jpg" },
+        { "name": "曲晨一", "email": "quchenyi@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/8bd8224511db085ed74fea37205aede5.jpg" },
+        { "name": "文嘉茂", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+        { "name": "文嘉茂2", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+        { "name": "文嘉茂3", "email": "wenjiamao@example.com", "avatar": "https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png" },
+    ]
+
+    const renderMultipleWithCustomTag = (optionNode, { onClose }) => {
+        console.count('rerender')
+        const content = (
+            <Tag
+                avatarSrc={optionNode.avatar}
+                avatarShape='circle'
+                closable={true}
+                onClose={onClose}
+                size='large'
+            >
+                {optionNode.name}
+            </Tag>
+        );
+        return {
+            isRenderInTag: false,
+            content
+        };
+    }
+
+    const renderCustomOption = (item, index) => {
+        const optionStyle = {
+            display: 'flex',
+            paddingLeft: 24,
+            paddingTop: 10,
+            paddingBottom: 10
+        }
+        return (
+            <Select.Option key={index} value={item.name} style={optionStyle} showTick={true}  {...item} key={item.email}>
+                <Avatar size="small" src={item.avatar} />
+                <div style={{ marginLeft: 8 }}>
+                    <div style={{ fontSize: 14 }}>{item.name}</div>
+                    <div style={{ color: 'var(--color-text-2)', fontSize: 12, lineHeight: '16px', fontWeight: 'normal' }}>{item.email}</div>
+                </div>
+            </Select.Option>
+        )
+    }
+
+    return (
+        <>
+            <Select
+                placeholder='请选择'
+                showClear
+                multiple
+                maxTagCount={2}
+                style={{ width: 280, height: 40 }}
+                onChange={v => console.log(v)}
+                defaultValue={'夏可漫'}
+                renderSelectedItem={renderMultipleWithCustomTag}
+            >
+                {list.map((item, index) => renderCustomOption(item, index))}
+            </Select>
+        </>
+    );
+}
+
+
+RenderSelectedItemCallCount.story = {
+  name: 'RenderSelectedItemCallCount',
+};

package/select/index.tsx

@@ -898,8 +898,10 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 content: optionNode.label,
             });
         }
+        
+        const mapItems = maxTagCount ? selectedItems.slice(0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
 
-        const tags = selectedItems.map((item, i) => {
+        const tags = mapItems.map((item, i) => {
             const label = item[0];
             const { value } = item[1];
             const disabled = item[1].disabled || selectDisabled;
@@ -939,11 +941,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
         });
         const placeholderText = placeholder && !inputValue ? <span className={spanCls}>{placeholder}</span> : null;
-        const n = tags.length > maxTagCount ? maxTagCount : undefined;
+        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
 
         const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
-        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} size="large" mode="custom" />;
+        const tagContent = NotOneLine ? tags : <TagGroup tagList={tags} maxTagCount={n} restCount={maxTagCount ? selectedItems.length - maxTagCount : undefined} size="large" mode="custom" />;
 
         return (
             <>

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Popconfirm, Table } from "@douyinfe/semi-ui";
+
+export default function App() {
+    const [data, setData] = useState([{ a: 1 }]);
+    return (
+        <Table
+            dataSource={data}
+            columns={[
+                {
+                    dataIndex: "a",
+                    title: "a",
+                },
+                {
+                    dataIndex: "b",
+                    render: () => {
+                        return (
+                            <Popconfirm
+                                onConfirm={() => {
+                                    setTimeout(() => {
+                                        setData([]);
+                                    });
+                                }}
+                            >
+                                删除
+                            </Popconfirm>
+                        );
+                    },
+                },
+            ]}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -3,4 +3,5 @@ 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 FixedExpandedRow } from './FixedExpandedRow';
+export { default as FixedExpandedRow } from './FixedExpandedRow';
+export { default as FixedMemoryLeak  } from './FixedMemoryLeak';

package/tag/group.tsx

@@ -14,12 +14,13 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
-    mode?: string; // TODO: This API is not in the check file
+    mode?: string;
 }
 
 export default class TagGroup extends PureComponent<TagGroupProps> {
@@ -35,6 +36,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         maxTagCount: PropTypes.number,
+        restCount: PropTypes.number,
         tagList: PropTypes.array,
         size: PropTypes.oneOf(tagSize),
         mode: PropTypes.string,
@@ -77,8 +79,8 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
     }
 
     renderMergeTags(tags: (Tag | React.ReactNode)[]) {
-        const { maxTagCount, tagList } = this.props;
-        const n = tagList.length - maxTagCount;
+        const { maxTagCount, tagList, restCount } = this.props;
+        const n = restCount ? restCount : tagList.length - maxTagCount;
         let renderTags: (Tag | React.ReactNode)[] = tags;
 
         const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);

package/toast/_story/toast.stories.js

@@ -96,3 +96,44 @@ export const _Toast = () => (
 _Toast.story = {
   name: 'toast',
 };
+
+const ReachableContext = React.createContext();
+
+/**
+ * test with cypress
+ * @returns 
+ */
+export const useToastDemo = () => {
+  const [toast, contextHolder] = Toast.useToast();
+  const config = {
+      duration: 0,
+      title: 'This is a success message',
+      content: <ReachableContext.Consumer>{name => `ReachableContext: ${name}`}</ReachableContext.Consumer>,
+  };
+
+  return (
+      <ReachableContext.Provider value="Light">
+          <div>
+              <Button
+                onClick={() => {
+                    toast.success(config);
+                    toast.info(config);
+                    toast.error(config);
+                    toast.warning(config);
+                    const id = toast.open(config);
+
+                    setTimeout(() => {
+                      toast.close(id);
+                    }, 100);
+                }}
+              >
+                  Hook Toast
+              </Button>
+          </div>
+          <div data-cy="context-holder">
+            {contextHolder}
+          </div>
+      </ReachableContext.Provider>
+  );
+};
+useToastDemo.storyName = "useToast";

package/tooltip/index.tsx

@@ -302,7 +302,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 } else {
                     willUpdateStates.visible = visible;
                 }
-                this.setState(willUpdateStates as TooltipState, () => {
+                this.mounted && this.setState(willUpdateStates as TooltipState, () => {
                     cb();
                 });
             },

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(() => { });