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

package/lib/cjs/tagInput/index.js

@@ -54,7 +54,7 @@ const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
     items
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${prefixCls}-sortable-list`
+    className: "".concat(prefixCls, "-sortable-list")
   }, items.map((item, index) =>
   /*#__PURE__*/
   // @ts-ignore skip SortableItem type check
@@ -132,22 +132,22 @@ class TagInput extends _baseComponent.default {
         active
       } = this.state;
       const showIconHandler = active && draggable;
-      const tagCls = (0, _classnames.default)(`${prefixCls}-wrapper-tag`, {
-        [`${prefixCls}-wrapper-tag-size-${size}`]: size,
-        [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
+      const tagCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
+        ["".concat(prefixCls, "-wrapper-tag-size-").concat(size)]: size,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
       });
-      const typoCls = (0, _classnames.default)(`${prefixCls}-wrapper-typo`, {
-        [`${prefixCls}-wrapper-typo-disabled`]: disabled
+      const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
+        ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
       });
       const itemWrapperCls = (0, _classnames.default)({
-        [`${prefixCls}-drag-item`]: showIconHandler,
-        [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
+        ["".concat(prefixCls, "-drag-item")]: showIconHandler,
+        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
       });
       const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
-        className: `${prefixCls}-drag-handler`
+        className: "".concat(prefixCls, "-drag-handler")
       }));
       return tagsArray.map((value, index) => {
-        const elementKey = showIconHandler ? value : `${index}${value}`;
+        const elementKey = showIconHandler ? value : "".concat(index).concat(value);
 
         const onClose = () => {
           !disabled && this.handleTagClose(index);
@@ -168,9 +168,9 @@ class TagInput extends _baseComponent.default {
             closable: !disabled,
             key: elementKey,
             visible: true,
-            "aria-label": `${!disabled ? 'Closable ' : ''}Tag: ${value}`
+            "aria-label": "".concat(!disabled ? 'Closable ' : '', "Tag: ").concat(value)
           }, /*#__PURE__*/_react.default.createElement("div", {
-            className: `${prefixCls}-tag-content-wrapper`
+            className: "".concat(prefixCls, "-tag-content-wrapper")
           }, showIconHandler && /*#__PURE__*/_react.default.createElement(DragHandle, null), /*#__PURE__*/_react.default.createElement(_paragraph.default, {
             className: typoCls,
             ellipsis: {
@@ -354,8 +354,8 @@ class TagInput extends _baseComponent.default {
       disabled,
       clearIcon
     } = this.props;
-    const clearCls = (0, _classnames.default)(`${prefixCls}-clearBtn`, {
-      [`${prefixCls}-clearBtn-invisible`]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
+    const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearBtn"), {
+      ["".concat(prefixCls, "-clearBtn-invisible")]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
     });
 
     if (showClear) {
@@ -384,11 +384,11 @@ class TagInput extends _baseComponent.default {
       return null;
     }
 
-    const prefixWrapperCls = (0, _classnames.default)(`${prefixCls}-prefix`, {
-      [`${prefixCls}-inset-label`]: insetLabel,
-      [`${prefixCls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
+    const prefixWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-prefix"), {
+      ["".concat(prefixCls, "-inset-label")]: insetLabel,
+      ["".concat(prefixCls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
       // eslint-disable-next-line max-len
-      [`${prefixCls}-prefix-icon`]: (0, _utils.isSemiIcon)(labelNode)
+      ["".concat(prefixCls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
     });
     return (
       /*#__PURE__*/
@@ -412,10 +412,10 @@ class TagInput extends _baseComponent.default {
       return null;
     }
 
-    const suffixWrapperCls = (0, _classnames.default)(`${prefixCls}-suffix`, {
-      [`${prefixCls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
+    const suffixWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-suffix"), {
+      ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
       // eslint-disable-next-line max-len
-      [`${prefixCls}-suffix-icon`]: (0, _utils.isSemiIcon)(suffix)
+      ["".concat(prefixCls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
     });
     return (
       /*#__PURE__*/
@@ -442,8 +442,8 @@ class TagInput extends _baseComponent.default {
       tagsArray,
       active
     } = this.state;
-    const restTagsCls = (0, _classnames.default)(`${prefixCls}-wrapper-n`, {
-      [`${prefixCls}-wrapper-n-disabled`]: disabled
+    const restTagsCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
+      ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
     const allTags = this.getAllTags();
     let restTags = [];
@@ -468,7 +468,7 @@ class TagInput extends _baseComponent.default {
       // @ts-ignore skip SortableItem type check
       return /*#__PURE__*/_react.default.createElement(SortableList, {
         useDragHandle: true,
-        helperClass: `${prefixCls}-drag-item-move`,
+        helperClass: "".concat(prefixCls, "-drag-item-move"),
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"
@@ -522,16 +522,16 @@ class TagInput extends _baseComponent.default {
       active
     } = this.state;
     const tagInputCls = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-focus`]: focusing || active,
-      [`${prefixCls}-disabled`]: disabled,
-      [`${prefixCls}-hover`]: hovering && !disabled,
-      [`${prefixCls}-error`]: validateStatus === 'error',
-      [`${prefixCls}-warning`]: validateStatus === 'warning',
-      [`${prefixCls}-small`]: size === 'small',
-      [`${prefixCls}-large`]: size === 'large'
+      ["".concat(prefixCls, "-focus")]: focusing || active,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-hover")]: hovering && !disabled,
+      ["".concat(prefixCls, "-error")]: validateStatus === 'error',
+      ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
+      ["".concat(prefixCls, "-small")]: size === 'small',
+      ["".concat(prefixCls, "-large")]: size === 'large'
     });
-    const inputCls = (0, _classnames.default)(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
-    const wrapperCls = (0, _classnames.default)(`${prefixCls}-wrapper`);
+    const inputCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-input"), "".concat(prefixCls, "-wrapper-input-").concat(size));
+    const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"));
     return (
       /*#__PURE__*/
       // eslint-disable-next-line

package/lib/cjs/timePicker/Combobox.js

@@ -162,7 +162,7 @@ class Combobox extends _baseComponent.default {
 
     const transformHour = value => value + locale.hour;
 
-    const className = `${prefixCls}-list-hour`;
+    const className = "".concat(prefixCls, "-list-hour");
     return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
       ref: current => this.cacheRefCurrent('hour', current),
       mode: 'normal',
@@ -193,7 +193,7 @@ class Combobox extends _baseComponent.default {
 
     const value = new Date(timeStampValue);
     const disabledOptions = disabledMinutes && disabledMinutes(value.getHours());
-    const className = `${prefixCls}-list-minute`;
+    const className = "".concat(prefixCls, "-list-minute");
 
     const transformMinute = min => min + locale.minute;
 
@@ -227,7 +227,7 @@ class Combobox extends _baseComponent.default {
 
     const value = new Date(timeStampValue);
     const disabledOptions = disabledSeconds && disabledSeconds(value.getHours(), value.getMinutes());
-    const className = `${prefixCls}-list-second`;
+    const className = "".concat(prefixCls, "-list-second");
 
     const transformSecond = sec => String(sec) + locale.second;
 
@@ -263,7 +263,7 @@ class Combobox extends _baseComponent.default {
       text: locale.PM || '下午'
     }];
     const selected = isAM ? 0 : 1;
-    const className = `${prefixCls}-list-ampm`;
+    const className = "".concat(prefixCls, "-list-ampm");
     return /*#__PURE__*/_react.default.createElement(_scrollItem.default, Object.assign({
       ref: current => this.cacheRefCurrent('ampm', current),
       mode: 'normal',

package/lib/cjs/timePicker/TimeInput.js

@@ -142,9 +142,9 @@ class TimeInput extends _baseComponent.default {
           rest = __rest(_a, ["prefixCls", "placeholder", "inputReadOnly", "onFocus", "disabled", "type", "locale", "localeCode", "insetLabel", "validateStatus", "value", "onChange", "invalid", "format", "clearText", "disabledHours", "disabledMinutes", "disabledSeconds", "onEsc", "defaultOpenValue", "currentSelectPanel", "focusOnOpen", "timeStampValue", "timeZone", "defaultOpen", "dateFnsLocale"]); // const { focusing } = this.state;
 
 
-    const inputCls = (0, _classnames.default)(`${prefixCls}-input`, {
-      [`${prefixCls}-input-invalid`]: invalid,
-      [`${prefixCls}-input-readonly`]: inputReadOnly
+    const inputCls = (0, _classnames.default)("".concat(prefixCls, "-input"), {
+      ["".concat(prefixCls, "-input-invalid")]: invalid,
+      ["".concat(prefixCls, "-input-readonly")]: inputReadOnly
     });
     const mergeValidateStatus = invalid ? 'error' : validateStatus;
     return /*#__PURE__*/_react.default.createElement(_input.default, Object.assign({}, rest, {
@@ -171,7 +171,7 @@ class TimeInput extends _baseComponent.default {
       prefixCls
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-input-wrap`
+      className: "".concat(prefixCls, "-input-wrap")
     }, this.getInput());
   }
 

package/lib/cjs/timePicker/TimePicker.js

@@ -223,7 +223,7 @@ class TimePicker extends _baseComponent.default {
       format: format,
       isAM: isAM[0],
       timeStampValue: value[0],
-      prefixCls: `${prefixCls}-panel`,
+      prefixCls: "".concat(prefixCls, "-panel"),
       onChange: v => this.handlePanelChange(v, 0),
       onCurrentSelectPanelChange: this.onCurrentSelectPanelChange
     }, this.createPanelProps(0)))];
@@ -234,7 +234,7 @@ class TimePicker extends _baseComponent.default {
         format: format,
         isAM: isAM[1],
         timeStampValue: value[1],
-        prefixCls: `${prefixCls}-panel`,
+        prefixCls: "".concat(prefixCls, "-panel"),
         onChange: v => this.handlePanelChange(v, 1),
         onCurrentSelectPanelChange: this.onCurrentSelectPanelChange
       }, this.createPanelProps(1))));
@@ -278,10 +278,10 @@ class TimePicker extends _baseComponent.default {
       selectColumnCount += 1;
     }
 
-    return (0, _classnames.default)(`${prefixCls}-panel`, popupClassName, {
-      [`${prefixCls}-panel-narrow`]: (!showHour || !showMinute || !showSecond) && !use12Hours,
+    return (0, _classnames.default)("".concat(prefixCls, "-panel"), popupClassName, {
+      ["".concat(prefixCls, "-panel-narrow")]: (!showHour || !showMinute || !showSecond) && !use12Hours,
       [_constants.cssClasses.RANGE_PICKER]: this.adapter.isRangePicker()
-    }, `${prefixCls}-panel-column-${selectColumnCount}`);
+    }, "".concat(prefixCls, "-panel-column-").concat(selectColumnCount));
   }
 
   focus() {// TODO this.picker is undefined, confirm keep this func or not
@@ -341,11 +341,11 @@ class TimePicker extends _baseComponent.default {
     } = this.state;
     const popupClassName = this.getPopupClassName();
     const headerPrefix = (0, _classnames.default)({
-      [`${prefixCls}-header`]: true
+      ["".concat(prefixCls, "-header")]: true
     });
     const panelPrefix = (0, _classnames.default)({
-      [`${prefixCls}-panel`]: true,
-      [`${prefixCls}-panel-${size}`]: size
+      ["".concat(prefixCls, "-panel")]: true,
+      ["".concat(prefixCls, "-panel-").concat(size)]: size
     });
     const inputProps = Object.assign(Object.assign({}, rest), {
       disabled,

package/lib/cjs/timeline/index.js

@@ -38,26 +38,26 @@ class Timeline extends _react.PureComponent {
 
       if (mode === 'alternate') {
         if (ele.props.position) {
-          return `${prefixCls}-item-${ele.props.position}`;
+          return "".concat(prefixCls, "-item-").concat(ele.props.position);
         }
 
-        return idx % 2 === 0 ? `${prefixCls}-item-left` : `${prefixCls}-item-right`;
+        return idx % 2 === 0 ? "".concat(prefixCls, "-item-left") : "".concat(prefixCls, "-item-right");
       }
 
       if (mode === 'center') {
         if (ele.props.position) {
-          return `${prefixCls}-item-${ele.props.position}`;
+          return "".concat(prefixCls, "-item-").concat(ele.props.position);
         }
 
-        return `${prefixCls}-item-left`;
+        return "".concat(prefixCls, "-item-left");
       }
 
       if (mode === 'left' || mode === 'right') {
-        return `${prefixCls}-item-${mode}`;
+        return "".concat(prefixCls, "-item-").concat(mode);
       }
 
       if (ele.props.position) {
-        return `${prefixCls}-item-${ele.props.position}`;
+        return "".concat(prefixCls, "-item-").concat(ele.props.position);
       }
 
       return '';
@@ -84,13 +84,13 @@ class Timeline extends _react.PureComponent {
       dataSource
     } = this.props;
     const classString = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-${mode}`]: mode
+      ["".concat(prefixCls, "-").concat(mode)]: mode
     });
     let childrenList;
 
     if (dataSource && dataSource.length) {
       const items = dataSource.map((item, index) => /*#__PURE__*/_react.default.createElement(_item.default, Object.assign({
-        key: `timeline-item-${index}`
+        key: "timeline-item-".concat(index)
       }, item), item.content));
       childrenList = this.addClassName(items);
     }

package/lib/cjs/timeline/item.js

@@ -40,9 +40,9 @@ class Item extends _react.PureComponent {
     } = this.props;
     const itemCls = (0, _classnames.default)(prefixCls, className);
     const dotCls = (0, _classnames.default)({
-      [`${prefixCls}-head`]: true,
-      [`${prefixCls}-head-custom`]: dot,
-      [`${prefixCls}-head-${type}`]: type
+      ["".concat(prefixCls, "-head")]: true,
+      ["".concat(prefixCls, "-head-custom")]: dot,
+      ["".concat(prefixCls, "-head-").concat(type)]: type
     });
     const dotStyle = color ? {
       style: {
@@ -54,17 +54,17 @@ class Item extends _react.PureComponent {
       style: style,
       onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-tail`,
+      className: "".concat(prefixCls, "-tail"),
       "aria-hidden": true
     }), /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: dotCls,
       "aria-hidden": true
     }, dotStyle), dot), /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, children, extra && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content-extra`
+      className: "".concat(prefixCls, "-content-extra")
     }, extra), time && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content-time`
+      className: "".concat(prefixCls, "-content-time")
     }, time)));
   }
 

package/lib/cjs/toast/index.js

@@ -76,7 +76,7 @@ const createBaseToast = () => {
         ['top', 'left', 'bottom', 'right'].map(pos => {
           if (pos in ToastList.defaultOpts || pos in opts) {
             const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
-            div.style[pos] = typeof val === 'number' ? `${val}px` : val;
+            div.style[pos] = typeof val === 'number' ? "".concat(val, "px") : val;
           }
         }); // document.body.appendChild(div);
 
@@ -95,10 +95,10 @@ const createBaseToast = () => {
           }));
         });
       } else {
-        const node = document.querySelector(`#${this.wrapperId}`);
+        const node = document.querySelector("#".concat(this.wrapperId));
         ['top', 'left', 'bottom', 'right'].map(pos => {
           if (pos in opts) {
-            node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
+            node.style[pos] = typeof opts[pos] === 'number' ? "".concat(opts[pos], "px") : opts[pos];
           }
         });
 
@@ -125,7 +125,7 @@ const createBaseToast = () => {
     static destroyAll() {
       if (ToastList.ref) {
         ToastList.ref.destroyAll();
-        const wrapper = document.querySelector(`#${this.wrapperId}`);
+        const wrapper = document.querySelector("#".concat(this.wrapperId));
 
         _reactDom.default.unmountComponentAtNode(wrapper);
 
@@ -260,7 +260,7 @@ const createBaseToast = () => {
           key: item.id,
           motion: item.motion,
           animationState: isRemoved ? "leave" : "enter",
-          startClassName: isRemoved ? `${_constants.cssClasses.PREFIX}-animation-hide` : `${_constants.cssClasses.PREFIX}-animation-show`
+          startClassName: isRemoved ? "".concat(_constants.cssClasses.PREFIX, "-animation-hide") : "".concat(_constants.cssClasses.PREFIX, "-animation-show")
         }, _ref2 => {
           let {
             animationClassName,

package/lib/cjs/toast/toast.js

@@ -88,12 +88,12 @@ class Toast extends _baseComponent.default {
     };
     const iconType = iconMap[type];
     const iconSize = 'large';
-    const iconCls = (0, _classnames.default)(`${prefixCls}-icon`, `${prefixCls}-icon-${type}`);
+    const iconCls = (0, _classnames.default)("".concat(prefixCls, "-icon"), "".concat(prefixCls, "-icon-").concat(type));
 
     if (icon) {
       return (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
         size: iconSize,
-        className: `${prefixCls}-icon`
+        className: "".concat(prefixCls, "-icon")
       }) : icon;
     }
 
@@ -119,9 +119,9 @@ class Toast extends _baseComponent.default {
     } = this.props;
     const direction = this.props.direction || this.context.direction;
     const toastCls = (0, _classnames.default)(prefixCls, className, {
-      [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-${theme}`]: theme === 'light',
-      [`${prefixCls}-rtl`]: direction === 'rtl'
+      ["".concat(prefixCls, "-").concat(type)]: true,
+      ["".concat(prefixCls, "-").concat(theme)]: theme === 'light',
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
     const textStyle = {};
     textStyle.maxWidth = textMaxWidth;
@@ -129,7 +129,7 @@ class Toast extends _baseComponent.default {
     const btnSize = 'small';
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "alert",
-      "aria-label": `${type ? type : 'default'} type`,
+      "aria-label": "".concat(type ? type : 'default', " type"),
       className: toastCls,
       style: style,
       onMouseEnter: this.clearCloseTimer,
@@ -137,13 +137,13 @@ class Toast extends _baseComponent.default {
       onAnimationStart: this.props.onAnimationStart,
       onAnimationEnd: this.props.onAnimationEnd
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-content`
+      className: "".concat(prefixCls, "-content")
     }, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
-      className: `${prefixCls}-content-text`,
+      className: "".concat(prefixCls, "-content-text"),
       style: textStyle,
       "x-semi-prop": "content"
     }, content), showClose && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixCls}-close-button`
+      className: "".concat(prefixCls, "-close-button")
     }, /*#__PURE__*/_react.default.createElement(_index.default, {
       onClick: e => this.close(e),
       type: "tertiary",

package/lib/cjs/tooltip/index.d.ts

@@ -86,7 +86,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         motion: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

package/lib/cjs/tooltip/index.js

@@ -139,7 +139,7 @@ class Tooltip extends _baseComponent.default {
         style
       } = this.props;
       let icon = null;
-      const triangleCls = (0, _classnames.default)([`${prefixCls}-icon-arrow`]);
+      const triangleCls = (0, _classnames.default)(["".concat(prefixCls, "-icon-arrow")]);
       const bgColor = (0, _get2.default)(style, 'backgroundColor');
       const iconComponent = placement.includes('left') || placement.includes('right') ? /*#__PURE__*/_react.default.createElement(_TriangleArrowVertical.default, null) : /*#__PURE__*/_react.default.createElement(_TriangleArrow.default, null);
 
@@ -212,10 +212,10 @@ class Tooltip extends _baseComponent.default {
       } = this.props;
       const direction = this.context.direction;
       const className = (0, _classnames.default)(propClassName, {
-        [`${prefixCls}-wrapper`]: true,
-        [`${prefixCls}-wrapper-show`]: visible,
-        [`${prefixCls}-with-arrow`]: Boolean(showArrow),
-        [`${prefixCls}-rtl`]: direction === 'rtl'
+        ["".concat(prefixCls, "-wrapper")]: true,
+        ["".concat(prefixCls, "-wrapper-show")]: visible,
+        ["".concat(prefixCls, "-with-arrow")]: Boolean(showArrow),
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
       });
       const icon = this.renderIcon();
       const portalInnerStyle = (0, _omit2.default)(containerStyle, motion ? ['transformOrigin'] : undefined);
@@ -227,7 +227,7 @@ class Tooltip extends _baseComponent.default {
         fillMode: "forwards",
         animationState: transitionState,
         motion: motion && isPositionUpdated,
-        startClassName: transitionState === 'enter' ? `${prefix}-animation-show` : `${prefix}-animation-hide`,
+        startClassName: transitionState === 'enter' ? "".concat(prefix, "-animation-show") : "".concat(prefix, "-animation-hide"),
         onAnimationEnd: () => {
           var _a, _b;
 
@@ -262,7 +262,7 @@ class Tooltip extends _baseComponent.default {
           zIndex
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: `${_constants.BASE_CLASS_PREFIX}-portal-inner`,
+        className: "".concat(_constants.BASE_CLASS_PREFIX, "-portal-inner"),
         style: portalInnerStyle,
         ref: this.setContainerEl,
         onClick: this.handlePortalInnerClick,