@douyinfe/semi-ui 2.28.0-alpha.0 → 2.28.0

package/lib/cjs/_portal/index.js

@@ -50,7 +50,7 @@ class Portal extends _react.PureComponent {
       }
 
       const cls = (0, _classnames.default)(prefixCls, ...classNames, {
-        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+        [`${prefixCls}-rtl`]: direction === 'rtl'
       });
 
       if (_this.el) {
@@ -133,7 +133,7 @@ class Portal extends _react.PureComponent {
 Portal.contextType = _context.default;
 Portal.defaultProps = {
   // getPopupContainer: () => document.body,
-  prefixCls: "".concat(_constants.BASE_CLASS_PREFIX, "-portal")
+  prefixCls: `${_constants.BASE_CLASS_PREFIX}-portal`
 };
 Portal.propTypes = {
   children: _propTypes.default.node,

package/lib/cjs/_utils/index.js

@@ -79,7 +79,9 @@ function cloneDeep(value, customizer) {
         }); // internal-issues:887
 
         try {
-          (0, _warning.default)((0, _get2.default)(process, 'env.NODE_ENV') !== 'production', "[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.\n                    The maximum length of an array is 4294967295.\n                    Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript");
+          (0, _warning.default)((0, _get2.default)(process, 'env.NODE_ENV') !== 'production', `[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.
+                    The maximum length of an array is 4294967295.
+                    Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript`);
         } catch (e) {}
 
         return newArray;

package/lib/cjs/anchor/index.js

@@ -153,7 +153,7 @@ class Anchor extends _baseComponent.default {
       },
       setSlideBarTop: height => {
         this.setState({
-          slideBarTop: "".concat(height, "px")
+          slideBarTop: `${height}px`
         });
       },
       setClickLink: value => {
@@ -212,7 +212,7 @@ class Anchor extends _baseComponent.default {
         return elTop;
       },
       getAnchorNode: selector => {
-        const selectors = "#".concat(this.anchorID, " ").concat(selector);
+        const selectors = `#${this.anchorID} ${selector}`;
         return document.querySelector(selectors);
       },
       getContentNode: selector => document.querySelector(selector),
@@ -267,15 +267,15 @@ class Anchor extends _baseComponent.default {
       slideBarTop
     } = this.state;
     const wrapperCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-size-").concat(size)]: size
+      [`${prefixCls}-size-${size}`]: size
     });
-    const slideCls = (0, _classnames.default)("".concat(prefixCls, "-slide"), "".concat(prefixCls, "-slide-").concat(railTheme));
-    const slideBarCls = (0, _classnames.default)("".concat(prefixCls, "-slide-bar"), {
-      ["".concat(prefixCls, "-slide-bar-").concat(size)]: size,
-      ["".concat(prefixCls, "-slide-bar-").concat(railTheme)]: railTheme,
-      ["".concat(prefixCls, "-slide-bar-active")]: activeLink
+    const slideCls = (0, _classnames.default)(`${prefixCls}-slide`, `${prefixCls}-slide-${railTheme}`);
+    const slideBarCls = (0, _classnames.default)(`${prefixCls}-slide-bar`, {
+      [`${prefixCls}-slide-bar-${size}`]: size,
+      [`${prefixCls}-slide-bar-${railTheme}`]: railTheme,
+      [`${prefixCls}-slide-bar-active`]: activeLink
     });
-    const anchorWrapper = "".concat(prefixCls, "-link-wrapper");
+    const anchorWrapper = `${prefixCls}-link-wrapper`;
     const wrapperStyle = Object.assign(Object.assign({}, style), {
       maxWidth,
       maxHeight

package/lib/cjs/anchor/link.js

@@ -42,10 +42,10 @@ class Link extends _baseComponent.default {
         size
       } = this.context;
       const active = activeLink === href;
-      const linkTitleCls = (0, _classnames.default)("".concat(prefixCls, "-link-tooltip"), {
-        ["".concat(prefixCls, "-link-tooltip-small")]: size === 'small',
-        ["".concat(prefixCls, "-link-tooltip-active")]: active,
-        ["".concat(prefixCls, "-link-tooltip-disabled")]: disabled
+      const linkTitleCls = (0, _classnames.default)(`${prefixCls}-link-tooltip`, {
+        [`${prefixCls}-link-tooltip-small`]: size === 'small',
+        [`${prefixCls}-link-tooltip-active`]: active,
+        [`${prefixCls}-link-tooltip-disabled`]: disabled
       });
       const toolTipOpt = position ? {
         position
@@ -157,10 +157,10 @@ class Link extends _baseComponent.default {
       showTooltip
     } = this.context;
     const active = activeLink === href;
-    const linkCls = (0, _classnames.default)("".concat(prefixCls, "-link"), className);
-    const linkTitleCls = (0, _classnames.default)("".concat(prefixCls, "-link-title"), {
-      ["".concat(prefixCls, "-link-title-active")]: active,
-      ["".concat(prefixCls, "-link-title-disabled")]: disabled
+    const linkCls = (0, _classnames.default)(`${prefixCls}-link`, className);
+    const linkTitleCls = (0, _classnames.default)(`${prefixCls}-link-title`, {
+      [`${prefixCls}-link-title-active`]: active,
+      [`${prefixCls}-link-title-disabled`]: disabled
     });
     const paddingAttributeKey = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     const ariaProps = {

package/lib/cjs/autoComplete/index.js

@@ -83,7 +83,11 @@ class AutoComplete extends _baseComponent.default {
     this.triggerRef = /*#__PURE__*/_react.default.createRef();
     this.optionsRef = /*#__PURE__*/_react.default.createRef();
     this.clickOutsideHandler = null;
-    (0, _warning.default)('triggerRender' in this.props && typeof this.props.triggerRender === 'function', "[Semi AutoComplete]\n            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size',\n            please notice that they will be removed in the next major version.\n            Please use 'componentProps' to retrieve these props instead.\n            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.");
+    (0, _warning.default)('triggerRender' in this.props && typeof this.props.triggerRender === 'function', `[Semi AutoComplete]
+            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size',
+            please notice that they will be removed in the next major version.
+            Please use 'componentProps' to retrieve these props instead.
+            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.`);
   }
 
   get adapter() {
@@ -220,7 +224,7 @@ class AutoComplete extends _baseComponent.default {
       style,
       className: useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)({
         [prefixCls]: true,
-        ["".concat(prefixCls, "-disabled")]: disabled
+        [`${prefixCls}-disabled`]: disabled
       }, className),
       onClick: this.handleInputClick,
       ref: this.triggerRef,
@@ -264,7 +268,7 @@ class AutoComplete extends _baseComponent.default {
   }
 
   renderLoading() {
-    const loadingWrapperCls = "".concat(prefixCls, "-loading-wrapper");
+    const loadingWrapperCls = `${prefixCls}-loading-wrapper`;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
@@ -298,7 +302,7 @@ class AutoComplete extends _baseComponent.default {
       dropdownMinWidth
     } = this.state;
     const listCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-option-list")]: true
+      [`${prefixCls}-option-list`]: true
     }, dropdownClassName);
     let optionsNode;
 

package/lib/cjs/autoComplete/option.js

@@ -100,13 +100,13 @@ class Option extends _react.PureComponent {
           rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue"]);
 
     const optionClassName = (0, _classnames.default)(prefixCls, {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-selected")]: selected,
-      ["".concat(prefixCls, "-focused")]: focused,
-      ["".concat(prefixCls, "-empty")]: empty,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-selected`]: selected,
+      [`${prefixCls}-focused`]: focused,
+      [`${prefixCls}-empty`]: empty,
       [className]: className
     });
-    const selectedIconClassName = (0, _classnames.default)(["".concat(prefixCls, "-icon")]);
+    const selectedIconClassName = (0, _classnames.default)([`${prefixCls}-icon`]);
 
     if (empty) {
       if (emptyContent === null) {
@@ -144,7 +144,7 @@ class Option extends _react.PureComponent {
       searchWords: inputValue,
       sourceString: children,
       option: {
-        highlightClassName: "".concat(prefixCls, "-keyword")
+        highlightClassName: `${prefixCls}-keyword`
       }
     };
     return (
@@ -167,7 +167,7 @@ class Option extends _react.PureComponent {
       }, showTick ? /*#__PURE__*/_react.default.createElement("div", {
         className: selectedIconClassName
       }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, null)) : null, (0, _isString2.default)(children) ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-text")
+        className: `${prefixCls}-text`
       }, this.renderOptionContent({
         children,
         config,

package/lib/cjs/avatar/avatarGroup.js

@@ -78,7 +78,7 @@ class AvatarGroup extends _react.PureComponent {
     const {
       renderMore
     } = this.props;
-    const moreCls = (0, _classnames.default)("".concat(prefixCls, "-item-more"));
+    const moreCls = (0, _classnames.default)(`${prefixCls}-item-more`);
     const restAvatarAlt = restAvatars === null || restAvatars === void 0 ? void 0 : restAvatars.reduce((pre, cur) => {
       const {
         children,
@@ -90,15 +90,15 @@ class AvatarGroup extends _react.PureComponent {
         return pre;
       }
 
-      return pre.length > 0 ? "".concat(pre, ",").concat(avatarInfo) : avatarInfo;
+      return pre.length > 0 ? `${pre},${avatarInfo}` : avatarInfo;
     }, '');
-    const finalAlt = " Number of remaining Avatars\uFF1A".concat(restNumber, ",").concat(restAvatarAlt);
+    const finalAlt = ` Number of remaining Avatars：${restNumber},${restAvatarAlt}`;
 
     let moreAvatar = /*#__PURE__*/_react.default.createElement(_index.default, {
       className: moreCls,
       key: "_+n",
       alt: finalAlt
-    }, "+".concat(restNumber));
+    }, `+${restNumber}`);
 
     if ((0, _isFunction2.default)(renderMore)) {
       moreAvatar = /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -124,15 +124,15 @@ class AvatarGroup extends _react.PureComponent {
 
     let inner;
     const groupCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-group")]: true
+      [`${prefixCls}-group`]: true
     });
 
     if (children) {
       const avatars = this.getAllAvatars();
       inner = ((0, _isNumber2.default)(maxCount) ? this.getMergeAvatars(avatars) : avatars).map((itm, index) => {
         const className = (0, _classnames.default)((0, _get2.default)(itm.props, 'className'), {
-          ["".concat(prefixCls, "-item-start-").concat(index)]: overlapFrom === 'start',
-          ["".concat(prefixCls, "-item-end-").concat(index)]: overlapFrom === 'end'
+          [`${prefixCls}-item-start-${index}`]: overlapFrom === 'start',
+          [`${prefixCls}-item-end-${index}`]: overlapFrom === 'end'
         });
         return /*#__PURE__*/_react.default.cloneElement(itm, Object.assign(Object.assign({}, rest), {
           className,

package/lib/cjs/avatar/index.js

@@ -91,14 +91,14 @@ class Avatar extends _baseComponent.default {
       };
 
       if (isImg) {
-        const finalAlt = clickable ? "clickable Avatar: ".concat(alt) : alt;
+        const finalAlt = clickable ? `clickable Avatar: ${alt}` : alt;
         const imgBasicProps = Object.assign(Object.assign({
           src,
           srcSet,
           onError: this.handleError
         }, imgAttr), {
           className: (0, _classnames.default)({
-            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+            [`${prefixCls}-no-focus-visible`]: clickable
           })
         });
         const imgProps = clickable ? Object.assign(Object.assign({}, imgBasicProps), a11yFocusProps) : imgBasicProps;
@@ -107,17 +107,17 @@ class Avatar extends _baseComponent.default {
         }, imgProps));
       } else if (typeof children === 'string') {
         const tempAlt = alt !== null && alt !== void 0 ? alt : children;
-        const finalAlt = clickable ? "clickable Avatar: ".concat(tempAlt) : tempAlt;
+        const finalAlt = clickable ? `clickable Avatar: ${tempAlt}` : tempAlt;
         const props = {
           role: 'img',
           'aria-label': finalAlt,
-          className: (0, _classnames.default)("".concat(prefixCls, "-label"), {
-            ["".concat(prefixCls, "-no-focus-visible")]: clickable
+          className: (0, _classnames.default)(`${prefixCls}-label`, {
+            [`${prefixCls}-no-focus-visible`]: clickable
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
         content = /*#__PURE__*/_react.default.createElement("span", {
-          className: "".concat(prefixCls, "-content")
+          className: `${prefixCls}-content`
         }, /*#__PURE__*/_react.default.createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -269,14 +269,14 @@ class Avatar extends _baseComponent.default {
     } = this.state;
     const isImg = src && isImgExist;
     const avatarCls = (0, _classnames.default)(prefixCls, {
-      ["".concat(prefixCls, "-").concat(shape)]: shape,
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-").concat(color)]: color && !isImg,
-      ["".concat(prefixCls, "-img")]: isImg,
-      ["".concat(prefixCls, "-focus")]: focusVisible
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-${color}`]: color && !isImg,
+      [`${prefixCls}-img`]: isImg,
+      [`${prefixCls}-focus`]: focusVisible
     }, className);
     const hoverRender = hoverContent ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-hover"),
+      className: `${prefixCls}-hover`,
       "x-semi-prop": "hoverContent"
     }, hoverContent) : null;
     return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, others, {

package/lib/cjs/badge/index.js

@@ -67,18 +67,18 @@ class Badge extends _react.PureComponent {
     const custom = count && !((0, _isNumber2.default)(count) || (0, _isString2.default)(count));
     const showBadge = count !== null && typeof count !== 'undefined';
     const wrapper = (0, _classnames.default)(className, {
-      ["".concat(prefixCls, "-").concat(type)]: !custom,
-      ["".concat(prefixCls, "-").concat(theme)]: !custom,
-      ["".concat(prefixCls, "-").concat(position)]: Boolean(position) && Boolean(children),
-      ["".concat(prefixCls, "-block")]: !children,
-      ["".concat(prefixCls, "-dot")]: dot,
-      ["".concat(prefixCls, "-count")]: !dot && !custom && showBadge,
-      ["".concat(prefixCls, "-custom")]: custom
+      [`${prefixCls}-${type}`]: !custom,
+      [`${prefixCls}-${theme}`]: !custom,
+      [`${prefixCls}-${position}`]: Boolean(position) && Boolean(children),
+      [`${prefixCls}-block`]: !children,
+      [`${prefixCls}-dot`]: dot,
+      [`${prefixCls}-count`]: !dot && !custom && showBadge,
+      [`${prefixCls}-custom`]: custom
     });
     let content;
 
     if ((0, _isNumber2.default)(count)) {
-      content = overflowCount && overflowCount < count ? "".concat(overflowCount, "+") : "".concat(count);
+      content = overflowCount && overflowCount < count ? `${overflowCount}+` : `${count}`;
     } else {
       content = count;
     }

package/lib/cjs/banner/index.js

@@ -83,7 +83,7 @@ class Banner extends _baseComponent.default {
     }
 
     const closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-      className: "".concat(prefixCls, "-close"),
+      className: `${prefixCls}-close`,
       onClick: this.remove,
       icon: closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
         "x-semi-prop": "closeIcon",
@@ -123,7 +123,7 @@ class Banner extends _baseComponent.default {
     };
     let iconType = iconMap[type];
     const iconCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-icon")]: true // [prefixCls + '-' + type]: true,
+      [`${prefixCls}-icon`]: true // [prefixCls + '-' + type]: true,
 
     });
 
@@ -156,32 +156,32 @@ class Banner extends _baseComponent.default {
       visible
     } = this.state;
     const wrapper = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-").concat(type)]: type,
-      ["".concat(prefixCls, "-full")]: fullMode,
-      ["".concat(prefixCls, "-in-container")]: !fullMode,
-      ["".concat(prefixCls, "-bordered")]: !fullMode && bordered
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-full`]: fullMode,
+      [`${prefixCls}-in-container`]: !fullMode,
+      [`${prefixCls}-bordered`]: !fullMode && bordered
     });
     const banner = visible ? /*#__PURE__*/_react.default.createElement("div", {
       className: wrapper,
       style: style,
       role: "alert"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content-wrapper")
+      className: `${prefixCls}-content-wrapper`
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, this.renderIcon(), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-content-body")
+      className: `${prefixCls}-content-body`
     }, title ? /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
       heading: 5,
-      className: "".concat(prefixCls, "-title"),
+      className: `${prefixCls}-title`,
       component: "div",
       "x-semi-prop": "title"
     }, title) : null, description ? /*#__PURE__*/_react.default.createElement(_typography.default.Paragraph, {
-      className: "".concat(prefixCls, "-description"),
+      className: `${prefixCls}-description`,
       component: "div",
       "x-semi-prop": "description"
     }, description) : null)), this.renderCloser()), children ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-extra"),
+      className: `${prefixCls}-extra`,
       "x-semi-prop": "children"
     }, children) : null) : null;
     return banner;

package/lib/cjs/breadcrumb/index.js

@@ -52,19 +52,19 @@ class Breadcrumb extends _baseComponent.default {
       const restItem = template.slice(1, itemsLen - 3);
 
       const spread = /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(clsPrefix, "-collapse"),
-        key: "more-".concat(itemsLen)
+        className: `${clsPrefix}-collapse`,
+        key: `more-${itemsLen}`
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(clsPrefix, "-item-wrap")
+        className: `${clsPrefix}-item-wrap`
       }, /*#__PURE__*/_react.default.createElement("span", {
         role: "button",
         tabIndex: 0,
         "aria-label": "Expand breadcrumb items",
-        className: "".concat(clsPrefix, "-item ").concat(clsPrefix, "-item-more"),
+        className: `${clsPrefix}-item ${clsPrefix}-item-more`,
         onClick: item => this.foundation.handleExpand(item),
         onKeyPress: e => this.foundation.handleExpandEnterPress(e)
       }, hasRenderMore && renderMore(restItem), !hasRenderMore && moreType === 'default' && /*#__PURE__*/_react.default.createElement(_semiIcons.IconMore, null), !hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)), /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(clsPrefix, "-separator"),
+        className: `${clsPrefix}-separator`,
         "x-semi-prop": "separator"
       }, this.props.separator)));
 
@@ -81,7 +81,7 @@ class Breadcrumb extends _baseComponent.default {
       const restItemLength = items.length - maxItemCount;
       const hasRenderMore = (0, _isFunction2.default)(renderMore);
       const template = items.map((route, idx) => {
-        const key = route._origin.key || "item-".concat(route.name || route.path, "-").concat(idx);
+        const key = route._origin.key || `item-${route.name || route.path}-${idx}`;
         const inCollapseArea = idx > 0 && idx <= restItemLength;
         return /*#__PURE__*/_react.default.createElement(_item.default, Object.assign({}, route, {
           key: key,
@@ -131,7 +131,7 @@ class Breadcrumb extends _baseComponent.default {
 
           (0, _warning.default)(item.type && !item.type.isBreadcrumbItem, '[Semi Breadcrumb]: Only accepts Breadcrumb.Item as its children');
           return /*#__PURE__*/_react.default.cloneElement(item, {
-            key: "".concat(idx, "-item"),
+            key: `${idx}-item`,
             active: idx === items.length - 1,
             shouldRenderSeparator: !(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)
           });
@@ -183,9 +183,9 @@ class Breadcrumb extends _baseComponent.default {
     } = this.props;
 
     const content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, restItem.map((item, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-      key: "restItem-".concat(idx)
+      key: `restItem-${idx}`
     }, item, idx !== restItem.length - 1 && /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(clsPrefix, "-restItem")
+      className: `${clsPrefix}-restItem`
     }, separator))));
 
     return /*#__PURE__*/_react.default.createElement(_popover.default, {
@@ -207,9 +207,9 @@ class Breadcrumb extends _baseComponent.default {
       showTooltip
     } = this.props;
     const sizeCls = (0, _classnames.default)(className, {
-      ["".concat(clsPrefix, "-wrapper")]: true,
-      ["".concat(clsPrefix, "-wrapper-compact")]: compact,
-      ["".concat(clsPrefix, "-wrapper-loose")]: !compact
+      [`${clsPrefix}-wrapper`]: true,
+      [`${clsPrefix}-wrapper-compact`]: compact,
+      [`${clsPrefix}-wrapper-loose`]: !compact
     });
     return /*#__PURE__*/_react.default.createElement(_breadContext.default.Provider, {
       value: {

package/lib/cjs/breadcrumb/item.js

@@ -47,7 +47,7 @@ class BreadcrumbItem extends _baseComponent.default {
         compact
       } = this.context;
       const iconSize = compact ? 'small' : 'default';
-      const className = "".concat(clsPrefix, "-item-icon");
+      const className = `${clsPrefix}-item-icon`;
 
       if ( /*#__PURE__*/_react.default.isValidElement(iconType)) {
         //@ts-ignore
@@ -127,7 +127,7 @@ class BreadcrumbItem extends _baseComponent.default {
           width
         } = showTooltip;
         return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, icon, /*#__PURE__*/_react.default.createElement("span", {
-          className: "".concat(clsPrefix, "-item-title")
+          className: `${clsPrefix}-item-title`
         }, /*#__PURE__*/_react.default.createElement(_typography.default.Text, {
           ellipsis: {
             showTooltip: opts ? {
@@ -144,7 +144,7 @@ class BreadcrumbItem extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, icon, children ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(clsPrefix, "-item-title ").concat(clsPrefix, "-item-title-inline")
+        className: `${clsPrefix}-item-title ${clsPrefix}-item-title-inline`
       }, children) : null);
     };
 
@@ -156,9 +156,9 @@ class BreadcrumbItem extends _baseComponent.default {
       } = this.props;
       const hasHref = href !== null && typeof href !== 'undefined';
       const itemCls = (0, _classnames.default)({
-        ["".concat(clsPrefix, "-item")]: true,
-        ["".concat(clsPrefix, "-item-active")]: active,
-        ["".concat(clsPrefix, "-item-link")]: !noLink
+        [`${clsPrefix}-item`]: true,
+        [`${clsPrefix}-item-active`]: active,
+        [`${clsPrefix}-item-link`]: !noLink
       });
       const itemInner = this.renderBreadItem();
       const tag = active || !hasHref ? 'span' : 'a';
@@ -205,10 +205,10 @@ class BreadcrumbItem extends _baseComponent.default {
     } : {};
     const item = this.renderItem();
     const separator = !active ? this.props.separator || /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(clsPrefix, "-separator")
+      className: `${clsPrefix}-separator`
     }, this.context.separator) : null;
     const wrapperCLs = (0, _classnames.default)({
-      ["".concat(clsPrefix, "-item-wrap")]: true // [`${clsPrefix}-item-wrap-iconOnly`]: !!children && this.props.icon,
+      [`${clsPrefix}-item-wrap`]: true // [`${clsPrefix}-item-wrap-iconOnly`]: !!children && this.props.icon,
 
     });
     return /*#__PURE__*/_react.default.createElement("span", Object.assign({

package/lib/cjs/button/Button.js

@@ -68,15 +68,15 @@ class Button extends _react.PureComponent {
       disabled
     }, (0, _omit2.default)(attr, ['x-semi-children-alias'])), {
       className: (0, _classnames.default)(prefixCls, {
-        ["".concat(prefixCls, "-").concat(type)]: !disabled && type,
-        ["".concat(prefixCls, "-disabled")]: disabled,
-        ["".concat(prefixCls, "-size-large")]: size === 'large',
-        ["".concat(prefixCls, "-size-small")]: size === 'small',
+        [`${prefixCls}-${type}`]: !disabled && type,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-size-large`]: size === 'large',
+        [`${prefixCls}-size-small`]: size === 'small',
         // [`${prefixCls}-loading`]: loading,
-        ["".concat(prefixCls, "-light")]: theme === 'light',
-        ["".concat(prefixCls, "-block")]: block,
-        ["".concat(prefixCls, "-circle")]: circle,
-        ["".concat(prefixCls, "-borderless")]: theme === 'borderless'
+        [`${prefixCls}-light`]: theme === 'light',
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-circle`]: circle,
+        [`${prefixCls}-borderless`]: theme === 'borderless'
       }, className),
       type: htmlType,
       'aria-disabled': disabled
@@ -95,7 +95,7 @@ class Button extends _react.PureComponent {
         onMouseDown: this.props.onMouseDown,
         style: style
       }), /*#__PURE__*/_react.default.createElement("span", Object.assign({
-        className: "".concat(prefixCls, "-content"),
+        className: `${prefixCls}-content`,
         onClick: e => disabled && e.stopPropagation()
       }, xSemiProps), children))
     );

package/lib/cjs/button/buttonGroup.js

@@ -42,7 +42,7 @@ const btnSizes = _constants.strings.sizes;
 class ButtonGroup extends _baseComponent.default {
   getInnerWithLine(inner) {
     const innerWithLine = [];
-    let lineCls = "".concat(prefixCls, "-group-line");
+    let lineCls = `${prefixCls}-group-line`;
 
     if (inner.length > 1) {
       inner.slice(0, -1).forEach((item, index) => {
@@ -55,15 +55,15 @@ class ButtonGroup extends _baseComponent.default {
             theme,
             disabled
           } = buttonProps;
-          lineCls = (0, _classnames.default)("".concat(prefixCls, "-group-line"), "".concat(prefixCls, "-group-line-").concat(theme !== null && theme !== void 0 ? theme : 'light'), "".concat(prefixCls, "-group-line-").concat(type !== null && type !== void 0 ? type : 'primary'), {
-            ["".concat(prefixCls, "-group-line-disabled")]: disabled
+          lineCls = (0, _classnames.default)(`${prefixCls}-group-line`, `${prefixCls}-group-line-${theme !== null && theme !== void 0 ? theme : 'light'}`, `${prefixCls}-group-line-${type !== null && type !== void 0 ? type : 'primary'}`, {
+            [`${prefixCls}-group-line-disabled`]: disabled
           });
         }
 
         if (isButtonType) {
           innerWithLine.push(item, /*#__PURE__*/_react.default.createElement("span", {
             className: lineCls,
-            key: "line-".concat(index)
+            key: `line-${index}`
           }));
         } else {
           innerWithLine.push(item);
@@ -91,7 +91,7 @@ class ButtonGroup extends _baseComponent.default {
 
     let inner;
     let innerWithLine = [];
-    const cls = (0, _classnames.default)("".concat(prefixCls, "-group"), className);
+    const cls = (0, _classnames.default)(`${prefixCls}-group`, className);
 
     if (children) {
       inner = (Array.isArray(children) ? children : [children]).map((itm, index) => {

package/lib/cjs/button/splitButtonGroup.js

@@ -28,7 +28,7 @@ class SplitButtonGroup extends _baseComponent.default {
       style,
       className
     } = this.props;
-    const cls = (0, _classnames.default)("".concat(prefixCls, "-split"), className);
+    const cls = (0, _classnames.default)(`${prefixCls}-split`, className);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: cls,
       style: style,