@douyinfe/semi-ui 2.29.0 → 2.30.0-alpha.0

package/lib/cjs/input/index.js

@@ -189,9 +189,9 @@ class Input extends _baseComponent.default {
 
     if (addonBefore) {
       const prefixWrapperCls = (0, _classnames.default)({
-        [`${prefixCls}-prepend`]: true,
-        [`${prefixCls}-prepend-text`]: addonBefore && (0, _isString2.default)(addonBefore),
-        [`${prefixCls}-prepend-icon`]: (0, _utils.isSemiIcon)(addonBefore)
+        ["".concat(prefixCls, "-prepend")]: true,
+        ["".concat(prefixCls, "-prepend-text")]: addonBefore && (0, _isString2.default)(addonBefore),
+        ["".concat(prefixCls, "-prepend-icon")]: (0, _utils.isSemiIcon)(addonBefore)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
@@ -209,9 +209,9 @@ class Input extends _baseComponent.default {
 
     if (addonAfter) {
       const prefixWrapperCls = (0, _classnames.default)({
-        [`${prefixCls}-append`]: true,
-        [`${prefixCls}-append-text`]: addonAfter && (0, _isString2.default)(addonAfter),
-        [`${prefixCls}-append-icon`]: (0, _utils.isSemiIcon)(addonAfter)
+        ["".concat(prefixCls, "-append")]: true,
+        ["".concat(prefixCls, "-append-text")]: addonAfter && (0, _isString2.default)(addonAfter),
+        ["".concat(prefixCls, "-append-icon")]: (0, _utils.isSemiIcon)(addonAfter)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
@@ -223,7 +223,7 @@ class Input extends _baseComponent.default {
   }
 
   renderClearBtn() {
-    const clearCls = (0, _classnames.default)(`${prefixCls}-clearbtn`);
+    const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearbtn"));
     const {
       clearIcon
     } = this.props;
@@ -251,7 +251,7 @@ class Input extends _baseComponent.default {
       mode,
       disabled
     } = this.props;
-    const modeCls = (0, _classnames.default)(`${prefixCls}-modebtn`);
+    const modeCls = (0, _classnames.default)("".concat(prefixCls, "-modebtn"));
     const modeIcon = eyeClosed ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeClosedSolid, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconEyeOpened, null); // alway show password button for a11y
 
     const showModeBtn = mode === 'password' && !disabled;
@@ -286,10 +286,10 @@ class Input extends _baseComponent.default {
     }
 
     const prefixWrapperCls = (0, _classnames.default)({
-      [`${prefixCls}-prefix`]: true,
-      [`${prefixCls}-inset-label`]: insetLabel,
-      [`${prefixCls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
-      [`${prefixCls}-prefix-icon`]: (0, _utils.isSemiIcon)(labelNode)
+      ["".concat(prefixCls, "-prefix")]: true,
+      ["".concat(prefixCls, "-inset-label")]: insetLabel,
+      ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
+      ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
     });
     return (
       /*#__PURE__*/
@@ -328,10 +328,10 @@ class Input extends _baseComponent.default {
     }
 
     const suffixWrapperCls = (0, _classnames.default)({
-      [`${prefixCls}-suffix`]: true,
-      [`${prefixCls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
-      [`${prefixCls}-suffix-icon`]: (0, _utils.isSemiIcon)(suffix),
-      [`${prefixCls}-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix)
+      ["".concat(prefixCls, "-suffix")]: true,
+      ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+      ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix),
+      ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
     });
     return (
       /*#__PURE__*/
@@ -408,31 +408,31 @@ class Input extends _baseComponent.default {
     const suffixAllowClear = this.showClearBtn();
     const suffixIsIcon = (0, _utils.isSemiIcon)(suffix);
     const ref = this.getInputRef();
-    const wrapperPrefix = `${prefixCls}-wrapper`;
+    const wrapperPrefix = "".concat(prefixCls, "-wrapper");
     const wrapperCls = (0, _classnames.default)(wrapperPrefix, className, {
-      [`${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
+      ["".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
     });
     const inputCls = (0, _classnames.default)(prefixCls, {
-      [`${prefixCls}-${size}`]: size,
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-sibling-clearbtn`]: this.foundation.isAllowClear(),
-      [`${prefixCls}-sibling-modebtn`]: mode === 'password'
+      ["".concat(prefixCls, "-").concat(size)]: size,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-sibling-clearbtn")]: this.foundation.isAllowClear(),
+      ["".concat(prefixCls, "-sibling-modebtn")]: mode === 'password'
     });
     const inputValue = value === null || value === undefined ? '' : value;
     const inputProps = Object.assign(Object.assign({}, rest), {

package/lib/cjs/input/inputGroup.js

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

package/lib/cjs/input/textarea.js

@@ -171,8 +171,8 @@ class TextArea extends _baseComponent.default {
       showClear
     } = this.props;
     const displayClearBtn = this.foundation.isAllowClear();
-    const clearCls = (0, _classnames.default)(`${prefixCls}-clearbtn`, {
-      [`${prefixCls}-clearbtn-hidden`]: !displayClearBtn
+    const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearbtn"), {
+      ["".concat(prefixCls, "-clearbtn-hidden")]: !displayClearBtn
     });
 
     if (showClear) {
@@ -204,8 +204,8 @@ class TextArea extends _baseComponent.default {
 
       current = value ? (0, _isFunction2.default)(getValueLength) ? getValueLength(value) : value.length : 0;
       total = maxCount || null;
-      countCls = (0, _classnames.default)(`${prefixCls}-textarea-counter`, {
-        [`${prefixCls}-textarea-counter-exceed`]: current > total
+      countCls = (0, _classnames.default)("".concat(prefixCls, "-textarea-counter"), {
+        ["".concat(prefixCls, "-textarea-counter-exceed")]: current > total
       });
       counter = /*#__PURE__*/_react.default.createElement("div", {
         className: countCls
@@ -246,19 +246,19 @@ class TextArea extends _baseComponent.default {
       value,
       minLength: stateMinLength
     } = this.state;
-    const wrapperCls = (0, _classnames.default)(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 wrapperCls = (0, _classnames.default)(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 ref = this.props.forwardRef || this.textAreaRef;
 
-    const itemCls = (0, _classnames.default)(`${prefixCls}-textarea`, {
-      [`${prefixCls}-textarea-disabled`]: disabled,
-      [`${prefixCls}-textarea-readonly`]: readonly,
-      [`${prefixCls}-textarea-autosize`]: autosize,
-      [`${prefixCls}-textarea-showClear`]: showClear
+    const itemCls = (0, _classnames.default)("".concat(prefixCls, "-textarea"), {
+      ["".concat(prefixCls, "-textarea-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-readonly")]: readonly,
+      ["".concat(prefixCls, "-textarea-autosize")]: autosize,
+      ["".concat(prefixCls, "-textarea-showClear")]: showClear
     });
     const itemProps = Object.assign(Object.assign({}, (0, _omit2.default)(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear')), {
       className: itemCls,

package/lib/cjs/inputNumber/index.js

@@ -114,17 +114,17 @@ class InputNumber extends _baseComponent.default {
       } = this.state;
       const notAllowedUp = disabled ? disabled : number === max;
       const notAllowedDown = disabled ? disabled : number === min;
-      const suffixChildrenCls = (0, _classnames.default)(`${prefixCls}-number-suffix-btns`, {
-        [`${prefixCls}-number-suffix-btns-inner`]: innerButtons,
-        [`${prefixCls}-number-suffix-btns-inner-hover`]: innerButtons && hovering && !focusing
+      const suffixChildrenCls = (0, _classnames.default)("".concat(prefixCls, "-number-suffix-btns"), {
+        ["".concat(prefixCls, "-number-suffix-btns-inner")]: innerButtons,
+        ["".concat(prefixCls, "-number-suffix-btns-inner-hover")]: innerButtons && hovering && !focusing
       });
-      const upClassName = (0, _classnames.default)(`${prefixCls}-number-button`, `${prefixCls}-number-button-up`, {
-        [`${prefixCls}-number-button-up-disabled`]: disabled,
-        [`${prefixCls}-number-button-up-not-allowed`]: notAllowedUp
+      const upClassName = (0, _classnames.default)("".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 downClassName = (0, _classnames.default)(`${prefixCls}-number-button`, `${prefixCls}-number-button-down`, {
-        [`${prefixCls}-number-button-down-disabled`]: disabled,
-        [`${prefixCls}-number-button-down-not-allowed`]: notAllowedDown
+      const downClassName = (0, _classnames.default)("".concat(prefixCls, "-number-button"), "".concat(prefixCls, "-number-button-down"), {
+        ["".concat(prefixCls, "-number-button-down-disabled")]: disabled,
+        ["".concat(prefixCls, "-number-button-down-not-allowed")]: notAllowedDown
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: suffixChildrenCls
@@ -450,8 +450,8 @@ class InputNumber extends _baseComponent.default {
       value,
       number
     } = this.state;
-    const inputNumberCls = (0, _classnames.default)(className, `${prefixCls}-number`, {
-      [`${prefixCls}-number-size-${size}`]: size
+    const inputNumberCls = (0, _classnames.default)(className, "".concat(prefixCls, "-number"), {
+      ["".concat(prefixCls, "-number-size-").concat(size)]: size
     });
     const buttons = this.renderButtons();
     const ariaProps = {

package/lib/cjs/layout/Sider.js

@@ -45,7 +45,7 @@ const generateId = (() => {
   let i = 0;
   return () => {
     i += 1;
-    return `${_constants.cssClasses.PREFIX}-sider-${i}`;
+    return "".concat(_constants.cssClasses.PREFIX, "-sider-").concat(i);
   };
 })();
 
@@ -108,14 +108,14 @@ class Sider extends _react.default.PureComponent {
           others = __rest(_a, ["prefixCls", "className", "children", "style"]);
 
     const classString = (0, _classnames.default)(className, {
-      [`${prefixCls}-sider`]: true
+      ["".concat(prefixCls, "-sider")]: true
     });
     return /*#__PURE__*/_react.default.createElement("aside", Object.assign({
       className: classString,
       "aria-label": this.props['aria-label'],
       style: style
     }, (0, _getDataAttr.default)(others)), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-sider-children`
+      className: "".concat(prefixCls, "-sider-children")
     }, children));
   }
 

package/lib/cjs/layout/index.js

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

package/lib/cjs/list/index.js

@@ -44,14 +44,14 @@ class List extends _baseComponent.default {
 
       if (emptyContent) {
         return /*#__PURE__*/_react.default.createElement("div", {
-          className: `${_constants.cssClasses.PREFIX}-empty`,
+          className: "".concat(_constants.cssClasses.PREFIX, "-empty"),
           "x-semi-prop": "emptyContent"
         }, emptyContent);
       } else {
         return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
           componentName: "List"
         }, locale => /*#__PURE__*/_react.default.createElement("div", {
-          className: `${_constants.cssClasses.PREFIX}-empty`
+          className: "".concat(_constants.cssClasses.PREFIX, "-empty")
         }, locale.emptyText));
       }
     };
@@ -75,7 +75,7 @@ class List extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("ul", {
-      className: `${prefixCls}-items`
+      className: "".concat(prefixCls, "-items")
     }, childrenList ? childrenList : null, children);
   }
 
@@ -99,11 +99,11 @@ class List extends _baseComponent.default {
       children
     } = this.props;
     const wrapperCls = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-flex`]: layout === 'horizontal',
-      [`${prefixCls}-${size}`]: size,
-      [`${prefixCls}-grid`]: grid,
-      [`${prefixCls}-split`]: split,
-      [`${prefixCls}-bordered`]: bordered
+      ["".concat(prefixCls, "-flex")]: layout === 'horizontal',
+      ["".concat(prefixCls, "-").concat(size)]: size,
+      ["".concat(prefixCls, "-grid")]: grid,
+      ["".concat(prefixCls, "-split")]: split,
+      ["".concat(prefixCls, "-bordered")]: bordered
     });
     let childrenList;
 
@@ -112,7 +112,7 @@ class List extends _baseComponent.default {
       const items = renderItem ? dataSource.map((item, index) => renderItem(item, index)) : [];
 
       _react.default.Children.forEach(items, (child, index) => {
-        const itemKey = child.key || `list-item-${index}`;
+        const itemKey = child.key || "list-item-".concat(index);
         childrenList.push( /*#__PURE__*/_react.default.cloneElement(child, {
           key: itemKey
         }));
@@ -125,7 +125,7 @@ class List extends _baseComponent.default {
       className: wrapperCls,
       style: style
     }, header ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_constants.cssClasses.PREFIX}-header`,
+      className: "".concat(_constants.cssClasses.PREFIX, "-header"),
       "x-semi-prop": "header"
     }, header) : null, /*#__PURE__*/_react.default.createElement(_listContext.default.Provider, {
       value: {
@@ -137,7 +137,7 @@ class List extends _baseComponent.default {
       spinning: loading,
       size: "large"
     }, this.wrapChildren(childrenList, children))), footer ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${_constants.cssClasses.PREFIX}-footer`,
+      className: "".concat(_constants.cssClasses.PREFIX, "-footer"),
       "x-semi-prop": "footer"
     }, footer) : null, loadMore ? loadMore : null);
   }

package/lib/cjs/list/item.js

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

package/lib/cjs/modal/ConfirmModal.js

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

package/lib/cjs/modal/Modal.js

@@ -153,7 +153,7 @@ class Modal extends _baseComponent.default {
       }
 
       const classList = (0, _classnames.default)(className, {
-        [`${_constants.cssClasses.DIALOG}-displayNone`]: keepDOM && this.state.displayNone
+        ["".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 */
@@ -169,7 +169,7 @@ class Modal extends _baseComponent.default {
       }, /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
         motion: this.props.motion,
         animationState: visible ? 'enter' : 'leave',
-        startClassName: visible ? `${_constants.cssClasses.DIALOG}-content-animate-show` : `${_constants.cssClasses.DIALOG}-content-animate-hide`,
+        startClassName: visible ? "".concat(_constants.cssClasses.DIALOG, "-content-animate-show") : "".concat(_constants.cssClasses.DIALOG, "-content-animate-hide"),
         onAnimationEnd: () => {
           this.updateState();
         }
@@ -181,7 +181,7 @@ class Modal extends _baseComponent.default {
         return /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
           motion: this.props.motion,
           animationState: visible ? 'enter' : 'leave',
-          startClassName: visible ? `${_constants.cssClasses.DIALOG}-mask-animate-show` : `${_constants.cssClasses.DIALOG}-mask-animate-hide`,
+          startClassName: visible ? "".concat(_constants.cssClasses.DIALOG, "-mask-animate-show") : "".concat(_constants.cssClasses.DIALOG, "-mask-animate-hide"),
           onAnimationEnd: () => {
             this.updateState();
           }
@@ -230,7 +230,7 @@ class Modal extends _baseComponent.default {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
-          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
+          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
         }
       },
       enabledBodyScroll: () => {

package/lib/cjs/modal/ModalContent.js

@@ -86,7 +86,7 @@ class ModalContent extends _baseComponent.default {
       } = props;
 
       if (mask) {
-        const className = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}-mask`, {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        const className = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG, "-mask"), {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
         return /*#__PURE__*/_react.default.createElement("div", Object.assign({
           key: "mask"
@@ -113,7 +113,7 @@ class ModalContent extends _baseComponent.default {
 
         closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
           "aria-label": "close",
-          className: `${_constants.cssClasses.DIALOG}-close`,
+          className: "".concat(_constants.cssClasses.DIALOG, "-close"),
           key: "close-btn",
           onClick: this.close,
           type: "tertiary",
@@ -131,7 +131,7 @@ class ModalContent extends _baseComponent.default {
         icon
       } = this.props;
       return icon ? /*#__PURE__*/_react.default.createElement("span", {
-        className: `${_constants.cssClasses.DIALOG}-icon-wrapper`,
+        className: "".concat(_constants.cssClasses.DIALOG, "-icon-wrapper"),
         "x-semi-prop": "icon"
       }, icon) : null;
     };
@@ -147,11 +147,11 @@ class ModalContent extends _baseComponent.default {
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       return title === null || title === undefined ? null : /*#__PURE__*/_react.default.createElement("div", {
-        className: `${_constants.cssClasses.DIALOG}-header`
+        className: "".concat(_constants.cssClasses.DIALOG, "-header")
       }, icon, /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
         heading: 5,
-        className: `${_constants.cssClasses.DIALOG}-title`,
-        id: `${_constants.cssClasses.DIALOG}-title`,
+        className: "".concat(_constants.cssClasses.DIALOG, "-title"),
+        id: "".concat(_constants.cssClasses.DIALOG, "-title"),
         "x-semi-prop": "title"
       }, title), closer);
     };
@@ -162,19 +162,19 @@ class ModalContent extends _baseComponent.default {
         children,
         title
       } = this.props;
-      const bodyCls = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}-body`, {
-        [`${_constants.cssClasses.DIALOG}-withIcon`]: this.props.icon
+      const bodyCls = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG, "-body"), {
+        ["".concat(_constants.cssClasses.DIALOG, "-withIcon")]: this.props.icon
       });
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       const hasHeader = title !== null && title !== undefined || 'header' in this.props;
       return hasHeader ? /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
-        id: `${_constants.cssClasses.DIALOG}-body`,
+        id: "".concat(_constants.cssClasses.DIALOG, "-body"),
         style: bodyStyle,
         "x-semi-prop": "children"
       }, children) : /*#__PURE__*/_react.default.createElement("div", {
-        className: `${_constants.cssClasses.DIALOG}-body-wrapper`
+        className: "".concat(_constants.cssClasses.DIALOG, "-body-wrapper")
       }, icon, /*#__PURE__*/_react.default.createElement("div", {
         className: bodyCls,
         style: bodyStyle,
@@ -186,9 +186,9 @@ class ModalContent extends _baseComponent.default {
       const props = __rest(this.props, []);
 
       const style = {};
-      const digCls = (0, _classnames.default)(`${_constants.cssClasses.DIALOG}`, {
-        [`${_constants.cssClasses.DIALOG}-centered`]: props.centered,
-        [`${_constants.cssClasses.DIALOG}-${props.size}`]: props.size
+      const digCls = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG), {
+        ["".concat(_constants.cssClasses.DIALOG, "-centered")]: props.centered,
+        ["".concat(_constants.cssClasses.DIALOG, "-").concat(props.size)]: props.size
       });
 
       if (props.width) {
@@ -208,7 +208,7 @@ class ModalContent extends _baseComponent.default {
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${_constants.cssClasses.DIALOG}-footer`,
+        className: "".concat(_constants.cssClasses.DIALOG, "-footer"),
         "x-semi-prop": "footer"
       }, props.footer) : null;
 
@@ -225,11 +225,11 @@ class ModalContent extends _baseComponent.default {
         role: "dialog",
         ref: this.modalDialogRef,
         "aria-modal": "true",
-        "aria-labelledby": `${_constants.cssClasses.DIALOG}-title`,
-        "aria-describedby": `${_constants.cssClasses.DIALOG}-body`,
+        "aria-labelledby": "".concat(_constants.cssClasses.DIALOG, "-title"),
+        "aria-describedby": "".concat(_constants.cssClasses.DIALOG, "-body"),
         onAnimationEnd: props.onAnimationEnd,
-        className: (0, _classnames.default)([`${_constants.cssClasses.DIALOG}-content`, props.contentClassName, {
-          [`${_constants.cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen
+        className: (0, _classnames.default)(["".concat(_constants.cssClasses.DIALOG, "-content"), props.contentClassName, {
+          ["".concat(_constants.cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
         }])
       }, header, body, footer)); // return props.visible ? dialogElement : null;
 
@@ -242,7 +242,7 @@ class ModalContent extends _baseComponent.default {
       prevFocusElement: _FocusHandle.default.getActiveElement()
     };
     this.foundation = new _modalContentFoundation.default(this.adapter);
-    this.dialogId = `dialog-${uuid++}`;
+    this.dialogId = "dialog-".concat(uuid++);
     this.modalDialogRef = /*#__PURE__*/_react.default.createRef();
   }
 
@@ -353,9 +353,9 @@ class ModalContent extends _baseComponent.default {
       direction
     } = this.context;
     const classList = (0, _classnames.default)(className, {
-      [`${_constants.cssClasses.DIALOG}-popup`]: getPopupContainer && !maskFixed,
-      [`${_constants.cssClasses.DIALOG}-fixed`]: maskFixed,
-      [`${_constants.cssClasses.DIALOG}-rtl`]: direction === 'rtl'
+      ["".concat(_constants.cssClasses.DIALOG, "-popup")]: getPopupContainer && !maskFixed,
+      ["".concat(_constants.cssClasses.DIALOG, "-fixed")]: maskFixed,
+      ["".concat(_constants.cssClasses.DIALOG, "-rtl")]: direction === 'rtl'
     });
     const containerContext = getContainerContext();
 
@@ -364,8 +364,8 @@ class ModalContent extends _baseComponent.default {
     }, this.getMaskElement(), /*#__PURE__*/_react.default.createElement("div", Object.assign({
       role: "none",
       className: (0, _classnames.default)({
-        [`${_constants.cssClasses.DIALOG}-wrap`]: true,
-        [`${_constants.cssClasses.DIALOG}-wrap-center`]: this.props.centered
+        ["".concat(_constants.cssClasses.DIALOG, "-wrap")]: true,
+        ["".concat(_constants.cssClasses.DIALOG, "-wrap-center")]: this.props.centered
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null

package/lib/cjs/modal/useModal/index.js

@@ -41,7 +41,7 @@ function useModal() {
       let closeFunc;
 
       const modal = /*#__PURE__*/_react.default.createElement(_HookModal.default, {
-        key: `semi-modal-${uuid}`,
+        key: "semi-modal-".concat(uuid),
         config: withFunc(config),
         ref: modalRef,
         afterClose: () => {

package/lib/cjs/navigation/CollapseButton.js

@@ -45,7 +45,7 @@ function CollapseButton(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${prefixCls}-collapse-btn`
+    className: "".concat(prefixCls, "-collapse-btn")
   }, isCollapsed ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: finalCollapseText,
     position: "right"