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

package/lib/es/calendar/weekCalendar.js

@@ -14,11 +14,11 @@ import '@douyinfe/semi-foundation/lib/es/calendar/calendar.css';
 
 const toPercent = num => {
   const res = num < 1 ? num * 100 : 100;
-  return `${res}%`;
+  return "".concat(res, "%");
 };
 
-const prefixCls = `${cssClasses.PREFIX}-week`;
-const allDayCls = `${cssClasses.PREFIX}-all-day`;
+const prefixCls = "".concat(cssClasses.PREFIX, "-week");
+const allDayCls = "".concat(cssClasses.PREFIX, "-all-day");
 export default class WeekCalendar extends BaseComponent {
   constructor(props) {
     super(props);
@@ -50,7 +50,7 @@ export default class WeekCalendar extends BaseComponent {
         const dayEvents = events.has(dateString) ? events.get(dateString) : [];
         const parsed = this.foundation.getParseDailyEvents(dayEvents, day.date);
         return /*#__PURE__*/React.createElement(DayCol, {
-          key: `${dateString}-weekday`,
+          key: "".concat(dateString, "-weekday"),
           displayValue: day.date,
           scrollHeight: this.state.scrollHeight,
           handleClick: this.handleClick,
@@ -73,14 +73,14 @@ export default class WeekCalendar extends BaseComponent {
         week
       } = this.foundation.getWeeklyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header`
+        className: "".concat(prefixCls, "-header")
       }, /*#__PURE__*/React.createElement("ul", {
-        className: `${cssClasses.PREFIX}-tag ${prefixCls}-tag ${prefixCls}-sticky-left`
+        className: "".concat(cssClasses.PREFIX, "-tag ").concat(prefixCls, "-tag ").concat(prefixCls, "-sticky-left")
       }, /*#__PURE__*/React.createElement("span", null, month)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: `${prefixCls}-grid`
+        className: "".concat(prefixCls, "-grid")
       }, /*#__PURE__*/React.createElement("ul", {
-        className: `${prefixCls}-grid-row`
+        className: "".concat(prefixCls, "-grid-row")
       }, week.map(day => {
         const {
           date,
@@ -89,14 +89,14 @@ export default class WeekCalendar extends BaseComponent {
           isToday
         } = day;
         const listCls = cls({
-          [`${cssClasses.PREFIX}-today`]: isToday,
-          [`${cssClasses.PREFIX}-weekend`]: markWeekend && day.isWeekend
+          ["".concat(cssClasses.PREFIX, "-today")]: isToday,
+          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
-          key: `${date.toString()}-weekheader`,
+          key: "".concat(date.toString(), "-weekheader"),
           className: listCls
         }, /*#__PURE__*/React.createElement("span", {
-          className: `${cssClasses.PREFIX}-today-date`
+          className: "".concat(cssClasses.PREFIX, "-today-date")
         }, dayString), /*#__PURE__*/React.createElement("span", null, weekday));
       }))));
     };
@@ -110,15 +110,15 @@ export default class WeekCalendar extends BaseComponent {
           children,
           key
         } = event;
-        const top = `${topInd}em`;
+        const top = "".concat(topInd, "em");
         const style = {
           left: toPercent(leftPos),
           width: toPercent(width),
           top
         };
         return /*#__PURE__*/React.createElement("li", {
-          className: `${cssClasses.PREFIX}-event-item ${cssClasses.PREFIX}-event-allday`,
-          key: `allDay-${ind}`,
+          className: "".concat(cssClasses.PREFIX, "-event-item ").concat(cssClasses.PREFIX, "-event-allday"),
+          key: "allDay-".concat(ind),
           style: style
         }, children);
       });
@@ -132,7 +132,7 @@ export default class WeekCalendar extends BaseComponent {
       const parsed = this.foundation.parseWeeklyAllDayEvents(allDay);
       const maxRowHeight = calcRowHeight(parsed);
       const style = {
-        height: `${maxRowHeight}em`
+        height: "".concat(maxRowHeight, "em")
       };
       const {
         markWeekend
@@ -141,25 +141,25 @@ export default class WeekCalendar extends BaseComponent {
         week
       } = this.weeklyData;
       return /*#__PURE__*/React.createElement("div", {
-        className: `${allDayCls}`,
+        className: "".concat(allDayCls),
         style: style
       }, /*#__PURE__*/React.createElement("ul", {
-        className: `${cssClasses.PREFIX}-tag ${allDayCls}-tag ${prefixCls}-sticky-left`
+        className: "".concat(cssClasses.PREFIX, "-tag ").concat(allDayCls, "-tag ").concat(prefixCls, "-sticky-left")
       }, /*#__PURE__*/React.createElement("span", null, locale.allDay)), /*#__PURE__*/React.createElement("div", {
         role: "gridcell",
-        className: `${cssClasses.PREFIX}-content ${allDayCls}-content`
+        className: "".concat(cssClasses.PREFIX, "-content ").concat(allDayCls, "-content")
       }, /*#__PURE__*/React.createElement("ul", {
-        className: `${allDayCls}-skeleton`
+        className: "".concat(allDayCls, "-skeleton")
       }, Object.keys(week).map((date, ind) => {
         const listCls = cls({
-          [`${cssClasses.PREFIX}-weekend`]: markWeekend && week[date].isWeekend
+          ["".concat(cssClasses.PREFIX, "-weekend")]: markWeekend && week[date].isWeekend
         });
         return /*#__PURE__*/React.createElement("li", {
-          key: `${date}-weekgrid`,
+          key: "".concat(date, "-weekgrid"),
           className: listCls
         });
       })), /*#__PURE__*/React.createElement("ul", {
-        className: `${cssClasses.PREFIX}-event-items`
+        className: "".concat(cssClasses.PREFIX, "-event-items")
       }, this.renderAllDayEvents(parsed))));
     };
 
@@ -246,14 +246,14 @@ export default class WeekCalendar extends BaseComponent {
       style: weekStyle,
       ref: this.dom
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-sticky-top`
+      className: "".concat(prefixCls, "-sticky-top")
     }, header, this.renderHeader(dateFnsLocale), this.renderAllDay(locale)), /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-scroll-wrapper`
+      className: "".concat(prefixCls, "-scroll-wrapper")
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-scroll`,
+      className: "".concat(prefixCls, "-scroll"),
       ref: this.scrollDom
     }, /*#__PURE__*/React.createElement(TimeCol, {
-      className: `${prefixCls}-sticky-left`,
+      className: "".concat(prefixCls, "-sticky-left"),
       renderTimeDisplay: renderTimeDisplay
     }), this.renderDayGrid()))));
   }

package/lib/es/card/cardGroup.js

@@ -29,8 +29,8 @@ class CardGroup extends PureComponent {
           others = __rest(_a, ["children", "className", "spacing", "style", "type"]);
 
     const isGrid = type === 'grid';
-    const cardGroupCls = cls(`${prefixcls}-group`, className, {
-      [`${prefixcls}-group-grid`]: isGrid
+    const cardGroupCls = cls("".concat(prefixcls, "-group"), className, {
+      ["".concat(prefixcls, "-group-grid")]: isGrid
     });
     return /*#__PURE__*/React.createElement(Space, Object.assign({
       spacing: isGrid ? 0 : spacing,

package/lib/es/card/index.js

@@ -35,12 +35,12 @@ class Card extends PureComponent {
         headerLine,
         headerStyle
       } = this.props;
-      const headerCls = cls(`${prefixcls}-header`, {
-        [`${prefixcls}-header-bordered`]: Boolean(headerLine)
+      const headerCls = cls("".concat(prefixcls, "-header"), {
+        ["".concat(prefixcls, "-header-bordered")]: Boolean(headerLine)
       });
-      const headerWrapperCls = cls(`${prefixcls}-header-wrapper`);
-      const titleCls = cls(`${prefixcls}-header-wrapper-title`, {
-        [`${prefixcls}-header-wrapper-spacing`]: Boolean(headerExtraContent)
+      const headerWrapperCls = cls("".concat(prefixcls, "-header-wrapper"));
+      const titleCls = cls("".concat(prefixcls, "-header-wrapper-title"), {
+        ["".concat(prefixcls, "-header-wrapper-spacing")]: Boolean(headerExtraContent)
       });
 
       if (header || headerExtraContent || title) {
@@ -53,7 +53,7 @@ class Card extends PureComponent {
         React.createElement("div", {
           className: headerWrapperCls
         }, headerExtraContent && /*#__PURE__*/React.createElement("div", {
-          className: `${prefixcls}-header-wrapper-extra`,
+          className: "".concat(prefixcls, "-header-wrapper-extra"),
           "x-semi-prop": "headerExtraContent"
         }, headerExtraContent), title && /*#__PURE__*/React.createElement("div", {
           className: titleCls
@@ -74,7 +74,7 @@ class Card extends PureComponent {
       const {
         cover
       } = this.props;
-      const coverCls = cls(`${prefixcls}-cover`);
+      const coverCls = cls("".concat(prefixcls, "-cover"));
       return cover && /*#__PURE__*/React.createElement("div", {
         className: coverCls,
         "x-semi-prop": "cover"
@@ -88,9 +88,9 @@ class Card extends PureComponent {
         actions,
         loading
       } = this.props;
-      const bodyCls = cls(`${prefixcls}-body`);
-      const actionsCls = cls(`${prefixcls}-body-actions`);
-      const actionsItemCls = cls(`${prefixcls}-body-actions-item`);
+      const bodyCls = cls("".concat(prefixcls, "-body"));
+      const actionsCls = cls("".concat(prefixcls, "-body-actions"));
+      const actionsItemCls = cls("".concat(prefixcls, "-body-actions-item"));
       const placeholder = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Skeleton.Title, null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Skeleton.Paragraph, {
         rows: 3
       }));
@@ -108,7 +108,7 @@ class Card extends PureComponent {
       }, actions.map((item, idx) => /*#__PURE__*/React.createElement("div", {
         key: idx,
         className: actionsItemCls,
-        "x-semi-prop": `actions.${idx}`
+        "x-semi-prop": "actions.".concat(idx)
       }, item)))));
     };
 
@@ -118,8 +118,8 @@ class Card extends PureComponent {
         footerLine,
         footerStyle
       } = this.props;
-      const footerCls = cls(`${prefixcls}-footer`, {
-        [`${prefixcls}-footer-bordered`]: footerLine
+      const footerCls = cls("".concat(prefixcls, "-footer"), {
+        ["".concat(prefixcls, "-footer-bordered")]: footerLine
       });
       return footer && /*#__PURE__*/React.createElement("div", {
         style: footerStyle,
@@ -142,9 +142,9 @@ class Card extends PureComponent {
     const others = _omit(otherProps, ['actions', 'bodyStyle', 'cover', 'headerExtraContent', 'footer', 'footerLine', 'footerStyle', 'header', 'headerLine', 'headerStyle', 'loading', 'title']);
 
     const cardCls = cls(prefixcls, className, {
-      [`${prefixcls}-bordered`]: bordered,
-      [`${prefixcls}-shadows`]: shadows,
-      [`${prefixcls}-shadows-${shadows}`]: shadows
+      ["".concat(prefixcls, "-bordered")]: bordered,
+      ["".concat(prefixcls, "-shadows")]: shadows,
+      ["".concat(prefixcls, "-shadows-").concat(shadows)]: shadows
     });
     return /*#__PURE__*/React.createElement("div", Object.assign({}, others, {
       "aria-busy": this.props.loading,

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.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.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