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

package/lib/es/card/meta.js

@@ -27,18 +27,18 @@ class Meta extends PureComponent {
     } = _a,
           others = __rest(_a, ["avatar", "className", "description", "style", "title"]);
 
-    const metaCls = cls(`${prefixcls}-meta`, className);
+    const metaCls = cls("".concat(prefixcls, "-meta"), className);
     const avatarNode = avatar && /*#__PURE__*/React.createElement("div", {
-      className: `${prefixcls}-meta-avatar`
+      className: "".concat(prefixcls, "-meta-avatar")
     }, avatar);
     const titleNode = title && /*#__PURE__*/React.createElement("div", {
-      className: `${prefixcls}-meta-wrapper-title`
+      className: "".concat(prefixcls, "-meta-wrapper-title")
     }, title);
     const descriptionNode = description && /*#__PURE__*/React.createElement("div", {
-      className: `${prefixcls}-meta-wrapper-description`
+      className: "".concat(prefixcls, "-meta-wrapper-description")
     }, description);
     const wrapper = title || description ? /*#__PURE__*/React.createElement("div", {
-      className: `${prefixcls}-meta-wrapper`
+      className: "".concat(prefixcls, "-meta-wrapper")
     }, titleNode, descriptionNode) : null;
     return /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
       className: metaCls,

package/lib/es/carousel/CarouselArrow.js

@@ -36,16 +36,16 @@ class CarouselArrow extends React.PureComponent {
     } = this.props;
     const classNames = cls({
       [cssClasses.CAROUSEL_ARROW]: true,
-      [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
-      [`${cssClasses.CAROUSEL_ARROW}-hover`]: type === 'hover'
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme,
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-hover")]: type === 'hover'
     });
     const leftClassNames = cls({
-      [`${cssClasses.CAROUSEL_ARROW}-prev`]: true,
-      [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-prev")]: true,
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme
     });
     const rightClassNames = cls({
-      [`${cssClasses.CAROUSEL_ARROW}-next`]: true,
-      [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-next")]: true,
+      ["".concat(cssClasses.CAROUSEL_ARROW, "-").concat(theme)]: theme
     });
     return /*#__PURE__*/React.createElement("div", {
       className: classNames

package/lib/es/carousel/CarouselIndicator.d.ts

@@ -8,7 +8,7 @@ declare class CarouselIndicator extends React.PureComponent<CarouselIndicatorPro
         position: PropTypes.Requireable<"left" | "right" | "center">;
         size: PropTypes.Requireable<"small" | "medium">;
         style: PropTypes.Requireable<object>;
-        theme: PropTypes.Requireable<"dark" | "light" | "primary">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
         total: PropTypes.Requireable<number>;
         onIndicatorChange: PropTypes.Requireable<(...args: any[]) => any>;
         type: PropTypes.Requireable<"line" | "dot" | "columnar">;

package/lib/es/carousel/CarouselIndicator.js

@@ -62,10 +62,10 @@ class CarouselIndicator extends React.PureComponent {
         // role='none' 
         key: i,
         "data-index": i,
-        className: cls([`${cssClasses.CAROUSEL_INDICATOR}-item`], {
-          [`${cssClasses.CAROUSEL_INDICATOR}-item-active`]: i === activeIndex,
-          [`${cssClasses.CAROUSEL_INDICATOR}-item-${theme}`]: theme,
-          [`${cssClasses.CAROUSEL_INDICATOR}-item-${size}`]: size
+        className: cls(["".concat(cssClasses.CAROUSEL_INDICATOR, "-item")], {
+          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-active")]: i === activeIndex,
+          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-").concat(theme)]: theme,
+          ["".concat(cssClasses.CAROUSEL_INDICATOR, "-item-").concat(size)]: size
         }),
         onClick: () => this.handleIndicatorClick(i),
         onMouseEnter: () => this.handleIndicatorHover(i)
@@ -89,8 +89,8 @@ class CarouselIndicator extends React.PureComponent {
 
     const classNames = cls(className, {
       [cssClasses.CAROUSEL_INDICATOR]: true,
-      [`${cssClasses.CAROUSEL_INDICATOR}-${type}`]: type,
-      [`${cssClasses.CAROUSEL_INDICATOR}-${position}`]: position
+      ["".concat(cssClasses.CAROUSEL_INDICATOR, "-").concat(type)]: type,
+      ["".concat(cssClasses.CAROUSEL_INDICATOR, "-").concat(position)]: position
     });
     const indicatorContent = this.renderIndicatorContent();
     return /*#__PURE__*/React.createElement("div", Object.assign({

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

@@ -22,9 +22,9 @@ declare class Carousel extends BaseComponent<CarouselProps, CarouselState> {
         indicatorPosition: PropTypes.Requireable<"left" | "right" | "center">;
         indicatorSize: PropTypes.Requireable<"small" | "medium">;
         indicatorType: PropTypes.Requireable<"line" | "dot" | "columnar">;
-        theme: PropTypes.Requireable<"dark" | "light" | "primary">;
+        theme: PropTypes.Requireable<"primary" | "dark" | "light">;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        arrowType: PropTypes.Requireable<"always" | "hover">;
+        arrowType: PropTypes.Requireable<"hover" | "always">;
         showArrow: PropTypes.Requireable<boolean>;
         showIndicator: PropTypes.Requireable<boolean>;
         slideDirection: PropTypes.Requireable<"left" | "right">;

package/lib/es/carousel/index.js

@@ -96,20 +96,20 @@ class Carousel extends BaseComponent {
         const isNext = index === this.getValidIndex(activeIndex + 1);
         const animateStyle = {
           transitionTimingFunction: 'ease',
-          transitionDuration: `${speed}ms`,
+          transitionDuration: "".concat(speed, "ms"),
           animationTimingFunction: 'ease',
-          animationDuration: `${speed}ms`
+          animationDuration: "".concat(speed, "ms")
         };
         return /*#__PURE__*/React.cloneElement(child, {
           style: Object.assign(Object.assign({}, child.props.style), animateStyle),
           className: cls(child.props.className, {
-            [`${cssClasses.CAROUSEL_CONTENT}-item-prev`]: isPrev,
-            [`${cssClasses.CAROUSEL_CONTENT}-item-next`]: isNext,
-            [`${cssClasses.CAROUSEL_CONTENT}-item-current`]: isCurrent,
-            [`${cssClasses.CAROUSEL_CONTENT}-item`]: true,
-            [`${cssClasses.CAROUSEL_CONTENT}-item-active`]: isCurrent,
-            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-in`]: animation === 'slide' && !isInit && isCurrent,
-            [`${cssClasses.CAROUSEL_CONTENT}-item-slide-out`]: animation === 'slide' && !isInit && index === preIndex
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-prev")]: isPrev,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-next")]: isNext,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-current")]: isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item")]: true,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-active")]: isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-in")]: animation === 'slide' && !isInit && isCurrent,
+            ["".concat(cssClasses.CAROUSEL_CONTENT, "-item-slide-out")]: animation === 'slide' && !isInit && index === preIndex
           })
         });
       }));
@@ -252,9 +252,9 @@ class Carousel extends BaseComponent {
       onMouseEnter: _debounce(this.handleMouseEnter, 400),
       onMouseLeave: _debounce(this.handleMouseLeave, 400)
     }, /*#__PURE__*/React.createElement("div", {
-      className: cls([`${cssClasses.CAROUSEL_CONTENT}-${animation}`], {
-        [`${cssClasses.CAROUSEL_CONTENT}`]: true,
-        [`${cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse
+      className: cls(["".concat(cssClasses.CAROUSEL_CONTENT, "-").concat(animation)], {
+        ["".concat(cssClasses.CAROUSEL_CONTENT)]: true,
+        ["".concat(cssClasses.CAROUSEL_CONTENT, "-reverse")]: slideDirection === 'left' ? isReverse : !isReverse
       }),
       "x-semi-prop": "children"
     }, this.renderChildren()), this.renderIndicator(), this.renderArrow());

package/lib/es/cascader/index.js

@@ -57,8 +57,8 @@ class Cascader extends BaseComponent {
       const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
 
       if (!_isEmpty(keyEntities) && !_isEmpty(keyEntities[nodeKey])) {
-        const tagCls = cls(`${prefixcls}-selection-tag`, {
-          [`${prefixcls}-selection-tag-disabled`]: isDsiabled
+        const tagCls = cls("".concat(prefixcls, "-selection-tag"), {
+          ["".concat(prefixcls, "-selection-tag-disabled")]: isDsiabled
         }); // custom render tags
 
         if (_isFunction(displayRender)) {
@@ -66,7 +66,7 @@ class Cascader extends BaseComponent {
         } else {
           return /*#__PURE__*/React.createElement(Tag, {
             size: size === 'default' ? 'large' : size,
-            key: `tag-${nodeKey}-${idx}`,
+            key: "tag-".concat(nodeKey, "-").concat(idx),
             color: "white",
             className: tagCls,
             closable: true,
@@ -123,7 +123,7 @@ class Cascader extends BaseComponent {
         filterRender
       } = this.props;
       const searchable = Boolean(filterTreeNode) && isSearching;
-      const popoverCls = cls(dropdownClassName, `${prefixcls}-popover`);
+      const popoverCls = cls(dropdownClassName, "".concat(prefixcls, "-popover"));
       const renderData = this.foundation.getRenderData();
       const content = /*#__PURE__*/React.createElement("div", {
         className: popoverCls,
@@ -159,8 +159,8 @@ class Cascader extends BaseComponent {
         showRestTagsPopover,
         restTagsPopoverProps
       } = this.props;
-      const plusNCls = cls(`${prefixcls}-selection-n`, {
-        [`${prefixcls}-selection-n-disabled`]: disabled
+      const plusNCls = cls("".concat(prefixcls, "-selection-n"), {
+        ["".concat(prefixcls, "-selection-n-disabled")]: disabled
       });
       const renderPlusNChildren = /*#__PURE__*/React.createElement("span", {
         className: plusNCls
@@ -217,7 +217,7 @@ class Cascader extends BaseComponent {
           displayText = displayRender(displayPath);
         } else {
           displayText = displayPath.map((path, index) => /*#__PURE__*/React.createElement(Fragment, {
-            key: `${path}-${index}`
+            key: "".concat(path, "-").concat(index)
           }, index < displayPath.length - 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, path, separator) : path));
         }
       }
@@ -240,7 +240,7 @@ class Cascader extends BaseComponent {
         if (multiple) {
           if (_isEmpty(checkedKeys)) {
             return /*#__PURE__*/React.createElement("span", {
-              className: `${prefixcls}-selection-placeholder`
+              className: "".concat(prefixcls, "-selection-placeholder")
             }, placeholder);
           }
 
@@ -248,7 +248,7 @@ class Cascader extends BaseComponent {
         } else {
           const displayText = this.renderDisplayText();
           const spanCls = cls({
-            [`${prefixcls}-selection-placeholder`]: !displayText
+            ["".concat(prefixcls, "-selection-placeholder")]: !displayText
           });
           return /*#__PURE__*/React.createElement("span", {
             className: spanCls
@@ -265,9 +265,9 @@ class Cascader extends BaseComponent {
         suffix
       } = this.props;
       const suffixWrapperCls = cls({
-        [`${prefixcls}-suffix`]: true,
-        [`${prefixcls}-suffix-text`]: suffix && _isString(suffix),
-        [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix)
+        ["".concat(prefixcls, "-suffix")]: true,
+        ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
+        ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: suffixWrapperCls,
@@ -283,11 +283,11 @@ class Cascader extends BaseComponent {
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = cls({
-        [`${prefixcls}-prefix`]: true,
+        ["".concat(prefixcls, "-prefix")]: true,
         // to be doublechecked
-        [`${prefixcls}-inset-label`]: insetLabel,
-        [`${prefixcls}-prefix-text`]: labelNode && _isString(labelNode),
-        [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode)
+        ["".concat(prefixcls, "-inset-label")]: insetLabel,
+        ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
+        ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -376,7 +376,7 @@ class Cascader extends BaseComponent {
     };
 
     this.renderClearBtn = () => {
-      const clearCls = cls(`${prefixcls}-clearbtn`);
+      const clearCls = cls("".concat(prefixcls, "-clearbtn"));
       const {
         clearIcon
       } = this.props;
@@ -406,7 +406,7 @@ class Cascader extends BaseComponent {
       }
 
       return arrowIcon ? /*#__PURE__*/React.createElement("div", {
-        className: cls(`${prefixcls}-arrow`),
+        className: cls("".concat(prefixcls, "-arrow")),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
@@ -436,23 +436,23 @@ class Cascader extends BaseComponent {
       const filterable = Boolean(filterTreeNode);
       const useCustomTrigger = typeof triggerRender === 'function';
       const classNames = useCustomTrigger ? cls(className) : cls(prefixcls, className, {
-        [`${prefixcls}-focus`]: isFocus || isOpen && !isInput,
-        [`${prefixcls}-disabled`]: disabled,
-        [`${prefixcls}-single`]: true,
-        [`${prefixcls}-filterable`]: filterable,
-        [`${prefixcls}-error`]: validateStatus === 'error',
-        [`${prefixcls}-warning`]: validateStatus === 'warning',
-        [`${prefixcls}-small`]: size === 'small',
-        [`${prefixcls}-large`]: size === 'large',
-        [`${prefixcls}-with-prefix`]: prefix || insetLabel,
-        [`${prefixcls}-with-suffix`]: suffix
+        ["".concat(prefixcls, "-focus")]: isFocus || isOpen && !isInput,
+        ["".concat(prefixcls, "-disabled")]: disabled,
+        ["".concat(prefixcls, "-single")]: true,
+        ["".concat(prefixcls, "-filterable")]: filterable,
+        ["".concat(prefixcls, "-error")]: validateStatus === 'error',
+        ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
+        ["".concat(prefixcls, "-small")]: size === 'small',
+        ["".concat(prefixcls, "-large")]: size === 'large',
+        ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
+        ["".concat(prefixcls, "-with-suffix")]: suffix
       });
       const mouseEvent = showClear ? {
         onMouseEnter: () => this.handleMouseOver(),
         onMouseLeave: () => this.handleMouseLeave()
       } : {};
-      const sectionCls = cls(`${prefixcls}-selection`, {
-        [`${prefixcls}-selection-multiple`]: multiple && !_isEmpty(checkedKeys)
+      const sectionCls = cls("".concat(prefixcls, "-selection"), {
+        ["".concat(prefixcls, "-selection-multiple")]: multiple && !_isEmpty(checkedKeys)
       });
       const inner = useCustomTrigger ? this.renderCustomTrigger() : [/*#__PURE__*/React.createElement(Fragment, {
         key: 'prefix'
@@ -843,7 +843,7 @@ class Cascader extends BaseComponent {
       keyEntities,
       resolvedCheckedKeys
     } = this.state;
-    const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
+    const tagInputcls = cls("".concat(prefixcls, "-tagInput-wrapper"));
     const tagValue = [];
     const realKeys = this.mergeType === strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
     [...realKeys].forEach(checkedKey => {
@@ -876,7 +876,7 @@ class Cascader extends BaseComponent {
       size,
       disabled
     } = this.props;
-    const inputcls = cls(`${prefixcls}-input`);
+    const inputcls = cls("".concat(prefixcls, "-input"));
     const {
       inputValue,
       inputPlaceHolder,
@@ -889,13 +889,13 @@ class Cascader extends BaseComponent {
       onChange: this.handleInputChange
     };
     const wrappercls = cls({
-      [`${prefixcls}-search-wrapper`]: true
+      ["".concat(prefixcls, "-search-wrapper")]: true
     });
     const displayText = this.renderDisplayText();
     const spanCls = cls({
-      [`${prefixcls}-selection-placeholder`]: !displayText,
-      [`${prefixcls}-selection-text-hide`]: showInput && inputValue,
-      [`${prefixcls}-selection-text-inactive`]: showInput && !inputValue
+      ["".concat(prefixcls, "-selection-placeholder")]: !displayText,
+      ["".concat(prefixcls, "-selection-text-hide")]: showInput && inputValue,
+      ["".concat(prefixcls, "-selection-text-inactive")]: showInput && !inputValue
     });
     return /*#__PURE__*/React.createElement("div", {
       className: wrappercls

package/lib/es/cascader/item.js

@@ -97,29 +97,29 @@ export default class Item extends PureComponent {
       let haveMarginLeft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
       const finalCls = style => {
-        return style + (haveMarginLeft ? ` ${prefixcls}-icon-left` : '');
+        return style + (haveMarginLeft ? " ".concat(prefixcls, "-icon-left") : '');
       };
 
       switch (type) {
         case 'child':
           return /*#__PURE__*/React.createElement(IconChevronRight, {
-            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-expand`)
+            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-expand"))
           });
 
         case 'tick':
           return /*#__PURE__*/React.createElement(IconTick, {
-            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-active`)
+            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-active"))
           });
 
         case 'loading':
           return /*#__PURE__*/React.createElement(Spin, {
-            wrapperClassName: finalCls(`${prefixcls}-spin-icon`)
+            wrapperClassName: finalCls("".concat(prefixcls, "-spin-icon"))
           });
 
         case 'empty':
           return /*#__PURE__*/React.createElement("span", {
             "aria-hidden": true,
-            className: finalCls(`${prefixcls}-icon ${prefixcls}-icon-empty`)
+            className: finalCls("".concat(prefixcls, "-icon ").concat(prefixcls, "-icon-empty"))
           });
 
         default:
@@ -138,8 +138,8 @@ export default class Item extends PureComponent {
           item.split(keyword).forEach((node, index) => {
             if (index > 0) {
               content.push( /*#__PURE__*/React.createElement("span", {
-                className: `${prefixcls}-label-highlight`,
-                key: `${index}-${idx}`
+                className: "".concat(prefixcls, "-label-highlight"),
+                key: "".concat(index, "-").concat(idx)
               }, keyword));
             }
 
@@ -166,7 +166,7 @@ export default class Item extends PureComponent {
         filterRender
       } = this.props;
       const content = /*#__PURE__*/React.createElement("ul", {
-        className: `${prefixcls}-list`,
+        className: "".concat(prefixcls, "-list"),
         key: 'flatten-list'
       }, data.map(item => {
         const {
@@ -177,9 +177,9 @@ export default class Item extends PureComponent {
         } = item;
         const selected = selectedKeys.has(key);
         const className = cls(prefixcls, {
-          [`${prefixcls}-flatten`]: true && !filterRender,
-          [`${prefixcls}-disabled`]: disabled,
-          [`${prefixcls}-select`]: selected && !multiple
+          ["".concat(prefixcls, "-flatten")]: true && !filterRender,
+          ["".concat(prefixcls, "-disabled")]: disabled,
+          ["".concat(prefixcls, "-select")]: selected && !multiple
         });
 
         const onClick = e => {
@@ -216,13 +216,13 @@ export default class Item extends PureComponent {
           onClick: onClick,
           onKeyPress: onKeyPress
         }, /*#__PURE__*/React.createElement("span", {
-          className: `${prefixcls}-label`
+          className: "".concat(prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
           onChange: onCheck,
           disabled: disabled,
           indeterminate: halfCheckedKeys.has(item.key),
           checked: checkedKeys.has(item.key),
-          className: `${prefixcls}-label-checkbox`
+          className: "".concat(prefixcls, "-label-checkbox")
         }), this.highlight(searchText)));
       }));
       return content;
@@ -240,7 +240,7 @@ export default class Item extends PureComponent {
     const ind = content.length;
     content.push( /*#__PURE__*/React.createElement("ul", {
       role: 'menu',
-      className: `${prefixcls}-list`,
+      className: "".concat(prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, renderData.map(item => {
@@ -268,16 +268,16 @@ export default class Item extends PureComponent {
       }
 
       const className = cls(prefixcls, {
-        [`${prefixcls}-active`]: active && !selected,
-        [`${prefixcls}-select`]: selected && !multiple,
-        [`${prefixcls}-disabled`]: disabled
+        ["".concat(prefixcls, "-active")]: active && !selected,
+        ["".concat(prefixcls, "-select")]: selected && !multiple,
+        ["".concat(prefixcls, "-disabled")]: disabled
       });
       const otherAriaProps = parentKey ? {
-        ['aria-owns']: `cascaderItem-${parentKey}`
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
       } : {};
       return /*#__PURE__*/React.createElement("li", Object.assign({
         role: 'menuitem',
-        id: `cascaderItem-${key}`,
+        id: "cascaderItem-".concat(key),
         "aria-expanded": active,
         "aria-haspopup": Boolean(showExpand),
         "aria-disabled": disabled
@@ -292,13 +292,13 @@ export default class Item extends PureComponent {
           this.onHover(e, item);
         }
       }), /*#__PURE__*/React.createElement("span", {
-        className: `${prefixcls}-label`
+        className: "".concat(prefixcls, "-label")
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/React.createElement(Checkbox, {
         onChange: e => this.onCheckboxChange(e, item),
         disabled: disabled,
         indeterminate: halfCheckedKeys.has(item.key),
         checked: checkedKeys.has(item.key),
-        className: `${prefixcls}-label-checkbox`
+        className: "".concat(prefixcls, "-label-checkbox")
       }), /*#__PURE__*/React.createElement("span", null, label)), showExpand ? this.renderIcon(loading ? 'loading' : 'child', true) : null);
     })));
 
@@ -316,10 +316,10 @@ export default class Item extends PureComponent {
     return /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Cascader"
     }, locale => /*#__PURE__*/React.createElement("ul", {
-      className: `${prefixcls} ${prefixcls}-empty`,
+      className: "".concat(prefixcls, " ").concat(prefixcls, "-empty"),
       key: 'empty-list'
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${prefixcls}-label`,
+      className: "".concat(prefixcls, "-label"),
       "x-semi-prop": "emptyContent"
     }, emptyContent || locale.emptyText)));
   }
@@ -335,9 +335,9 @@ export default class Item extends PureComponent {
     const isEmpty = !data || !data.length;
     let content;
     const listsCls = cls({
-      [`${prefixcls}-lists`]: true,
-      [`${prefixcls}-lists-rtl`]: direction === 'rtl',
-      [`${prefixcls}-lists-empty`]: isEmpty
+      ["".concat(prefixcls, "-lists")]: true,
+      ["".concat(prefixcls, "-lists-rtl")]: direction === 'rtl',
+      ["".concat(prefixcls, "-lists-empty")]: isEmpty
     });
 
     if (isEmpty) {

package/lib/es/checkbox/checkbox.js

@@ -188,20 +188,20 @@ class Checkbox extends BaseComponent {
     const prefix = prefixCls || css.PREFIX;
     const focusOuter = props.isCardType || props.isPureCardType;
     const wrapper = classnames(prefix, {
-      [`${prefix}-disabled`]: props.disabled,
-      [`${prefix}-indeterminate`]: indeterminate,
-      [`${prefix}-checked`]: props.checked,
-      [`${prefix}-unChecked`]: !props.checked,
-      [`${prefix}-cardType`]: props.isCardType,
-      [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
-      [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
-      [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
-      [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
+      ["".concat(prefix, "-disabled")]: props.disabled,
+      ["".concat(prefix, "-indeterminate")]: indeterminate,
+      ["".concat(prefix, "-checked")]: props.checked,
+      ["".concat(prefix, "-unChecked")]: !props.checked,
+      ["".concat(prefix, "-cardType")]: props.isCardType,
+      ["".concat(prefix, "-cardType_disabled")]: props.disabled && props.isCardType,
+      ["".concat(prefix, "-cardType_unDisabled")]: !(props.disabled && props.isCardType),
+      ["".concat(prefix, "-cardType_checked")]: props.isCardType && props.checked && !props.disabled,
+      ["".concat(prefix, "-cardType_checked_disabled")]: props.isCardType && props.checked && props.disabled,
       [className]: Boolean(className),
-      [`${prefix}-focus`]: focusVisible && focusOuter
+      ["".concat(prefix, "-focus")]: focusVisible && focusOuter
     });
-    const extraCls = classnames(`${prefix}-extra`, {
-      [`${prefix}-cardType_extra_noChildren`]: props.isCardType && !children
+    const extraCls = classnames("".concat(prefix, "-extra"), {
+      ["".concat(prefix, "-cardType_extra_noChildren")]: props.isCardType && !children
     });
     const name = inGroup && this.context.checkboxGroup.name;
     const xSemiPropChildren = this.props['x-semi-children-alias'] || 'children';
@@ -212,10 +212,10 @@ class Checkbox extends BaseComponent {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: `${prefix}-content`
+        className: "".concat(prefix, "-content")
       }, children ? /*#__PURE__*/React.createElement("span", {
         id: addonId,
-        className: `${prefix}-addon`,
+        className: "".concat(prefix, "-addon"),
         "x-semi-prop": xSemiPropChildren
       }, children) : null, extra ? /*#__PURE__*/React.createElement("div", {
         id: extraId,

package/lib/es/checkbox/checkboxGroup.js

@@ -68,10 +68,10 @@ class CheckboxGroup extends BaseComponent {
     const prefix = prefixCls || css.PREFIX;
     const prefixClsDisplay = classnames({
       [prefix]: true,
-      [`${prefix}-wrapper`]: true,
-      [`${prefix}-${direction}`]: direction,
-      [`${prefix}-${direction}-cardType`]: direction && isCardType,
-      [`${prefix}-${direction}-pureCardType`]: direction && isPureCardType
+      ["".concat(prefix, "-wrapper")]: true,
+      ["".concat(prefix, "-").concat(direction)]: direction,
+      ["".concat(prefix, "-").concat(direction, "-cardType")]: direction && isCardType,
+      ["".concat(prefix, "-").concat(direction, "-pureCardType")]: direction && isPureCardType
     }, className);
     const realValue = this.state.value.slice();
     let inner;

package/lib/es/checkbox/checkboxInner.js

@@ -38,14 +38,14 @@ class CheckboxInner extends PureComponent {
     } = this.props;
     const prefix = prefixCls || css.PREFIX;
     const wrapper = classnames({
-      [`${prefix}-inner`]: true,
-      [`${prefix}-inner-checked`]: Boolean(checked),
-      [`${prefix}-inner-pureCardType`]: isPureCardType
+      ["".concat(prefix, "-inner")]: true,
+      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
+      ["".concat(prefix, "-inner-pureCardType")]: isPureCardType
     }, css.WRAPPER);
     const inner = classnames({
-      [`${prefix}-inner-display`]: true,
-      [`${prefix}-focus`]: focusInner,
-      [`${prefix}-focus-border`]: focusInner && !checked
+      ["".concat(prefix, "-inner-display")]: true,
+      ["".concat(prefix, "-focus")]: focusInner,
+      ["".concat(prefix, "-focus-border")]: focusInner && !checked
     });
     const icon = checked ? /*#__PURE__*/React.createElement(IconCheckboxTick, null) : indeterminate ? /*#__PURE__*/React.createElement(IconCheckboxIndeterminate, null) : null;
     const inputProps = {

package/lib/es/collapse/item.js

@@ -48,15 +48,15 @@ export default class CollapsePanel extends PureComponent {
 
     const icon = /*#__PURE__*/React.createElement("span", {
       "aria-hidden": 'true',
-      className: cls([`${cssClasses.PREFIX}-header-icon`, {
-        [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable
+      className: cls(["".concat(cssClasses.PREFIX, "-header-icon"), {
+        ["".concat(cssClasses.PREFIX, "-header-iconDisabled")]: !expandIconEnable
       }])
     }, expandIconEnable ? active ? collapseIcon : expandIcon : expandIcon);
     const iconPosLeft = expandIconPosition === 'left';
 
     if (typeof header === 'string') {
       return /*#__PURE__*/React.createElement(React.Fragment, null, showArrow && (iconPosLeft ? icon : null), /*#__PURE__*/React.createElement("span", null, header), /*#__PURE__*/React.createElement("span", {
-        className: `${cssClasses.PREFIX}-header-right`
+        className: "".concat(cssClasses.PREFIX, "-header-right")
       }, /*#__PURE__*/React.createElement("span", null, extra), showArrow && (iconPosLeft ? null : icon)));
     }
 
@@ -86,15 +86,15 @@ export default class CollapsePanel extends PureComponent {
     } = this.context;
     const active = activeSet.has(itemKey);
     const itemCls = cls(className, {
-      [`${cssClasses.PREFIX}-item`]: true
+      ["".concat(cssClasses.PREFIX, "-item")]: true
     });
     const headerCls = cls({
-      [`${cssClasses.PREFIX}-header`]: true,
-      [`${cssClasses.PREFIX}-header-disabled`]: disabled,
-      [`${cssClasses.PREFIX}-header-iconLeft`]: expandIconPosition === 'left'
+      ["".concat(cssClasses.PREFIX, "-header")]: true,
+      ["".concat(cssClasses.PREFIX, "-header-disabled")]: disabled,
+      ["".concat(cssClasses.PREFIX, "-header-iconLeft")]: expandIconPosition === 'left'
     });
     const contentCls = cls({
-      [`${cssClasses.PREFIX}-content`]: true
+      ["".concat(cssClasses.PREFIX, "-content")]: true
     });
     return /*#__PURE__*/React.createElement("div", Object.assign({
       className: itemCls
@@ -116,7 +116,7 @@ export default class CollapsePanel extends PureComponent {
       "aria-hidden": !active,
       id: this.ariaID
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${cssClasses.PREFIX}-content-wrapper`
+      className: "".concat(cssClasses.PREFIX, "-content-wrapper")
     }, children))));
   }