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

package/lib/es/_portal/index.js

@@ -35,7 +35,7 @@ class Portal extends PureComponent {
       }
 
       const cls = classnames(prefixCls, ...classNames, {
-        [`${prefixCls}-rtl`]: direction === 'rtl'
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
       });
 
       if (_this.el) {
@@ -118,7 +118,7 @@ class Portal extends PureComponent {
 Portal.contextType = ConfigContext;
 Portal.defaultProps = {
   // getPopupContainer: () => document.body,
-  prefixCls: `${BASE_CLASS_PREFIX}-portal`
+  prefixCls: "".concat(BASE_CLASS_PREFIX, "-portal")
 };
 Portal.propTypes = {
   children: PropTypes.node,

package/lib/es/_utils/index.js

@@ -57,9 +57,7 @@ export function cloneDeep(value, customizer) {
         }); // internal-issues:887
 
         try {
-          warning(_get(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`);
+          warning(_get(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");
         } catch (e) {}
 
         return newArray;

package/lib/es/anchor/index.js

@@ -130,7 +130,7 @@ class Anchor extends BaseComponent {
       },
       setSlideBarTop: height => {
         this.setState({
-          slideBarTop: `${height}px`
+          slideBarTop: "".concat(height, "px")
         });
       },
       setClickLink: value => {
@@ -189,7 +189,7 @@ class Anchor extends BaseComponent {
         return elTop;
       },
       getAnchorNode: selector => {
-        const selectors = `#${this.anchorID} ${selector}`;
+        const selectors = "#".concat(this.anchorID, " ").concat(selector);
         return document.querySelector(selectors);
       },
       getContentNode: selector => document.querySelector(selector),
@@ -244,15 +244,15 @@ class Anchor extends BaseComponent {
       slideBarTop
     } = this.state;
     const wrapperCls = cls(prefixCls, className, {
-      [`${prefixCls}-size-${size}`]: size
+      ["".concat(prefixCls, "-size-").concat(size)]: size
     });
-    const slideCls = cls(`${prefixCls}-slide`, `${prefixCls}-slide-${railTheme}`);
-    const slideBarCls = cls(`${prefixCls}-slide-bar`, {
-      [`${prefixCls}-slide-bar-${size}`]: size,
-      [`${prefixCls}-slide-bar-${railTheme}`]: railTheme,
-      [`${prefixCls}-slide-bar-active`]: activeLink
+    const slideCls = cls("".concat(prefixCls, "-slide"), "".concat(prefixCls, "-slide-").concat(railTheme));
+    const slideBarCls = cls("".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 anchorWrapper = `${prefixCls}-link-wrapper`;
+    const anchorWrapper = "".concat(prefixCls, "-link-wrapper");
     const wrapperStyle = Object.assign(Object.assign({}, style), {
       maxWidth,
       maxHeight

package/lib/es/anchor/link.js

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

package/lib/es/autoComplete/index.js

@@ -59,11 +59,7 @@ class AutoComplete extends BaseComponent {
     this.triggerRef = /*#__PURE__*/React.createRef();
     this.optionsRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
-    warning('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.`);
+    warning('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.");
   }
 
   get adapter() {
@@ -200,7 +196,7 @@ class AutoComplete extends BaseComponent {
       style,
       className: useCustomTrigger ? cls(className) : cls({
         [prefixCls]: true,
-        [`${prefixCls}-disabled`]: disabled
+        ["".concat(prefixCls, "-disabled")]: disabled
       }, className),
       onClick: this.handleInputClick,
       ref: this.triggerRef,
@@ -244,7 +240,7 @@ class AutoComplete extends BaseComponent {
   }
 
   renderLoading() {
-    const loadingWrapperCls = `${prefixCls}-loading-wrapper`;
+    const loadingWrapperCls = "".concat(prefixCls, "-loading-wrapper");
     return /*#__PURE__*/React.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/React.createElement(Spin, null));
@@ -278,7 +274,7 @@ class AutoComplete extends BaseComponent {
       dropdownMinWidth
     } = this.state;
     const listCls = cls({
-      [`${prefixCls}-option-list`]: true
+      ["".concat(prefixCls, "-option-list")]: true
     }, dropdownClassName);
     let optionsNode;
 

package/lib/es/autoComplete/option.js

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

package/lib/es/avatar/avatarGroup.js

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

package/lib/es/avatar/index.js

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

package/lib/es/badge/index.js

@@ -45,18 +45,18 @@ export default class Badge extends PureComponent {
     const custom = count && !(_isNumber(count) || _isString(count));
     const showBadge = count !== null && typeof count !== 'undefined';
     const wrapper = cls(className, {
-      [`${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
+      ["".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
     });
     let content;
 
     if (_isNumber(count)) {
-      content = overflowCount && overflowCount < count ? `${overflowCount}+` : `${count}`;
+      content = overflowCount && overflowCount < count ? "".concat(overflowCount, "+") : "".concat(count);
     } else {
       content = count;
     }

package/lib/es/banner/index.js

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

package/lib/es/breadcrumb/index.js

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

package/lib/es/breadcrumb/item.js

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

package/lib/es/button/Button.js

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

package/lib/es/button/buttonGroup.js

@@ -22,7 +22,7 @@ const btnSizes = strings.sizes;
 export default class ButtonGroup extends BaseComponent {
   getInnerWithLine(inner) {
     const innerWithLine = [];
-    let lineCls = `${prefixCls}-group-line`;
+    let lineCls = "".concat(prefixCls, "-group-line");
 
     if (inner.length > 1) {
       inner.slice(0, -1).forEach((item, index) => {
@@ -36,15 +36,15 @@ export default class ButtonGroup extends BaseComponent {
             theme,
             disabled
           } = buttonProps;
-          lineCls = classNames(`${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
+          lineCls = classNames("".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
           });
         }
 
         if (isButtonType) {
           innerWithLine.push(item, /*#__PURE__*/React.createElement("span", {
             className: lineCls,
-            key: `line-${index}`
+            key: "line-".concat(index)
           }));
         } else {
           innerWithLine.push(item);
@@ -72,7 +72,7 @@ export default class ButtonGroup extends BaseComponent {
 
     let inner;
     let innerWithLine = [];
-    const cls = classNames(`${prefixCls}-group`, className);
+    const cls = classNames("".concat(prefixCls, "-group"), className);
 
     if (children) {
       inner = (Array.isArray(children) ? children : [children]).map((itm, index) => {

package/lib/es/button/splitButtonGroup.js

@@ -12,7 +12,7 @@ export default class SplitButtonGroup extends BaseComponent {
       style,
       className
     } = this.props;
-    const cls = classNames(`${prefixCls}-split`, className);
+    const cls = classNames("".concat(prefixCls, "-split"), className);
     return /*#__PURE__*/React.createElement("div", {
       className: cls,
       style: style,