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

package/lib/es/form/label.js

@@ -21,26 +21,26 @@ export default class Label extends PureComponent {
       optional
     } = this.props;
     const labelCls = classNames(className, {
-      [`${prefixCls}-field-label`]: true,
-      [`${prefixCls}-field-label-left`]: align === 'left',
-      [`${prefixCls}-field-label-right`]: align === 'right',
-      [`${prefixCls}-field-label-required`]: required,
-      [`${prefixCls}-field-label-disabled`]: disabled,
-      [`${prefixCls}-field-label-with-extra`]: extra
+      ["".concat(prefixCls, "-field-label")]: true,
+      ["".concat(prefixCls, "-field-label-left")]: align === 'left',
+      ["".concat(prefixCls, "-field-label-right")]: align === 'right',
+      ["".concat(prefixCls, "-field-label-required")]: required,
+      ["".concat(prefixCls, "-field-label-disabled")]: disabled,
+      ["".concat(prefixCls, "-field-label-with-extra")]: extra
     });
     const labelStyle = style ? style : {};
     width ? labelStyle.width = width : null;
     const optionalText = /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Form"
     }, locale => /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-field-label-optional-text`
+      className: "".concat(prefixCls, "-field-label-optional-text")
     }, locale.optional));
     const textContent = /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-field-label-text`,
+      className: "".concat(prefixCls, "-field-label-text"),
       "x-semi-prop": "label"
     }, typeof text !== 'undefined' ? text : children, optional ? optionalText : null);
     const contentWithExtra = /*#__PURE__*/React.createElement(React.Fragment, null, textContent, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-field-label-extra`
+      className: "".concat(prefixCls, "-field-label-extra")
     }, extra));
     return /*#__PURE__*/React.createElement("label", {
       className: labelCls,

package/lib/es/form/slot.js

@@ -53,11 +53,11 @@ const FormSlot = props => {
 
   const appendCol = labelCol && wrapperCol;
   const slotCls = classNames({
-    [`${prefix}-field`]: true,
-    [`${prefix}-slot`]: true
+    ["".concat(prefix, "-field")]: true,
+    ["".concat(prefix, "-slot")]: true
   }, className);
   const labelColCls = classNames({
-    [`${prefix}-col-${labelAlign}`]: true
+    ["".concat(prefix, "-col-").concat(labelAlign)]: true
   });
 
   switch (true) {
@@ -118,8 +118,8 @@ const FormSlot = props => {
     width: labelWidth
   }, label);
   let mainCls = classNames({
-    [`${prefix}-field-main`]: true,
-    [`${prefix}-slot-main`]: true
+    ["".concat(prefix, "-field-main")]: true,
+    ["".concat(prefix, "-slot-main")]: true
   });
 
   switch (true) {

package/lib/es/grid/col.js

@@ -39,7 +39,7 @@ class Col extends React.Component {
           others = __rest(props, ["prefixCls", "span", "order", "offset", "push", "pull", "className", "children"]);
 
     let sizeClassObj = {};
-    const prefix = `${prefixCls}-col`;
+    const prefix = "".concat(prefixCls, "-col");
     ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
       let sizeProps = {};
 
@@ -51,19 +51,19 @@ class Col extends React.Component {
 
       delete others[size];
       sizeClassObj = Object.assign(Object.assign({}, sizeClassObj), {
-        [`${prefix}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-        [`${prefix}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-        [`${prefix}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
-        [`${prefix}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
-        [`${prefix}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0
+        ["".concat(prefix, "-").concat(size, "-").concat(sizeProps.span)]: sizeProps.span !== undefined,
+        ["".concat(prefix, "-").concat(size, "-order-").concat(sizeProps.order)]: sizeProps.order || sizeProps.order === 0,
+        ["".concat(prefix, "-").concat(size, "-offset-").concat(sizeProps.offset)]: sizeProps.offset || sizeProps.offset === 0,
+        ["".concat(prefix, "-").concat(size, "-push-").concat(sizeProps.push)]: sizeProps.push || sizeProps.push === 0,
+        ["".concat(prefix, "-").concat(size, "-pull-").concat(sizeProps.pull)]: sizeProps.pull || sizeProps.pull === 0
       });
     });
     const classes = classnames(prefix, {
-      [`${prefix}-${span}`]: span !== undefined,
-      [`${prefix}-order-${order}`]: order,
-      [`${prefix}-offset-${offset}`]: offset,
-      [`${prefix}-push-${push}`]: push,
-      [`${prefix}-pull-${pull}`]: pull
+      ["".concat(prefix, "-").concat(span)]: span !== undefined,
+      ["".concat(prefix, "-order-").concat(order)]: order,
+      ["".concat(prefix, "-offset-").concat(offset)]: offset,
+      ["".concat(prefix, "-push-").concat(push)]: push,
+      ["".concat(prefix, "-pull-").concat(pull)]: pull
     }, className, sizeClassObj);
     let {
       style

package/lib/es/grid/row.js

@@ -114,12 +114,12 @@ class Row extends React.Component {
           others = __rest(_a, ["prefixCls", "type", "justify", "align", "className", "style", "children"]);
 
     const gutters = this.getGutter();
-    const prefix = `${prefixCls}-row`;
+    const prefix = "".concat(prefixCls, "-row");
     const classes = classnames({
       [prefix]: type !== 'flex',
-      [`${prefix}-${type}`]: type,
-      [`${prefix}-${type}-${justify}`]: type && justify,
-      [`${prefix}-${type}-${align}`]: type && align
+      ["".concat(prefix, "-").concat(type)]: type,
+      ["".concat(prefix, "-").concat(type, "-").concat(justify)]: type && justify,
+      ["".concat(prefix, "-").concat(type, "-").concat(align)]: type && align
     }, className);
     const rowStyle = Object.assign(Object.assign(Object.assign({}, gutters[0] > 0 ? {
       marginLeft: gutters[0] / -2,

package/lib/es/highlight/index.js

@@ -18,7 +18,7 @@ class Highlight extends PureComponent {
       autoEscape
     } = this.props;
     const tagCls = cls({
-      [`${prefixCls}-tag`]: true
+      ["".concat(prefixCls, "-tag")]: true
     }, highlightClassName);
     const option = {
       highlightTag: component,

package/lib/es/iconButton/index.js

@@ -65,8 +65,8 @@ class IconButton extends PureComponent {
     }
 
     const btnTextCls = classNames({
-      [`${prefixCls}-content-left`]: iconPosition === 'right',
-      [`${prefixCls}-content-right`]: iconPosition === 'left'
+      ["".concat(prefixCls, "-content-left")]: iconPosition === 'right',
+      ["".concat(prefixCls, "-content-right")]: iconPosition === 'left'
     });
     const xSemiProp = this.props['x-semi-children-alias'] || 'children';
     const children = originChildren != null ? /*#__PURE__*/React.createElement("span", {
@@ -80,9 +80,9 @@ class IconButton extends PureComponent {
       finalChildren = /*#__PURE__*/React.createElement(React.Fragment, null, children, IconElem);
     }
 
-    const iconBtnCls = classNames(className, `${prefixCls}-with-icon`, {
-      [`${prefixCls}-with-icon-only`]: children == null || children === '',
-      [`${prefixCls}-loading`]: loading
+    const iconBtnCls = classNames(className, "".concat(prefixCls, "-with-icon"), {
+      ["".concat(prefixCls, "-with-icon-only")]: children == null || children === '',
+      ["".concat(prefixCls, "-loading")]: loading
     });
     return /*#__PURE__*/React.createElement(Button, Object.assign({}, otherProps, {
       className: iconBtnCls,

package/lib/es/image/image.js

@@ -64,7 +64,7 @@ export default class Image extends BaseComponent {
     };
 
     this.renderDefaultError = () => {
-      const prefixClsName = `${prefixCls}-status`;
+      const prefixClsName = "".concat(prefixCls, "-status");
       return /*#__PURE__*/React.createElement("div", {
         className: prefixClsName
       }, /*#__PURE__*/React.createElement(IconUploadError, {
@@ -73,7 +73,7 @@ export default class Image extends BaseComponent {
     };
 
     this.renderLoad = () => {
-      const prefixClsName = `${prefixCls}-status`;
+      const prefixClsName = "".concat(prefixCls, "-status");
       const {
         placeholder
       } = this.props;
@@ -86,7 +86,7 @@ export default class Image extends BaseComponent {
       const {
         fallback
       } = this.props;
-      const prefixClsName = `${prefixCls}-status`;
+      const prefixClsName = "".concat(prefixCls, "-status");
       const fallbackNode = typeof fallback === "string" ? /*#__PURE__*/React.createElement("img", {
         style: {
           width: "100%",
@@ -105,7 +105,7 @@ export default class Image extends BaseComponent {
         loadStatus
       } = this.state;
       return /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-overlay`
+        className: "".concat(prefixCls, "-overlay")
       }, loadStatus === "error" && this.renderError(), loadStatus === "loading" && this.renderLoad());
     };
 
@@ -114,13 +114,13 @@ export default class Image extends BaseComponent {
     }, locale => locale[key]);
 
     this.renderMask = () => /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-mask`
+      className: "".concat(prefixCls, "-mask")
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-mask-info`
+      className: "".concat(prefixCls, "-mask-info")
     }, /*#__PURE__*/React.createElement(IconEyeOpened, {
       size: "extra-large"
     }), /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-mask-info-text`
+      className: "".concat(prefixCls, "-mask-info-text")
     }, this.getLocalTextByKey("preview"))));
 
     this.state = {
@@ -216,9 +216,9 @@ export default class Image extends BaseComponent {
         src: this.isInGroup() && this.isLazyLoad() ? undefined : src,
         "data-src": src,
         alt: alt,
-        className: cls(`${prefixCls}-img`, {
-          [`${prefixCls}-img-preview`]: showPreviewCursor,
-          [`${prefixCls}-img-error`]: loadStatus === "error"
+        className: cls("".concat(prefixCls, "-img"), {
+          ["".concat(prefixCls, "-img-preview")]: showPreviewCursor,
+          ["".concat(prefixCls, "-img-error")]: loadStatus === "error"
         }),
         width: width,
         height: height,

package/lib/es/image/preview.js

@@ -103,7 +103,7 @@ export default class Preview extends BaseComponent {
     const {
       lazyLoadMargin
     } = this.props;
-    const allElement = document.querySelectorAll(`.${prefixCls}-img`); // use IntersectionObserver to lazy load image
+    const allElement = document.querySelectorAll(".".concat(prefixCls, "-img")); // use IntersectionObserver to lazy load image
 
     const observer = new IntersectionObserver(entries => {
       entries.forEach(item => {
@@ -117,7 +117,7 @@ export default class Preview extends BaseComponent {
         }
       });
     }, {
-      root: document.querySelector(`#${this.previewGroupId}`),
+      root: document.querySelector("#".concat(this.previewGroupId)),
       rootMargin: lazyLoadMargin
     });
     allElement.forEach(item => observer.observe(item));
@@ -171,7 +171,7 @@ export default class Preview extends BaseComponent {
     }, /*#__PURE__*/React.createElement("div", {
       id: this.previewGroupId,
       style: style,
-      className: `${prefixCls}-preview-group`
+      className: "".concat(prefixCls, "-preview-group")
     }, newChildren), /*#__PURE__*/React.createElement(PreviewInner, Object.assign({}, restProps, {
       ref: this.previewRef,
       src: finalSrcList,

package/lib/es/image/previewFooter.js

@@ -11,7 +11,7 @@ import cls from "classnames";
 import PreviewFooterFoundation from '@douyinfe/semi-foundation/lib/es/image/previewFooterFoundation';
 import LocaleConsumer from "../locale/localeConsumer";
 const prefixCls = cssClasses.PREFIX;
-const footerPrefixCls = `${cssClasses.PREFIX}-preview-footer`;
+const footerPrefixCls = "".concat(cssClasses.PREFIX, "-preview-footer");
 let mouseActiveTime = 0;
 export default class Footer extends BaseComponent {
   constructor(props) {
@@ -110,7 +110,7 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconChevronLeft, {
         size: "large",
-        className: disabledPrev ? `${footerPrefixCls}-disabled` : "",
+        className: disabledPrev ? "".concat(footerPrefixCls, "-disabled") : "",
         onClick: !disabledPrev ? onPrev : undefined
       });
       const content = prevTip !== null && prevTip !== void 0 ? prevTip : this.getLocalTextByKey("prevTip");
@@ -125,7 +125,7 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const icon = /*#__PURE__*/React.createElement(IconChevronRight, {
         size: "large",
-        className: disabledNext ? `${footerPrefixCls}-disabled` : "",
+        className: disabledNext ? "".concat(footerPrefixCls, "-disabled") : "",
         onClick: !disabledNext ? onNext : undefined
       });
       const content = nextTip !== null && nextTip !== void 0 ? nextTip : this.getLocalTextByKey("nextTip");
@@ -142,7 +142,7 @@ export default class Footer extends BaseComponent {
       const icon = /*#__PURE__*/React.createElement(IconMinus, {
         size: "large",
         onClick: !disabledZoomOut ? this.handleMinusClick : undefined,
-        className: disabledZoomOut ? `${footerPrefixCls}-disabled` : ""
+        className: disabledZoomOut ? "".concat(footerPrefixCls, "-disabled") : ""
       });
       const content = zoomOutTip !== null && zoomOutTip !== void 0 ? zoomOutTip : this.getLocalTextByKey("zoomOutTip");
       return this.getFinalIconElement(icon, content);
@@ -158,7 +158,7 @@ export default class Footer extends BaseComponent {
       const icon = /*#__PURE__*/React.createElement(IconPlus, {
         size: "large",
         onClick: !disabledZoomIn ? this.handlePlusClick : undefined,
-        className: disabledZoomIn ? `${footerPrefixCls}-disabled` : ""
+        className: disabledZoomIn ? "".concat(footerPrefixCls, "-disabled") : ""
       });
       const content = zoomInTip !== null && zoomInTip !== void 0 ? zoomInTip : this.getLocalTextByKey("zoomInTip");
       return this.getFinalIconElement(icon, content);
@@ -172,7 +172,7 @@ export default class Footer extends BaseComponent {
       } = this.props;
       const props = {
         size: "large",
-        className: cls(`${footerPrefixCls}-gap`),
+        className: cls("".concat(footerPrefixCls, "-gap")),
         onClick: this.handleRatioClick
       };
       const icon = ratio === "adaptation" ? /*#__PURE__*/React.createElement(IconRealSizeStroked, Object.assign({}, props)) : /*#__PURE__*/React.createElement(IconWindowAdaptionStroked, Object.assign({}, props));
@@ -208,8 +208,8 @@ export default class Footer extends BaseComponent {
       const icon = /*#__PURE__*/React.createElement(IconDownload, {
         size: "large",
         onClick: !disableDownload ? onDownload : undefined,
-        className: cls(`${footerPrefixCls}-gap`, {
-          [`${footerPrefixCls}-disabled`]: disableDownload
+        className: cls("".concat(footerPrefixCls, "-gap"), {
+          ["".concat(footerPrefixCls, "-disabled")]: disableDownload
         })
       });
       const content = downloadTip !== null && downloadTip !== void 0 ? downloadTip : this.getLocalTextByKey("downloadTip");
@@ -242,14 +242,14 @@ export default class Footer extends BaseComponent {
 
     if (renderPreviewMenu) {
       return /*#__PURE__*/React.createElement("div", {
-        className: `${footerPrefixCls}-wrapper`
+        className: "".concat(footerPrefixCls, "-wrapper")
       }, this.customRenderViewMenu());
     }
 
     return /*#__PURE__*/React.createElement("section", {
-      className: cls(footerPrefixCls, `${footerPrefixCls}-wrapper`, className)
+      className: cls(footerPrefixCls, "".concat(footerPrefixCls, "-wrapper"), className)
     }, this.getIconChevronLeft(), /*#__PURE__*/React.createElement("div", {
-      className: `${footerPrefixCls}-page`
+      className: "".concat(footerPrefixCls, "-page")
     }, /*#__PURE__*/React.createElement("span", null, curPage), /*#__PURE__*/React.createElement("span", null, "/"), /*#__PURE__*/React.createElement("span", null, totalNum)), this.getIconChevronRight(), /*#__PURE__*/React.createElement(Divider, {
       layout: "vertical"
     }), this.getIconMinus(), /*#__PURE__*/React.createElement(Slider, {
@@ -257,7 +257,7 @@ export default class Footer extends BaseComponent {
       min: min,
       max: max,
       step: step,
-      tipFormatter: v => `${v}%`,
+      tipFormatter: v => "".concat(v, "%"),
       tooltipVisible: showTooltip ? undefined : false,
       onChange: this.handleSlideChange
     }), this.getIconPlus(), this.getIconRatio(), /*#__PURE__*/React.createElement(Divider, {

package/lib/es/image/previewHeader.js

@@ -3,7 +3,7 @@ import { IconClose } from "@douyinfe/semi-icons";
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/image/constants';
 import cls from "classnames";
 import { PreviewContext } from "./previewContext";
-const prefixCls = `${cssClasses.PREFIX}-preview-header`;
+const prefixCls = "".concat(cssClasses.PREFIX, "-preview-header");
 
 const Header = _ref => {
   let {
@@ -26,10 +26,10 @@ const Header = _ref => {
     return /*#__PURE__*/React.createElement("section", {
       className: cls(prefixCls, className)
     }, /*#__PURE__*/React.createElement("section", {
-      className: `${prefixCls}-title`,
+      className: "".concat(prefixCls, "-title"),
       style: titleStyle
     }, renderHeader ? renderHeader(title) : title), /*#__PURE__*/React.createElement("section", {
-      className: `${prefixCls}-close`,
+      className: "".concat(prefixCls, "-close"),
       onMouseUp: onClose
     }, /*#__PURE__*/React.createElement(IconClose, null)));
   });

package/lib/es/image/previewImage.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import Spin from "../spin";
 import PreviewImageFoundation from '@douyinfe/semi-foundation/lib/es/image/previewImageFoundation';
 const prefixCls = cssClasses.PREFIX;
-const preViewImgPrefixCls = `${prefixCls}-preview-image`;
+const preViewImgPrefixCls = "".concat(prefixCls, "-preview-image");
 let originImageWidth = null;
 let originImageHeight = null;
 let startMouseMove = false; // startMouseOffset：The offset of the mouse relative to the left and top of the picture
@@ -185,20 +185,20 @@ export default class PreviewImage extends BaseComponent {
     const imgStyle = {
       position: "absolute",
       visibility: loading ? "hidden" : "visible",
-      transform: `rotate(${-rotation}deg)`,
+      transform: "rotate(".concat(-rotation, "deg)"),
       top,
       left,
-      width: loading ? "auto" : `${width}px`,
-      height: loading ? "auto" : `${height}px`
+      width: loading ? "auto" : "".concat(width, "px"),
+      height: loading ? "auto" : "".concat(height, "px")
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: `${preViewImgPrefixCls}`,
+      className: "".concat(preViewImgPrefixCls),
       ref: this.containerRef
     }, /*#__PURE__*/React.createElement("img", {
       ref: this.registryImageRef,
       src: src,
       alt: "previewImag",
-      className: `${preViewImgPrefixCls}-img`,
+      className: "".concat(preViewImgPrefixCls, "-img"),
       key: src,
       onMouseMove: this.handleMoveImage,
       onMouseDown: this.onImageMouseDown,
@@ -211,7 +211,7 @@ export default class PreviewImage extends BaseComponent {
       crossOrigin: crossOrigin
     }), loading && /*#__PURE__*/React.createElement(Spin, {
       size: "large",
-      wrapperClassName: `${preViewImgPrefixCls}-spin`
+      wrapperClassName: "".concat(preViewImgPrefixCls, "-spin")
     }));
   }
 

package/lib/es/image/previewInner.js

@@ -116,7 +116,7 @@ export default class PreviewInner extends BaseComponent {
 
         if (!getPopupContainer && this.bodyOverflow !== 'hidden') {
           document.body.style.overflow = 'hidden';
-          document.body.style.width = `calc(${this.originBodyWidth || '100%'} - ${this.scrollBarWidth}px)`;
+          document.body.style.width = "calc(".concat(this.originBodyWidth || '100%', " - ").concat(this.scrollBarWidth, "px)");
         }
       },
       enabledBodyScroll: () => {
@@ -328,12 +328,12 @@ export default class PreviewInner extends BaseComponent {
       };
     }
 
-    const previewPrefixCls = `${prefixCls}-preview`;
+    const previewPrefixCls = "".concat(prefixCls, "-preview");
     const previewWrapperCls = cls(previewPrefixCls, {
-      [`${prefixCls}-hide`]: !visible,
-      [`${previewPrefixCls}-popup`]: getPopupContainer
+      ["".concat(prefixCls, "-hide")]: !visible,
+      ["".concat(previewPrefixCls, "-popup")]: getPopupContainer
     }, className);
-    const hideViewerCls = !viewerVisible ? `${previewPrefixCls}-hide` : "";
+    const hideViewerCls = !viewerVisible ? "".concat(previewPrefixCls, "-hide") : "";
     const total = imgSrc.length;
     const showPrev = total !== 1 && (infinite || currentIndex !== 0);
     const showNext = total !== 1 && (infinite || currentIndex !== total - 1);
@@ -371,7 +371,7 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-prev`, hideViewerCls),
+      className: cls("".concat(previewPrefixCls, "-icon"), "".concat(previewPrefixCls, "-prev"), hideViewerCls),
       onClick: () => this.handleSwitchImage("prev")
     }, /*#__PURE__*/React.createElement(IconArrowLeft, {
       size: "large"
@@ -379,7 +379,7 @@ export default class PreviewInner extends BaseComponent {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React.createElement("div", {
-      className: cls(`${previewPrefixCls}-icon`, `${previewPrefixCls}-next`, hideViewerCls),
+      className: cls("".concat(previewPrefixCls, "-icon"), "".concat(previewPrefixCls, "-next"), hideViewerCls),
       onClick: () => this.handleSwitchImage("next")
     }, /*#__PURE__*/React.createElement(IconArrowRight, {
       size: "large"

package/lib/es/input/index.js

@@ -168,9 +168,9 @@ class Input extends BaseComponent {
 
     if (addonBefore) {
       const prefixWrapperCls = cls({
-        [`${prefixCls}-prepend`]: true,
-        [`${prefixCls}-prepend-text`]: addonBefore && _isString(addonBefore),
-        [`${prefixCls}-prepend-icon`]: isSemiIcon(addonBefore)
+        ["".concat(prefixCls, "-prepend")]: true,
+        ["".concat(prefixCls, "-prepend-text")]: addonBefore && _isString(addonBefore),
+        ["".concat(prefixCls, "-prepend-icon")]: isSemiIcon(addonBefore)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -188,9 +188,9 @@ class Input extends BaseComponent {
 
     if (addonAfter) {
       const prefixWrapperCls = cls({
-        [`${prefixCls}-append`]: true,
-        [`${prefixCls}-append-text`]: addonAfter && _isString(addonAfter),
-        [`${prefixCls}-append-icon`]: isSemiIcon(addonAfter)
+        ["".concat(prefixCls, "-append")]: true,
+        ["".concat(prefixCls, "-append-text")]: addonAfter && _isString(addonAfter),
+        ["".concat(prefixCls, "-append-icon")]: isSemiIcon(addonAfter)
       });
       return /*#__PURE__*/React.createElement("div", {
         className: prefixWrapperCls,
@@ -202,7 +202,7 @@ class Input extends BaseComponent {
   }
 
   renderClearBtn() {
-    const clearCls = cls(`${prefixCls}-clearbtn`);
+    const clearCls = cls("".concat(prefixCls, "-clearbtn"));
     const {
       clearIcon
     } = this.props;
@@ -230,7 +230,7 @@ class Input extends BaseComponent {
       mode,
       disabled
     } = this.props;
-    const modeCls = cls(`${prefixCls}-modebtn`);
+    const modeCls = cls("".concat(prefixCls, "-modebtn"));
     const modeIcon = eyeClosed ? /*#__PURE__*/React.createElement(IconEyeClosedSolid, null) : /*#__PURE__*/React.createElement(IconEyeOpened, null); // alway show password button for a11y
 
     const showModeBtn = mode === 'password' && !disabled;
@@ -265,10 +265,10 @@ class Input extends BaseComponent {
     }
 
     const prefixWrapperCls = cls({
-      [`${prefixCls}-prefix`]: true,
-      [`${prefixCls}-inset-label`]: insetLabel,
-      [`${prefixCls}-prefix-text`]: labelNode && _isString(labelNode),
-      [`${prefixCls}-prefix-icon`]: isSemiIcon(labelNode)
+      ["".concat(prefixCls, "-prefix")]: true,
+      ["".concat(prefixCls, "-inset-label")]: insetLabel,
+      ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
+      ["".concat(prefixCls, "-prefix-icon")]: isSemiIcon(labelNode)
     });
     return (
       /*#__PURE__*/
@@ -307,10 +307,10 @@ class Input extends BaseComponent {
     }
 
     const suffixWrapperCls = cls({
-      [`${prefixCls}-suffix`]: true,
-      [`${prefixCls}-suffix-text`]: suffix && _isString(suffix),
-      [`${prefixCls}-suffix-icon`]: isSemiIcon(suffix),
-      [`${prefixCls}-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix)
+      ["".concat(prefixCls, "-suffix")]: true,
+      ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
+      ["".concat(prefixCls, "-suffix-icon")]: isSemiIcon(suffix),
+      ["".concat(prefixCls, "-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix)
     });
     return (
       /*#__PURE__*/
@@ -387,31 +387,31 @@ class Input extends BaseComponent {
     const suffixAllowClear = this.showClearBtn();
     const suffixIsIcon = isSemiIcon(suffix);
     const ref = this.getInputRef();
-    const wrapperPrefix = `${prefixCls}-wrapper`;
+    const wrapperPrefix = "".concat(prefixCls, "-wrapper");
     const wrapperCls = cls(wrapperPrefix, className, {
-      [`${prefixCls}-wrapper__with-prefix`]: prefix || insetLabel,
-      [`${prefixCls}-wrapper__with-suffix`]: suffix,
-      [`${prefixCls}-wrapper__with-suffix-hidden`]: suffixAllowClear && Boolean(hideSuffix),
-      [`${prefixCls}-wrapper__with-suffix-icon`]: suffixIsIcon,
-      [`${prefixCls}-wrapper__with-append`]: addonBefore,
-      [`${prefixCls}-wrapper__with-prepend`]: addonAfter,
-      [`${prefixCls}-wrapper__with-append-only`]: addonBefore && !addonAfter,
-      [`${prefixCls}-wrapper__with-prepend-only`]: !addonBefore && addonAfter,
-      [`${wrapperPrefix}-readonly`]: readonly,
-      [`${wrapperPrefix}-disabled`]: disabled,
-      [`${wrapperPrefix}-warning`]: validateStatus === 'warning',
-      [`${wrapperPrefix}-error`]: validateStatus === 'error',
-      [`${wrapperPrefix}-focus`]: isFocus,
-      [`${wrapperPrefix}-clearable`]: showClear,
-      [`${wrapperPrefix}-modebtn`]: mode === 'password',
-      [`${wrapperPrefix}-hidden`]: type === 'hidden',
-      [`${wrapperPrefix}-${size}`]: size
+      ["".concat(prefixCls, "-wrapper__with-prefix")]: prefix || insetLabel,
+      ["".concat(prefixCls, "-wrapper__with-suffix")]: suffix,
+      ["".concat(prefixCls, "-wrapper__with-suffix-hidden")]: suffixAllowClear && Boolean(hideSuffix),
+      ["".concat(prefixCls, "-wrapper__with-suffix-icon")]: suffixIsIcon,
+      ["".concat(prefixCls, "-wrapper__with-append")]: addonBefore,
+      ["".concat(prefixCls, "-wrapper__with-prepend")]: addonAfter,
+      ["".concat(prefixCls, "-wrapper__with-append-only")]: addonBefore && !addonAfter,
+      ["".concat(prefixCls, "-wrapper__with-prepend-only")]: !addonBefore && addonAfter,
+      ["".concat(wrapperPrefix, "-readonly")]: readonly,
+      ["".concat(wrapperPrefix, "-disabled")]: disabled,
+      ["".concat(wrapperPrefix, "-warning")]: validateStatus === 'warning',
+      ["".concat(wrapperPrefix, "-error")]: validateStatus === 'error',
+      ["".concat(wrapperPrefix, "-focus")]: isFocus,
+      ["".concat(wrapperPrefix, "-clearable")]: showClear,
+      ["".concat(wrapperPrefix, "-modebtn")]: mode === 'password',
+      ["".concat(wrapperPrefix, "-hidden")]: type === 'hidden',
+      ["".concat(wrapperPrefix, "-").concat(size)]: size
     });
     const inputCls = cls(prefixCls, {
-      [`${prefixCls}-${size}`]: size,
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-sibling-clearbtn`]: this.foundation.isAllowClear(),
-      [`${prefixCls}-sibling-modebtn`]: mode === 'password'
+      ["".concat(prefixCls, "-").concat(size)]: size,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-sibling-clearbtn")]: this.foundation.isAllowClear(),
+      ["".concat(prefixCls, "-sibling-modebtn")]: mode === 'password'
     });
     const inputValue = value === null || value === undefined ? '' : value;
     const inputProps = Object.assign(Object.assign({}, rest), {

package/lib/es/input/inputGroup.js

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