@douyinfe/semi-ui 2.27.1 → 2.28.0-beta.1

package/lib/es/image/previewImage.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import Spin from "../spin";
 import PreviewImageFoundation from '@douyinfe/semi-foundation/lib/es/image/previewImageFoundation';
 const prefixCls = cssClasses.PREFIX;
-const preViewImgPrefixCls = "".concat(prefixCls, "-preview-image");
+const preViewImgPrefixCls = `${prefixCls}-preview-image`;
 let originImageWidth = null;
 let originImageHeight = null;
 let startMouseMove = false; // startMouseOffset：The offset of the mouse relative to the left and top of the picture
@@ -185,20 +185,20 @@ export default class PreviewImage extends BaseComponent {
     const imgStyle = {
       position: "absolute",
       visibility: loading ? "hidden" : "visible",
-      transform: "rotate(".concat(-rotation, "deg)"),
+      transform: `rotate(${-rotation}deg)`,
       top,
       left,
-      width: loading ? "auto" : "".concat(width, "px"),
-      height: loading ? "auto" : "".concat(height, "px")
+      width: loading ? "auto" : `${width}px`,
+      height: loading ? "auto" : `${height}px`
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(preViewImgPrefixCls),
+      className: `${preViewImgPrefixCls}`,
       ref: this.containerRef
     }, /*#__PURE__*/React.createElement("img", {
       ref: this.registryImageRef,
       src: src,
       alt: "previewImag",
-      className: "".concat(preViewImgPrefixCls, "-img"),
+      className: `${preViewImgPrefixCls}-img`,
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
@@ -211,7 +211,7 @@ export default class PreviewImage extends BaseComponent {
       crossOrigin: crossOrigin
     }), loading && /*#__PURE__*/React.createElement(Spin, {
       size: "large",
-      wrapperClassName: "".concat(preViewImgPrefixCls, "-spin")
+      wrapperClassName: `${preViewImgPrefixCls}-spin`
     }));
   }
 

package/lib/es/image/previewInner.js

@@ -116,7 +116,7 @@ export default class PreviewInner extends BaseComponent {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
-          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
+          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
         }
       },
       enabledBodyScroll: () => {
@@ -328,12 +328,12 @@ export default class PreviewInner extends BaseComponent {
       };
     }
 
-    const previewPrefixCls = "".concat(prefixCls, "-preview");
+    const previewPrefixCls = `${prefixCls}-preview`;
     const previewWrapperCls = cls(previewPrefixCls, {
-      ["".concat(prefixCls, "-hide")]: !visible,
-      ["".concat(previewPrefixCls, "-popup")]: getPopupContainer
+      [`${prefixCls}-hide`]: !visible,
+      [`${previewPrefixCls}-popup`]: getPopupContainer
     }, className);
-    const hideViewerCls = !viewerVisible ? "".concat(previewPrefixCls, "-hide") : "";
+    const hideViewerCls = !viewerVisible ? `${previewPrefixCls}-hide` : "";
     const total = imgSrc.length;
     const showPrev = total !== 1 && (infinite || currentIndex !== 0);
     const showNext = total !== 1 && (infinite || currentIndex !== total - 1);
@@ -371,7 +371,7 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      className: cls("".concat(previewPrefixCls, "-icon"), "".concat(previewPrefixCls, "-prev"), hideViewerCls),
+      className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-prev`, hideViewerCls),
       onClick: () => this.handleSwitchImage("prev")
     }, /*#__PURE__*/React.createElement(IconArrowLeft, {
       size: "large"
@@ -379,7 +379,7 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      className: cls("".concat(previewPrefixCls, "-icon"), "".concat(previewPrefixCls, "-next"), hideViewerCls),
+      className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-next`, hideViewerCls),
       onClick: () => this.handleSwitchImage("next")
     }, /*#__PURE__*/React.createElement(IconArrowRight, {
       size: "large"

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

@@ -154,7 +154,7 @@ declare class Input extends BaseComponent<InputProps, InputState> {
         getProps(): InputProps;
         getState(key: string): any;
         getStates(): InputState;
-        setState(s: Pick<InputState, keyof InputState>, callback?: any): void;
+        setState<K extends keyof InputState>(s: Pick<InputState, K>, callback?: any): void;
         getCache(c: string): any;
         getCaches(): any;
         setCache(key: any, value: any): void;

package/lib/es/input/index.js

@@ -168,9 +168,9 @@ class Input extends BaseComponent {
 
     if (addonBefore) {
       const prefixWrapperCls = cls({
-        ["".concat(prefixCls, "-prepend")]: true,
-        ["".concat(prefixCls, "-prepend-text")]: addonBefore && _isString(addonBefore),
-        ["".concat(prefixCls, "-prepend-icon")]: isSemiIcon(addonBefore)
+        [`${prefixCls}-prepend`]: true,
+        [`${prefixCls}-prepend-text`]: addonBefore && _isString(addonBefore),
+        [`${prefixCls}-prepend-icon`]: isSemiIcon(addonBefore)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -188,9 +188,9 @@ class Input extends BaseComponent {
 
     if (addonAfter) {
       const prefixWrapperCls = cls({
-        ["".concat(prefixCls, "-append")]: true,
-        ["".concat(prefixCls, "-append-text")]: addonAfter && _isString(addonAfter),
-        ["".concat(prefixCls, "-append-icon")]: isSemiIcon(addonAfter)
+        [`${prefixCls}-append`]: true,
+        [`${prefixCls}-append-text`]: addonAfter && _isString(addonAfter),
+        [`${prefixCls}-append-icon`]: isSemiIcon(addonAfter)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -202,7 +202,7 @@ class Input extends BaseComponent {
   }
 
   renderClearBtn() {
-    const clearCls = cls("".concat(prefixCls, "-clearbtn"));
+    const clearCls = cls(`${prefixCls}-clearbtn`);
     const {
       clearIcon
     } = this.props;
@@ -230,7 +230,7 @@ class Input extends BaseComponent {
       mode,
       disabled
     } = this.props;
-    const modeCls = cls("".concat(prefixCls, "-modebtn"));
+    const modeCls = cls(`${prefixCls}-modebtn`);
     const modeIcon = eyeClosed ? /*#__PURE__*/React.createElement(IconEyeClosedSolid, null) : /*#__PURE__*/React.createElement(IconEyeOpened, null); // alway show password button for a11y
 
     const showModeBtn = mode === 'password' && !disabled;
@@ -265,10 +265,10 @@ class Input extends BaseComponent {
     }
 
     const prefixWrapperCls = cls({
-      ["".concat(prefixCls, "-prefix")]: true,
-      ["".concat(prefixCls, "-inset-label")]: insetLabel,
-      ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
-      ["".concat(prefixCls, "-prefix-icon")]: isSemiIcon(labelNode)
+      [`${prefixCls}-prefix`]: true,
+      [`${prefixCls}-inset-label`]: insetLabel,
+      [`${prefixCls}-prefix-text`]: labelNode && _isString(labelNode),
+      [`${prefixCls}-prefix-icon`]: isSemiIcon(labelNode)
     });
     return (
       /*#__PURE__*/
@@ -307,10 +307,10 @@ class Input extends BaseComponent {
     }
 
     const suffixWrapperCls = cls({
-      ["".concat(prefixCls, "-suffix")]: true,
-      ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
-      ["".concat(prefixCls, "-suffix-icon")]: isSemiIcon(suffix),
-      ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
+      [`${prefixCls}-suffix`]: true,
+      [`${prefixCls}-suffix-text`]: suffix && _isString(suffix),
+      [`${prefixCls}-suffix-icon`]: isSemiIcon(suffix),
+      [`${prefixCls}-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix)
     });
     return (
       /*#__PURE__*/
@@ -387,31 +387,31 @@ class Input extends BaseComponent {
     const suffixAllowClear = this.showClearBtn();
     const suffixIsIcon = isSemiIcon(suffix);
     const ref = this.getInputRef();
-    const wrapperPrefix = "".concat(prefixCls, "-wrapper");
+    const wrapperPrefix = `${prefixCls}-wrapper`;
     const wrapperCls = cls(wrapperPrefix, className, {
-      ["".concat(prefixCls, "-wrapper__with-prefix")]: prefix || insetLabel,
-      ["".concat(prefixCls, "-wrapper__with-suffix")]: suffix,
-      ["".concat(prefixCls, "-wrapper__with-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix),
-      ["".concat(prefixCls, "-wrapper__with-suffix-icon")]: suffixIsIcon,
-      ["".concat(prefixCls, "-wrapper__with-append")]: addonBefore,
-      ["".concat(prefixCls, "-wrapper__with-prepend")]: addonAfter,
-      ["".concat(prefixCls, "-wrapper__with-append-only")]: addonBefore && !addonAfter,
-      ["".concat(prefixCls, "-wrapper__with-prepend-only")]: !addonBefore && addonAfter,
-      ["".concat(wrapperPrefix, "-readonly")]: readonly,
-      ["".concat(wrapperPrefix, "-disabled")]: disabled,
-      ["".concat(wrapperPrefix, "-warning")]: validateStatus === 'warning',
-      ["".concat(wrapperPrefix, "-error")]: validateStatus === 'error',
-      ["".concat(wrapperPrefix, "-focus")]: isFocus,
-      ["".concat(wrapperPrefix, "-clearable")]: showClear,
-      ["".concat(wrapperPrefix, "-modebtn")]: mode === 'password',
-      ["".concat(wrapperPrefix, "-hidden")]: type === 'hidden',
-      ["".concat(wrapperPrefix, "-").concat(size)]: size
+      [`${prefixCls}-wrapper__with-prefix`]: prefix || insetLabel,
+      [`${prefixCls}-wrapper__with-suffix`]: suffix,
+      [`${prefixCls}-wrapper__with-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix),
+      [`${prefixCls}-wrapper__with-suffix-icon`]: suffixIsIcon,
+      [`${prefixCls}-wrapper__with-append`]: addonBefore,
+      [`${prefixCls}-wrapper__with-prepend`]: addonAfter,
+      [`${prefixCls}-wrapper__with-append-only`]: addonBefore && !addonAfter,
+      [`${prefixCls}-wrapper__with-prepend-only`]: !addonBefore && addonAfter,
+      [`${wrapperPrefix}-readonly`]: readonly,
+      [`${wrapperPrefix}-disabled`]: disabled,
+      [`${wrapperPrefix}-warning`]: validateStatus === 'warning',
+      [`${wrapperPrefix}-error`]: validateStatus === 'error',
+      [`${wrapperPrefix}-focus`]: isFocus,
+      [`${wrapperPrefix}-clearable`]: showClear,
+      [`${wrapperPrefix}-modebtn`]: mode === 'password',
+      [`${wrapperPrefix}-hidden`]: type === 'hidden',
+      [`${wrapperPrefix}-${size}`]: size
     });
     const inputCls = cls(prefixCls, {
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-sibling-clearbtn")]: this.foundation.isAllowClear(),
-      ["".concat(prefixCls, "-sibling-modebtn")]: mode === 'password'
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-sibling-clearbtn`]: this.foundation.isAllowClear(),
+      [`${prefixCls}-sibling-modebtn`]: mode === 'password'
     });
     const inputValue = value === null || value === undefined ? '' : value;
     const inputProps = Object.assign(Object.assign({}, rest), {

package/lib/es/input/inputGroup.js

@@ -36,12 +36,12 @@ export default class inputGroup extends BaseComponent {
           rest = __rest(_a, ["size", "className", "label", "labelPosition"]);
 
     const groupWrapperCls = cls({
-      ["".concat(prefixCls, "-group-wrapper")]: true,
-      ["".concat(prefixCls, "-group-wrapper-with-top-label")]: labelPosition === 'top',
-      ["".concat(prefixCls, "-group-wrapper-with-left-label")]: labelPosition === 'left'
+      [`${prefixCls}-group-wrapper`]: true,
+      [`${prefixCls}-group-wrapper-with-top-label`]: labelPosition === 'top',
+      [`${prefixCls}-group-wrapper-with-left-label`]: labelPosition === 'left'
     });
-    const groupCls = cls("".concat(prefixCls, "-group"), className, {
-      ["".concat(prefixCls, "-").concat(size)]: size !== 'default'
+    const groupCls = cls(`${prefixCls}-group`, className, {
+      [`${prefixCls}-${size}`]: size !== 'default'
     }); // const labelCls = cls(label.className, '');
 
     const defaultName = 'input-group';
@@ -74,8 +74,8 @@ export default class inputGroup extends BaseComponent {
     } = _a,
           rest = __rest(_a, ["size", "style", "className", "children", "label", "onBlur", "onFocus", "disabled"]);
 
-    const groupCls = cls("".concat(prefixCls, "-group"), {
-      ["".concat(prefixCls, "-").concat(size)]: size !== 'default'
+    const groupCls = cls(`${prefixCls}-group`, {
+      [`${prefixCls}-${size}`]: size !== 'default'
     }, className);
     let inner;
 

package/lib/es/input/textarea.js

@@ -152,8 +152,8 @@ class TextArea extends BaseComponent {
       showClear
     } = this.props;
     const displayClearBtn = this.foundation.isAllowClear();
-    const clearCls = cls("".concat(prefixCls, "-clearbtn"), {
-      ["".concat(prefixCls, "-clearbtn-hidden")]: !displayClearBtn
+    const clearCls = cls(`${prefixCls}-clearbtn`, {
+      [`${prefixCls}-clearbtn-hidden`]: !displayClearBtn
     });
 
     if (showClear) {
@@ -185,8 +185,8 @@ class TextArea extends BaseComponent {
 
       current = value ? _isFunction(getValueLength) ? getValueLength(value) : value.length : 0;
       total = maxCount || null;
-      countCls = cls("".concat(prefixCls, "-textarea-counter"), {
-        ["".concat(prefixCls, "-textarea-counter-exceed")]: current > total
+      countCls = cls(`${prefixCls}-textarea-counter`, {
+        [`${prefixCls}-textarea-counter-exceed`]: current > total
       });
       counter = /*#__PURE__*/React.createElement("div", {
         className: countCls
@@ -227,19 +227,19 @@ class TextArea extends BaseComponent {
       value,
       minLength: stateMinLength
     } = this.state;
-    const wrapperCls = cls(className, "".concat(prefixCls, "-textarea-wrapper"), {
-      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled,
-      ["".concat(prefixCls, "-textarea-wrapper-readonly")]: readonly,
-      ["".concat(prefixCls, "-textarea-wrapper-").concat(validateStatus)]: Boolean(validateStatus),
-      ["".concat(prefixCls, "-textarea-wrapper-focus")]: isFocus // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
+    const wrapperCls = cls(className, `${prefixCls}-textarea-wrapper`, {
+      [`${prefixCls}-textarea-wrapper-disabled`]: disabled,
+      [`${prefixCls}-textarea-wrapper-readonly`]: readonly,
+      [`${prefixCls}-textarea-wrapper-${validateStatus}`]: Boolean(validateStatus),
+      [`${prefixCls}-textarea-wrapper-focus`]: isFocus // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
 
     }); // const ref = this.props.forwardRef || this.textAreaRef;
 
-    const itemCls = cls("".concat(prefixCls, "-textarea"), {
-      ["".concat(prefixCls, "-textarea-disabled")]: disabled,
-      ["".concat(prefixCls, "-textarea-readonly")]: readonly,
-      ["".concat(prefixCls, "-textarea-autosize")]: autosize,
-      ["".concat(prefixCls, "-textarea-showClear")]: showClear
+    const itemCls = cls(`${prefixCls}-textarea`, {
+      [`${prefixCls}-textarea-disabled`]: disabled,
+      [`${prefixCls}-textarea-readonly`]: readonly,
+      [`${prefixCls}-textarea-autosize`]: autosize,
+      [`${prefixCls}-textarea-showClear`]: showClear
     });
     const itemProps = Object.assign(Object.assign({}, _omit(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
       className: itemCls,

package/lib/es/inputNumber/index.js

@@ -92,17 +92,17 @@ class InputNumber extends BaseComponent {
       } = this.state;
       const notAllowedUp = disabled ? disabled : number === max;
       const notAllowedDown = disabled ? disabled : number === min;
-      const suffixChildrenCls = classnames("".concat(prefixCls, "-number-suffix-btns"), {
-        ["".concat(prefixCls, "-number-suffix-btns-inner")]: innerButtons,
-        ["".concat(prefixCls, "-number-suffix-btns-inner-hover")]: innerButtons && hovering && !focusing
+      const suffixChildrenCls = classnames(`${prefixCls}-number-suffix-btns`, {
+        [`${prefixCls}-number-suffix-btns-inner`]: innerButtons,
+        [`${prefixCls}-number-suffix-btns-inner-hover`]: innerButtons && hovering && !focusing
       });
-      const upClassName = classnames("".concat(prefixCls, "-number-button"), "".concat(prefixCls, "-number-button-up"), {
-        ["".concat(prefixCls, "-number-button-up-disabled")]: disabled,
-        ["".concat(prefixCls, "-number-button-up-not-allowed")]: notAllowedUp
+      const upClassName = classnames(`${prefixCls}-number-button`, `${prefixCls}-number-button-up`, {
+        [`${prefixCls}-number-button-up-disabled`]: disabled,
+        [`${prefixCls}-number-button-up-not-allowed`]: notAllowedUp
       });
-      const downClassName = classnames("".concat(prefixCls, "-number-button"), "".concat(prefixCls, "-number-button-down"), {
-        ["".concat(prefixCls, "-number-button-down-disabled")]: disabled,
-        ["".concat(prefixCls, "-number-button-down-not-allowed")]: notAllowedDown
+      const downClassName = classnames(`${prefixCls}-number-button`, `${prefixCls}-number-button-down`, {
+        [`${prefixCls}-number-button-down-disabled`]: disabled,
+        [`${prefixCls}-number-button-down-not-allowed`]: notAllowedDown
       });
       return /*#__PURE__*/React.createElement("div", {
         className: suffixChildrenCls
@@ -428,8 +428,8 @@ class InputNumber extends BaseComponent {
       value,
       number
     } = this.state;
-    const inputNumberCls = classnames(className, "".concat(prefixCls, "-number"), {
-      ["".concat(prefixCls, "-number-size-").concat(size)]: size
+    const inputNumberCls = classnames(className, `${prefixCls}-number`, {
+      [`${prefixCls}-number-size-${size}`]: size
     });
     const buttons = this.renderButtons();
     const ariaProps = {

package/lib/es/layout/Sider.d.ts

@@ -33,6 +33,7 @@ declare class Sider extends React.PureComponent<SiderProps> {
         prefixCls: string;
     };
     static contextType: React.Context<ContextType>;
+    static elementType: string;
     unRegisters: Array<() => void>;
     context: ContextType;
     uniqueId: string;

package/lib/es/layout/Sider.js

@@ -29,7 +29,7 @@ const generateId = (() => {
   let i = 0;
   return () => {
     i += 1;
-    return "".concat(cssClasses.PREFIX, "-sider-").concat(i);
+    return `${cssClasses.PREFIX}-sider-${i}`;
   };
 })();
 
@@ -92,14 +92,14 @@ class Sider extends React.PureComponent {
           others = __rest(_a, ["prefixCls", "className", "children", "style"]);
 
     const classString = cls(className, {
-      ["".concat(prefixCls, "-sider")]: true
+      [`${prefixCls}-sider`]: true
     });
     return /*#__PURE__*/React.createElement("aside", Object.assign({
       className: classString,
       "aria-label": this.props['aria-label'],
       style: style
     }, getDataAttr(others)), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-sider-children")
+      className: `${prefixCls}-sider-children`
     }, children));
   }
 
@@ -118,4 +118,5 @@ Sider.defaultProps = {
   prefixCls: cssClasses.PREFIX
 };
 Sider.contextType = LayoutContext;
+Sider.elementType = "Layout.Sider";
 export default Sider;

package/lib/es/layout/index.js

@@ -51,7 +51,7 @@ class Basic extends React.PureComponent {
     } = _a,
           others = __rest(_a, ["prefixCls", "type", "className", "children", "tagName"]);
 
-    const classString = cls(className, "".concat(prefixCls, "-").concat(type));
+    const classString = cls(className, `${prefixCls}-${type}`);
     return /*#__PURE__*/React.createElement(tagName, Object.assign({
       className: classString
     }, others), children);
@@ -109,7 +109,9 @@ class Layout extends React.Component {
       siders
     } = this.state;
     const classString = cls(className, prefixCls, {
-      ["".concat(prefixCls, "-has-sider")]: typeof hasSider === 'boolean' ? hasSider : siders.length > 0
+      [`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' && hasSider || siders.length > 0 || React.Children.toArray(children).some(child => {
+        return /*#__PURE__*/React.isValidElement(child) && child.type && child.type.elementType === "Layout.Sider";
+      })
     });
     const Tag = tagName;
     return /*#__PURE__*/React.createElement(LayoutContext.Provider, {

package/lib/es/list/index.js

@@ -23,14 +23,14 @@ class List extends BaseComponent {
 
       if (emptyContent) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "".concat(cssClasses.PREFIX, "-empty"),
+          className: `${cssClasses.PREFIX}-empty`,
           "x-semi-prop": "emptyContent"
         }, emptyContent);
       } else {
         return /*#__PURE__*/React.createElement(LocaleConsumer, {
           componentName: "List"
         }, locale => /*#__PURE__*/React.createElement("div", {
-          className: "".concat(cssClasses.PREFIX, "-empty")
+          className: `${cssClasses.PREFIX}-empty`
         }, locale.emptyText));
       }
     };
@@ -54,7 +54,7 @@ class List extends BaseComponent {
     }
 
     return /*#__PURE__*/React.createElement("ul", {
-      className: "".concat(prefixCls, "-items")
+      className: `${prefixCls}-items`
     }, childrenList ? childrenList : null, children);
   }
 
@@ -78,11 +78,11 @@ class List extends BaseComponent {
       children
     } = this.props;
     const wrapperCls = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-flex")]: layout === 'horizontal',
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-grid")]: grid,
-      ["".concat(prefixCls, "-split")]: split,
-      ["".concat(prefixCls, "-bordered")]: bordered
+      [`${prefixCls}-flex`]: layout === 'horizontal',
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-grid`]: grid,
+      [`${prefixCls}-split`]: split,
+      [`${prefixCls}-bordered`]: bordered
     });
     let childrenList;
 
@@ -90,7 +90,7 @@ class List extends BaseComponent {
       childrenList = [];
       const items = renderItem ? dataSource.map((item, index) => renderItem(item, index)) : [];
       React.Children.forEach(items, (child, index) => {
-        const itemKey = child.key || "list-item-".concat(index);
+        const itemKey = child.key || `list-item-${index}`;
         childrenList.push( /*#__PURE__*/React.cloneElement(child, {
           key: itemKey
         }));
@@ -103,7 +103,7 @@ class List extends BaseComponent {
       className: wrapperCls,
       style: style
     }, header ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cssClasses.PREFIX, "-header"),
+      className: `${cssClasses.PREFIX}-header`,
       "x-semi-prop": "header"
     }, header) : null, /*#__PURE__*/React.createElement(ListContext.Provider, {
       value: {
@@ -115,7 +115,7 @@ class List extends BaseComponent {
       spinning: loading,
       size: "large"
     }, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(cssClasses.PREFIX, "-footer"),
+      className: `${cssClasses.PREFIX}-footer`,
       "x-semi-prop": "footer"
     }, footer) : null, loadMore ? loadMore : null);
   }

package/lib/es/list/item.js

@@ -56,9 +56,9 @@ export default class ListItem extends PureComponent {
     } = this.context;
     const handleContextMenu = onRightClick ? onRightClick : contextOnRightClick;
     const handleClick = onClick ? onClick : contextOnClick;
-    const itemCls = cls("".concat(prefixCls, "-item"), className);
-    const bodyCls = cls("".concat(prefixCls, "-item-body"), {
-      ["".concat(prefixCls, "-item-body-").concat(align)]: align
+    const itemCls = cls(`${prefixCls}-item`, className);
+    const bodyCls = cls(`${prefixCls}-item-body`, {
+      [`${prefixCls}-item-body-${align}`]: align
     });
     let body;
 
@@ -66,9 +66,9 @@ export default class ListItem extends PureComponent {
       body = /*#__PURE__*/React.createElement("div", {
         className: bodyCls
       }, header ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-item-body-header")
+        className: `${prefixCls}-item-body-header`
       }, header) : null, main ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-item-body-main")
+        className: `${prefixCls}-item-body-main`
       }, main) : null);
     }
 
@@ -83,7 +83,7 @@ export default class ListItem extends PureComponent {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     }, body ? body : null, children, extra ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-item-extra")
+      className: `${prefixCls}-item-extra`
     }, extra) : null);
 
     if (this.context && contextGrid) {

package/lib/es/modal/ConfirmModal.js

@@ -69,20 +69,20 @@ const ConfirmModal = props => {
       setVisible(false);
     }
   }, [onCancel]);
-  const confirmCls = "".concat(cssClasses.DIALOG, "-confirm");
+  const confirmCls = `${cssClasses.DIALOG}-confirm`;
   const wrapperCls = cls(className, confirmCls, {
-    ["".concat(confirmCls, "-rtl")]: direction === 'rtl'
+    [`${confirmCls}-rtl`]: direction === 'rtl'
   });
-  const typeCls = cls("".concat(cssClasses.DIALOG, "-").concat(type));
+  const typeCls = cls(`${cssClasses.DIALOG}-${type}`);
   const iconNode = isSemiIcon(icon) ? /*#__PURE__*/React.cloneElement(icon, {
-    className: "".concat(confirmCls, "-icon ").concat(typeCls, "-icon"),
+    className: `${confirmCls}-icon ${typeCls}-icon`,
     size: 'extra-large'
   }) : icon;
   const titleNode = title == null ? null : /*#__PURE__*/React.createElement("span", {
-    className: "".concat(confirmCls, "-title-text")
+    className: `${confirmCls}-title-text`
   }, title);
-  const contentCls = cls("".concat(confirmCls, "-content"), {
-    ["".concat(confirmCls, "-content-withIcon")]: props.icon
+  const contentCls = cls(`${confirmCls}-content`, {
+    [`${confirmCls}-content-withIcon`]: props.icon
   });
   return /*#__PURE__*/React.createElement(Modal, Object.assign({
     className: wrapperCls,

package/lib/es/modal/Modal.d.ts

@@ -74,8 +74,6 @@ declare class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: boolean;
         closable: boolean;
         visible: boolean;
-        confirmLoading: boolean;
-        cancelLoading: boolean;
         okType: string;
         maskClosable: boolean;
         hasCancel: boolean;

package/lib/es/modal/Modal.js

@@ -65,7 +65,7 @@ class Modal extends BaseComponent {
           return /*#__PURE__*/React.createElement(Button, Object.assign({
             "aria-label": "cancel",
             onClick: this.handleCancel,
-            loading: cancelLoading,
+            loading: cancelLoading === undefined ? this.state.onCancelReturnPromiseStatus === "pending" : cancelLoading,
             type: "tertiary",
             autoFocus: true
           }, this.props.cancelButtonProps, {
@@ -80,7 +80,7 @@ class Modal extends BaseComponent {
         "aria-label": "confirm",
         type: okType,
         theme: "solid",
-        loading: confirmLoading,
+        loading: confirmLoading === undefined ? this.state.onOKReturnPromiseStatus === "pending" : confirmLoading,
         onClick: this.handleOk
       }, this.props.okButtonProps, {
         "x-semi-children-alias": "okText"
@@ -125,7 +125,7 @@ class Modal extends BaseComponent {
       }
 
       const classList = cls(className, {
-        ["".concat(cssClasses.DIALOG, "-displayNone")]: keepDOM && this.state.displayNone
+        [`${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 */
@@ -141,7 +141,7 @@ class Modal extends BaseComponent {
       }, /*#__PURE__*/React.createElement(CSSAnimation, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
-        startClassName: visible ? "".concat(cssClasses.DIALOG, "-content-animate-show") : "".concat(cssClasses.DIALOG, "-content-animate-hide"),
+        startClassName: visible ? `${cssClasses.DIALOG}-content-animate-show` : `${cssClasses.DIALOG}-content-animate-hide`,
         onAnimationEnd: () => {
           this.updateState();
         }
@@ -153,7 +153,7 @@ class Modal extends BaseComponent {
         return /*#__PURE__*/React.createElement(CSSAnimation, {
           motion: this.props.motion,
           animationState: visible ? 'enter' : 'leave',
-          startClassName: visible ? "".concat(cssClasses.DIALOG, "-mask-animate-show") : "".concat(cssClasses.DIALOG, "-mask-animate-hide"),
+          startClassName: visible ? `${cssClasses.DIALOG}-mask-animate-show` : `${cssClasses.DIALOG}-mask-animate-hide`,
           onAnimationEnd: () => {
             this.updateState();
           }
@@ -202,7 +202,7 @@ class Modal extends BaseComponent {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
-          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
+          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
         }
       },
       enabledBodyScroll: () => {
@@ -216,10 +216,10 @@ class Modal extends BaseComponent {
         }
       },
       notifyCancel: e => {
-        this.props.onCancel(e);
+        return this.props.onCancel(e);
       },
       notifyOk: e => {
-        this.props.onOk(e);
+        return this.props.onOk(e);
       },
       notifyClose: () => {
         this.props.afterClose();
@@ -352,8 +352,6 @@ Modal.defaultProps = {
   centered: false,
   closable: true,
   visible: false,
-  confirmLoading: false,
-  cancelLoading: false,
   okType: 'primary',
   maskClosable: true,
   hasCancel: true,