@douyinfe/semi-ui 2.23.0 → 2.23.2

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/radio/radio.d.ts

@@ -82,7 +82,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
         prefixCls?: string;
         name?: string;
         onChange?: (e: RadioChangeEvent) => void;
-        buttonSize?: "small" | "middle" | "large";
+        buttonSize?: "small" | "large" | "middle";
         isCardRadio?: boolean;
         isPureCardRadio?: boolean;
     };

package/lib/es/radio/radioGroup.d.ts

@@ -48,7 +48,7 @@ declare class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState>
         disabled: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<any[]>;
-        buttonSize: PropTypes.Requireable<"small" | "middle" | "large">;
+        buttonSize: PropTypes.Requireable<"small" | "large" | "middle">;
         type: PropTypes.Requireable<"default" | "button" | "card" | "pureCard">;
         value: PropTypes.Requireable<any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;

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,

package/lib/es/tagInput/index.js

@@ -420,9 +420,11 @@ class TagInput extends BaseComponent {
     }));
 
     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.createElement(SortableList, {
         useDragHandle: true,
+        helperClass: "".concat(prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"
@@ -482,8 +484,8 @@ class TagInput extends BaseComponent {
       ["".concat(prefixCls, "-error")]: validateStatus === 'error',
       ["".concat(prefixCls, "-warning")]: validateStatus === 'warning'
     });
-    const inputCls = cls("".concat(prefixCls, "-wrapper-input"));
-    const wrapperCls = cls("".concat(prefixCls, "-wrapper"));
+    const inputCls = cls("".concat(prefixCls, "-wrapper-input"), "".concat(prefixCls, "-wrapper-input-").concat(size));
+    const wrapperCls = cls("".concat(prefixCls, "-wrapper"), "".concat(prefixCls, "-wrapper-").concat(size));
     return (
       /*#__PURE__*/
       // eslint-disable-next-line 

package/lib/es/transfer/index.js

@@ -19,7 +19,30 @@ import Spin from '../spin';
 import Button from '../button';
 import Tree from '../tree';
 import { IconClose, IconSearch, IconHandle } from '@douyinfe/semi-icons';
-const prefixcls = cssClasses.PREFIX;
+const prefixcls = cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
+
+const SortableItem = SortableElement(props => props.item.node);
+const SortableList = SortableContainer(_ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/React.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.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 {
   constructor(props) {
@@ -462,34 +485,16 @@ class Transfer extends BaseComponent {
   }
 
   renderRightSortableList(selectedData) {
-    // when choose some items && draggable is true
-    const SortableItem = SortableElement(props => this.renderRightItem(props.item));
-    const SortableList = SortableContainer(_ref => {
-      let {
-        items
-      } = _ref;
-      return /*#__PURE__*/React.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.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.createElement(SortableList, {
       useDragHandle: true,
+      helperClass: "".concat(prefixcls, "-right-item-drag-item-move"),
       onSortEnd: this.onSortEnd,
-      items: selectedData
+      items: sortableListItems
     });
     return sortList;
   }

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

@@ -64,7 +64,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
         spacing: PropTypes.Requireable<"normal" | "extended">;
         strong: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<"small" | "normal">;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;

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

@@ -28,7 +28,7 @@ export default class Numeral extends PureComponent<NumeralProps> {
     static propTypes: {
         rule: PropTypes.Requireable<"text" | "numbers" | "bytes-decimal" | "bytes-binary" | "percentages" | "exponential">;
         precision: PropTypes.Requireable<number>;
-        truncate: PropTypes.Requireable<"ceil" | "floor" | "round">;
+        truncate: PropTypes.Requireable<"round" | "ceil" | "floor">;
         parser: PropTypes.Requireable<(...args: any[]) => any>;
         copyable: PropTypes.Requireable<NonNullable<boolean | object>>;
         delete: PropTypes.Requireable<boolean>;
@@ -38,7 +38,7 @@ export default class Numeral extends PureComponent<NumeralProps> {
         underline: PropTypes.Requireable<boolean>;
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
         size: PropTypes.Requireable<"small" | "normal">;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

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

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

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

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

package/lib/es/typography/title.d.ts

@@ -36,7 +36,7 @@ export default class Title extends PureComponent<TitleProps> {
         link: PropTypes.Requireable<NonNullable<boolean | object>>;
         underline: PropTypes.Requireable<boolean>;
         strong: PropTypes.Requireable<boolean>;
-        type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
+        type: PropTypes.Requireable<"warning" | "success" | "primary" | "secondary" | "tertiary" | "danger" | "quaternary">;
         heading: PropTypes.Requireable<1 | 2 | 3 | 4 | 6 | 5>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

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

@@ -142,7 +142,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.23.0",
+    "version": "2.23.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.23.0",
-        "@douyinfe/semi-foundation": "2.23.0",
-        "@douyinfe/semi-icons": "2.23.0",
+        "@douyinfe/semi-animation-react": "2.23.2",
+        "@douyinfe/semi-foundation": "2.23.2",
+        "@douyinfe/semi-icons": "2.23.2",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.23.0",
+        "@douyinfe/semi-theme-default": "2.23.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "a5195872c7df1a97551c6c23357bdb941b8fa807",
+    "gitHead": "b7fc3d0d2fe9dafb8e3ec4706b9a68212bb5f6bc",
     "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.23.0",
+        "@douyinfe/semi-scss-compile": "2.23.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",