@douyinfe/semi-ui 2.23.0-beta.1 → 2.23.1

package/lib/cjs/_base/base.css

@@ -9,6 +9,7 @@ body {
   --semi-transition_duration-fast:0ms;
   --semi-transition_duration-faster:0ms;
   --semi-transition_duration-fastest:0ms;
+  --semi-transition_duration-none:0ms;
   --semi-transition_function-linear:linear;
   --semi-transition_function-ease:ease;
   --semi-transition_function-easeIn:ease-in;

package/lib/cjs/datePicker/yearAndMonth.js

@@ -186,7 +186,6 @@ class YearAndMonth extends _baseComponent.default {
       disabledDate,
       yearAndMonthOpts
     } = this.props;
-    console.log('yearAndMonthOpts', yearAndMonthOpts);
 
     let transform = val => val;
 

package/lib/cjs/dropdown/dropdownMenu.d.ts

@@ -9,7 +9,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         style: PropTypes.Requireable<object>;
     };
     static contextType: React.Context<import("./context").DropdownContextType>;
-    menuRef: React.RefObject<HTMLUListElement>;
     constructor(props: DropdownMenuProps);
     get adapter(): {
         getContext(key: string): any;
@@ -25,7 +24,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         stopPropagation(e: any): void;
         persistEvent: (event: any) => void;
     };
-    componentDidMount(): void;
     render(): JSX.Element;
 }
 export default DropdownMenu;

package/lib/cjs/dropdown/dropdownMenu.js

@@ -37,7 +37,6 @@ const prefixCls = _constants.cssClasses.PREFIX;
 class DropdownMenu extends _baseComponent.default {
   constructor(props) {
     super(props);
-    this.menuRef = /*#__PURE__*/_react.default.createRef();
     this.foundation = new _menuFoundation.default(this.adapter);
   }
 
@@ -45,10 +44,6 @@ class DropdownMenu extends _baseComponent.default {
     return Object.assign({}, super.adapter);
   }
 
-  componentDidMount() {
-    this.foundation.autoFocus(this.menuRef.current);
-  }
-
   render() {
     const _a = this.props,
           {
@@ -60,8 +55,7 @@ class DropdownMenu extends _baseComponent.default {
 
     return /*#__PURE__*/_react.default.createElement("ul", Object.assign({
       role: "menu",
-      "aria-orientation": "vertical",
-      ref: this.menuRef
+      "aria-orientation": "vertical"
     }, rest, {
       className: (0, _classnames.default)("".concat(prefixCls, "-menu"), className),
       style: style,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
-import { Position, TooltipProps, Trigger } from '../tooltip/index';
+import Tooltip, { Position, TooltipProps, Trigger } from '../tooltip/index';
 import DropdownMenu from './dropdownMenu';
 import DropdownItem, { DropdownItemProps } from './dropdownItem';
 import { DropdownDividerProps } from './dropdownDivider';
@@ -87,11 +87,13 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         closeOnEsc: boolean;
         onEscKeyDown: (...args: any[]) => void;
     };
+    tooltipRef: React.RefObject<Tooltip>;
     constructor(props: DropdownProps);
     context: DropdownContextType;
     get adapter(): {
         setPopVisible: (popVisible: boolean) => void;
         notifyVisibleChange: (visible: boolean) => void;
+        getPopupId: () => string;
         getContext(key: string): any;
         getContexts(): any;
         getProp(key: string): any;

package/lib/cjs/dropdown/index.js

@@ -63,6 +63,7 @@ class Dropdown extends _baseComponent.default {
       popVisible: props.visible
     };
     this.foundation = new _foundation.default(this.adapter);
+    this.tooltipRef = /*#__PURE__*/_react.default.createRef();
   }
 
   get adapter() {
@@ -70,7 +71,8 @@ class Dropdown extends _baseComponent.default {
       setPopVisible: popVisible => this.setState({
         popVisible
       }),
-      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible),
+      getPopupId: () => this.tooltipRef.current.getPopupId()
     });
   }
 
@@ -227,7 +229,8 @@ class Dropdown extends _baseComponent.default {
       trigger: trigger,
       onVisibleChange: this.handleVisibleChange,
       showArrow: false,
-      returnFocusOnClose: true
+      returnFocusOnClose: true,
+      ref: this.tooltipRef
     }, attr), /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, {
       //@ts-ignore
       className: (0, _classnames.default)((0, _get2.default)(children, 'props.className'), {

package/lib/cjs/locale/source/vi_VN.js

@@ -105,7 +105,7 @@ const local = {
   },
   Table: {
     emptyText: 'Không kết quả',
-    pageText: 'Hiển thị $ {currentStart} đến $ {currentEnd} trong tổng số $ {total}}'
+    pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}}'
   },
   Select: {
     emptyText: 'Không kết quả',

package/lib/cjs/modal/Modal.js

@@ -74,8 +74,6 @@ class Modal extends _baseComponent.default {
         visible
       } = this.props;
       this.foundation.toggleDisplayNone(!visible);
-      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-      this.foundation.setShouldRender(shouldRender);
     };
 
     this.renderFooter = () => {
@@ -157,8 +155,11 @@ class Modal extends _baseComponent.default {
       const classList = (0, _classnames.default)(className, {
         ["".concat(_constants.cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
       });
+      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone
+      /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+      ;
 
-      if (this.state.shouldRender) {
+      if (shouldRender) {
         this._haveRendered = true;
       }
 
@@ -189,7 +190,7 @@ class Modal extends _baseComponent.default {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return this.state.shouldRender ? /*#__PURE__*/_react.default.createElement(_ModalContent.default, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/_react.default.createElement(_ModalContent.default, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -209,8 +210,7 @@ class Modal extends _baseComponent.default {
 
     this.state = {
       displayNone: !props.visible,
-      isFullScreen: props.fullScreen,
-      shouldRender: this.props.visible || this.props.keepDOM && !this.props.lazyRender
+      isFullScreen: props.fullScreen
     };
     this.foundation = new _modalFoundation.default(this.adapter);
     this.modalRef = /*#__PURE__*/_react.default.createRef();
@@ -265,13 +265,6 @@ class Modal extends _baseComponent.default {
             isFullScreen
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -317,12 +310,6 @@ class Modal extends _baseComponent.default {
       this.foundation.beforeShow();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (!prevState.displayNone && this.state.displayNone) {
       this.foundation.afterHide();
     }

package/lib/cjs/select/index.js

@@ -451,7 +451,7 @@ class Select extends _baseComponent.default {
     } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
 
 
-    if (prevProps.value !== this.props.value || isOptionsChanged) {
+    if (!(0, _isEqual2.default)(this.props.value, prevProps.value) || isOptionsChanged) {
       if ('value' in this.props) {
         this.foundation.handleValueChange(this.props.value);
       } else {

package/lib/cjs/sideSheet/index.js

@@ -61,14 +61,11 @@ class SideSheet extends _baseComponent.default {
     };
 
     this.updateState = () => {
-      const shouldRender = this.props.visible || this.props.keepDOM;
-      this.foundation.setShouldRender(shouldRender);
       this.foundation.toggleDisplayNone(!this.props.visible);
     };
 
     this.state = {
-      displayNone: !this.props.visible,
-      shouldRender: this.props.visible
+      displayNone: !this.props.visible
     };
     this.foundation = new _sideSheetFoundation.default(this.adapter);
   }
@@ -115,13 +112,6 @@ class SideSheet extends _baseComponent.default {
             displayNone: displayNone
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -157,12 +147,6 @@ class SideSheet extends _baseComponent.default {
       this.foundation.afterHide();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM;
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (prevState.displayNone !== this.state.displayNone) {
       this.foundation.onVisibleChange(!this.state.displayNone);
     }
@@ -214,7 +198,10 @@ class SideSheet extends _baseComponent.default {
       width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
-    }); // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
+    });
+    const shouldRender = this.props.visible || this.props.keepDOM || this.props.motion && !this.state.displayNone
+    /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+    ; // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
 
     return /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
       motion: this.props.motion,
@@ -239,7 +226,7 @@ class SideSheet extends _baseComponent.default {
           animationStyle,
           animationEventsNeedBind
         } = _ref2;
-        return this.state.shouldRender ? /*#__PURE__*/_react.default.createElement(_SideSheetContent.default, Object.assign({}, contentProps, {
+        return shouldRender ? /*#__PURE__*/_react.default.createElement(_SideSheetContent.default, Object.assign({}, contentProps, {
           maskExtraProps: maskAnimationEventsNeedBind,
           wrapperExtraProps: animationEventsNeedBind,
           dialogClassName: animationClassName,

package/lib/cjs/tagInput/index.js

@@ -450,9 +450,11 @@ class TagInput extends _baseComponent.default {
     }));
 
     if (active && draggable && sortableListItems.length > 0) {
+      // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
       // @ts-ignore skip SortableItem type check
       return /*#__PURE__*/_react.default.createElement(SortableList, {
         useDragHandle: true,
+        helperClass: "".concat(prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"

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

@@ -185,5 +185,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     renderPortal: () => JSX.Element;
     wrapSpan: (elem: React.ReactNode | React.ReactElement) => JSX.Element;
     mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};
+    getPopupId: () => string;
     render(): JSX.Element;
 }

package/lib/cjs/tooltip/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
@@ -304,6 +306,10 @@ class Tooltip extends _baseComponent.default {
       return mergedEvents;
     };
 
+    this.getPopupId = () => {
+      return this.state.id;
+    };
+
     this.state = {
       visible: false,
 
@@ -615,7 +621,7 @@ class Tooltip extends _baseComponent.default {
       this.props.visible ? this.foundation.delayShow() : this.foundation.delayHide();
     }
 
-    if (prevProps.rePosKey !== this.props.rePosKey) {
+    if (!(0, _isEqual2.default)(prevProps.rePosKey, this.props.rePosKey)) {
       this.rePosition();
     }
   }

package/lib/cjs/transfer/index.js

@@ -49,7 +49,30 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const prefixcls = _constants.cssClasses.PREFIX;
+const prefixcls = _constants.cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
+
+const SortableItem = (0, _reactSortableHoc.SortableElement)(props => props.item.node);
+const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(prefixcls, "-right-list"),
+    role: "list",
+    "aria-label": "Selected list"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore skip SortableItem type check
+  _react.default.createElement(SortableItem, {
+    key: item.label,
+    index: index,
+    item: item
+  }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
+  ;
+}, {
+  distance: 10
+});
 
 class Transfer extends _baseComponent.default {
   constructor(props) {
@@ -493,34 +516,16 @@ class Transfer extends _baseComponent.default {
   }
 
   renderRightSortableList(selectedData) {
-    // when choose some items && draggable is true
-    const SortableItem = (0, _reactSortableHoc.SortableElement)(props => this.renderRightItem(props.item));
-    const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
-      let {
-        items
-      } = _ref;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-right-list"),
-        role: "list",
-        "aria-label": "Selected list"
-      }, items.map((item, index) =>
-      /*#__PURE__*/
-      // @ts-ignore skip SortableItem type check
-      _react.default.createElement(SortableItem, {
-        key: item.label,
-        index: index,
-        item: item
-      }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
-      ;
-    }, {
-      distance: 10
-    }); // @ts-ignore skip SortableItem type check
+    const sortableListItems = selectedData.map(item => Object.assign(Object.assign({}, item), {
+      node: this.renderRightItem(item)
+    })); // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
+    // @ts-ignore skip SortableItem type check
 
     const sortList = /*#__PURE__*/_react.default.createElement(SortableList, {
       useDragHandle: true,
+      helperClass: "".concat(prefixcls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
-      items: selectedData
+      items: sortableListItems
     });
 
     return sortList;

package/lib/es/_base/base.css

@@ -9,6 +9,7 @@ body {
   --semi-transition_duration-fast:0ms;
   --semi-transition_duration-faster:0ms;
   --semi-transition_duration-fastest:0ms;
+  --semi-transition_duration-none:0ms;
   --semi-transition_function-linear:linear;
   --semi-transition_function-ease:ease;
   --semi-transition_function-easeIn:ease-in;

package/lib/es/datePicker/yearAndMonth.js

@@ -163,7 +163,6 @@ class YearAndMonth extends BaseComponent {
       disabledDate,
       yearAndMonthOpts
     } = this.props;
-    console.log('yearAndMonthOpts', yearAndMonthOpts);
 
     let transform = val => val;
 

package/lib/es/dropdown/dropdownMenu.d.ts

@@ -9,7 +9,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         style: PropTypes.Requireable<object>;
     };
     static contextType: React.Context<import("./context").DropdownContextType>;
-    menuRef: React.RefObject<HTMLUListElement>;
     constructor(props: DropdownMenuProps);
     get adapter(): {
         getContext(key: string): any;
@@ -25,7 +24,6 @@ declare class DropdownMenu extends BaseComponent<DropdownMenuProps> {
         stopPropagation(e: any): void;
         persistEvent: (event: any) => void;
     };
-    componentDidMount(): void;
     render(): JSX.Element;
 }
 export default DropdownMenu;

package/lib/es/dropdown/dropdownMenu.js

@@ -21,7 +21,6 @@ const prefixCls = cssClasses.PREFIX;
 class DropdownMenu extends BaseComponent {
   constructor(props) {
     super(props);
-    this.menuRef = /*#__PURE__*/React.createRef();
     this.foundation = new Foundation(this.adapter);
   }
 
@@ -29,10 +28,6 @@ class DropdownMenu extends BaseComponent {
     return Object.assign({}, super.adapter);
   }
 
-  componentDidMount() {
-    this.foundation.autoFocus(this.menuRef.current);
-  }
-
   render() {
     const _a = this.props,
           {
@@ -44,8 +39,7 @@ class DropdownMenu extends BaseComponent {
 
     return /*#__PURE__*/React.createElement("ul", Object.assign({
       role: "menu",
-      "aria-orientation": "vertical",
-      ref: this.menuRef
+      "aria-orientation": "vertical"
     }, rest, {
       className: classnames("".concat(prefixCls, "-menu"), className),
       style: style,

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
-import { Position, TooltipProps, Trigger } from '../tooltip/index';
+import Tooltip, { Position, TooltipProps, Trigger } from '../tooltip/index';
 import DropdownMenu from './dropdownMenu';
 import DropdownItem, { DropdownItemProps } from './dropdownItem';
 import { DropdownDividerProps } from './dropdownDivider';
@@ -87,11 +87,13 @@ declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         closeOnEsc: boolean;
         onEscKeyDown: (...args: any[]) => void;
     };
+    tooltipRef: React.RefObject<Tooltip>;
     constructor(props: DropdownProps);
     context: DropdownContextType;
     get adapter(): {
         setPopVisible: (popVisible: boolean) => void;
         notifyVisibleChange: (visible: boolean) => void;
+        getPopupId: () => string;
         getContext(key: string): any;
         getContexts(): any;
         getProp(key: string): any;

package/lib/es/dropdown/index.js

@@ -39,6 +39,7 @@ class Dropdown extends BaseComponent {
       popVisible: props.visible
     };
     this.foundation = new Foundation(this.adapter);
+    this.tooltipRef = /*#__PURE__*/React.createRef();
   }
 
   get adapter() {
@@ -46,7 +47,8 @@ class Dropdown extends BaseComponent {
       setPopVisible: popVisible => this.setState({
         popVisible
       }),
-      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible),
+      getPopupId: () => this.tooltipRef.current.getPopupId()
     });
   }
 
@@ -203,7 +205,8 @@ class Dropdown extends BaseComponent {
       trigger: trigger,
       onVisibleChange: this.handleVisibleChange,
       showArrow: false,
-      returnFocusOnClose: true
+      returnFocusOnClose: true,
+      ref: this.tooltipRef
     }, attr), /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
       //@ts-ignore
       className: classnames(_get(children, 'props.className'), {

package/lib/es/locale/source/vi_VN.js

@@ -97,7 +97,7 @@ const local = {
   },
   Table: {
     emptyText: 'Không kết quả',
-    pageText: 'Hiển thị $ {currentStart} đến $ {currentEnd} trong tổng số $ {total}}'
+    pageText: 'Hiển thị ${currentStart} đến ${currentEnd} trong tổng số ${total}}'
   },
   Select: {
     emptyText: 'Không kết quả',

package/lib/es/modal/Modal.js

@@ -46,8 +46,6 @@ class Modal extends BaseComponent {
         visible
       } = this.props;
       this.foundation.toggleDisplayNone(!visible);
-      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-      this.foundation.setShouldRender(shouldRender);
     };
 
     this.renderFooter = () => {
@@ -129,8 +127,11 @@ class Modal extends BaseComponent {
       const classList = cls(className, {
         ["".concat(cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
       });
+      const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered) || this.props.motion && !this.state.displayNone
+      /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+      ;
 
-      if (this.state.shouldRender) {
+      if (shouldRender) {
         this._haveRendered = true;
       }
 
@@ -161,7 +162,7 @@ class Modal extends BaseComponent {
             animationClassName: maskAnimationClassName,
             animationEventsNeedBind: maskAnimationEventsNeedBind
           } = _ref2;
-          return this.state.shouldRender ? /*#__PURE__*/React.createElement(ModalContent, Object.assign({}, restProps, {
+          return shouldRender ? /*#__PURE__*/React.createElement(ModalContent, Object.assign({}, restProps, {
             contentExtraProps: animationEventsNeedBind,
             maskExtraProps: maskAnimationEventsNeedBind,
             isFullScreen: this.state.isFullScreen,
@@ -181,8 +182,7 @@ class Modal extends BaseComponent {
 
     this.state = {
       displayNone: !props.visible,
-      isFullScreen: props.fullScreen,
-      shouldRender: this.props.visible || this.props.keepDOM && !this.props.lazyRender
+      isFullScreen: props.fullScreen
     };
     this.foundation = new ModalFoundation(this.adapter);
     this.modalRef = /*#__PURE__*/React.createRef();
@@ -237,13 +237,6 @@ class Modal extends BaseComponent {
             isFullScreen
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -289,12 +282,6 @@ class Modal extends BaseComponent {
       this.foundation.beforeShow();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM && (!this.props.lazyRender || this._haveRendered);
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (!prevState.displayNone && this.state.displayNone) {
       this.foundation.afterHide();
     }

package/lib/es/select/index.js

@@ -405,7 +405,7 @@ class Select extends BaseComponent {
     } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
 
 
-    if (prevProps.value !== this.props.value || isOptionsChanged) {
+    if (!_isEqual(this.props.value, prevProps.value) || isOptionsChanged) {
       if ('value' in this.props) {
         this.foundation.handleValueChange(this.props.value);
       } else {

package/lib/es/sideSheet/index.js

@@ -40,14 +40,11 @@ export default class SideSheet extends BaseComponent {
     };
 
     this.updateState = () => {
-      const shouldRender = this.props.visible || this.props.keepDOM;
-      this.foundation.setShouldRender(shouldRender);
       this.foundation.toggleDisplayNone(!this.props.visible);
     };
 
     this.state = {
-      displayNone: !this.props.visible,
-      shouldRender: this.props.visible
+      displayNone: !this.props.visible
     };
     this.foundation = new SideSheetFoundation(this.adapter);
   }
@@ -94,13 +91,6 @@ export default class SideSheet extends BaseComponent {
             displayNone: displayNone
           });
         }
-      },
-      setShouldRender: shouldRender => {
-        if (shouldRender !== this.state.shouldRender) {
-          this.setState({
-            shouldRender
-          });
-        }
       }
     });
   }
@@ -136,12 +126,6 @@ export default class SideSheet extends BaseComponent {
       this.foundation.afterHide();
     }
 
-    const shouldRender = this.props.visible || this.props.keepDOM;
-
-    if (shouldRender === true && this.state.shouldRender === false) {
-      this.foundation.setShouldRender(true);
-    }
-
     if (prevState.displayNone !== this.state.displayNone) {
       this.foundation.onVisibleChange(!this.state.displayNone);
     }
@@ -193,7 +177,10 @@ export default class SideSheet extends BaseComponent {
       width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
-    }); // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
+    });
+    const shouldRender = this.props.visible || this.props.keepDOM || this.props.motion && !this.state.displayNone
+    /* When there is animation, we use displayNone to judge whether animation is ended and judge whether to unmount content */
+    ; // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
 
     return /*#__PURE__*/React.createElement(CSSAnimation, {
       motion: this.props.motion,
@@ -218,7 +205,7 @@ export default class SideSheet extends BaseComponent {
           animationStyle,
           animationEventsNeedBind
         } = _ref2;
-        return this.state.shouldRender ? /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
+        return shouldRender ? /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
           maskExtraProps: maskAnimationEventsNeedBind,
           wrapperExtraProps: animationEventsNeedBind,
           dialogClassName: animationClassName,