@douyinfe/semi-ui 2.27.0 → 2.27.1-alpha.1

package/lib/cjs/transfer/index.js

@@ -57,7 +57,7 @@ const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
     items
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-right-list"),
+    className: `${prefixCls}-right-list`,
     role: "list",
     "aria-label": "Selected list"
   }, items.map((item, index) =>
@@ -209,7 +209,7 @@ class Transfer extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       role: "search",
       "aria-label": "Transfer filter",
-      className: "".concat(prefixCls, "-filter")
+      className: `${prefixCls}-filter`
     }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
       prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
       placeholder: locale.placeholder,
@@ -232,20 +232,20 @@ class Transfer extends _baseComponent.default {
       showButton
     } = headerConfig;
     const headerCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-header")]: true,
-      ["".concat(prefixCls, "-right-header")]: type === 'right',
-      ["".concat(prefixCls, "-left-header")]: type === 'left'
+      [`${prefixCls}-header`]: true,
+      [`${prefixCls}-right-header`]: type === 'right',
+      [`${prefixCls}-left-header`]: type === 'left'
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: headerCls
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-header-total")
+      className: `${prefixCls}-header-total`
     }, totalContent), showButton ? /*#__PURE__*/_react.default.createElement(_button.default, {
       theme: "borderless",
       disabled: disabled,
       type: "tertiary",
       size: "small",
-      className: "".concat(prefixCls, "-header-all"),
+      className: `${prefixCls}-header-all`,
       onClick: onAllClick
     }, allContent) : null);
   }
@@ -268,8 +268,8 @@ class Transfer extends _baseComponent.default {
     }
 
     const leftItemCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-item")]: true,
-      ["".concat(prefixCls, "-item-disabled")]: item.disabled
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-disabled`]: item.disabled
     });
     return /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
       key: index,
@@ -278,7 +278,7 @@ class Transfer extends _baseComponent.default {
       checked: checked,
       role: "listitem",
       onChange: () => this.onSelectOrRemove(item),
-      "x-semi-children-alias": "dataSource[".concat(index, "].label")
+      "x-semi-children-alias": `dataSource[${index}].label`
     }, item.label);
   }
 
@@ -305,7 +305,7 @@ class Transfer extends _baseComponent.default {
     // The selected option is 2,3,4, then it is false
 
     const leftContainesNotInSelected = Boolean(filterData.find(f => !selectedItems.has(f.key)));
-    const totalText = totalToken.replace('${total}', "".concat(showNumber));
+    const totalText = totalToken.replace('${total}', `${showNumber}`);
     const headerConfig = {
       totalContent: totalText,
       allContent: leftContainesNotInSelected ? locale.selectAll : locale.clearSelectAll,
@@ -376,15 +376,15 @@ class Transfer extends _baseComponent.default {
     }
 
     return /*#__PURE__*/_react.default.createElement("section", {
-      className: "".concat(prefixCls, "-left")
+      className: `${prefixCls}-left`
     }, inputCom, content);
   }
 
   renderGroupTitle(group, index) {
-    const groupCls = (0, _classnames.default)("".concat(prefixCls, "-group-title"));
+    const groupCls = (0, _classnames.default)(`${prefixCls}-group-title`);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: groupCls,
-      key: "title-".concat(index)
+      key: `title-${index}`
     }, group.title);
   }
 
@@ -448,7 +448,7 @@ class Transfer extends _baseComponent.default {
       }
     });
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-left-list"),
+      className: `${prefixCls}-left-list`,
       role: "list",
       "aria-label": "Option list"
     }, content);
@@ -465,9 +465,9 @@ class Transfer extends _baseComponent.default {
     const onRemove = () => this.foundation.handleSelectOrRemove(item);
 
     const rightItemCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-item")]: true,
-      ["".concat(prefixCls, "-right-item")]: true,
-      ["".concat(prefixCls, "-right-item-draggable")]: draggable
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-right-item`]: true,
+      [`${prefixCls}-right-item-draggable`]: draggable
     });
     const shouldShowPath = type === _constants.strings.TYPE_TREE_TO_LIST && showPath === true;
     const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
@@ -482,7 +482,7 @@ class Transfer extends _baseComponent.default {
     const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
       role: "button",
       "aria-label": "Drag and sort",
-      className: "".concat(prefixCls, "-right-item-drag-handler")
+      className: `${prefixCls}-right-item-drag-handler`
     }));
     return (
       /*#__PURE__*/
@@ -492,12 +492,12 @@ class Transfer extends _baseComponent.default {
         className: rightItemCls,
         key: item.key
       }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-right-item-text")
+        className: `${prefixCls}-right-item-text`
       }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
         onClick: onRemove,
         "aria-disabled": item.disabled,
-        className: (0, _classnames.default)("".concat(prefixCls, "-item-close-icon"), {
-          ["".concat(prefixCls, "-item-close-icon-disabled")]: item.disabled
+        className: (0, _classnames.default)(`${prefixCls}-item-close-icon`, {
+          [`${prefixCls}-item-close-icon-disabled`]: item.disabled
         })
       }))
     );
@@ -505,9 +505,9 @@ class Transfer extends _baseComponent.default {
 
   renderEmpty(type, emptyText) {
     const emptyCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-empty")]: true,
-      ["".concat(prefixCls, "-right-empty")]: type === 'right',
-      ["".concat(prefixCls, "-left-empty")]: type === 'left'
+      [`${prefixCls}-empty`]: true,
+      [`${prefixCls}-right-empty`]: type === 'right',
+      [`${prefixCls}-left-empty`]: type === 'left'
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       "aria-label": "empty",
@@ -523,7 +523,7 @@ class Transfer extends _baseComponent.default {
 
     const sortList = /*#__PURE__*/_react.default.createElement(SortableList, {
       useDragHandle: true,
-      helperClass: "".concat(prefixCls, "-right-item-drag-item-move"),
+      helperClass: `${prefixCls}-right-item-drag-item-move`,
       onSortEnd: this.onSortEnd,
       items: sortableListItems
     });
@@ -555,7 +555,7 @@ class Transfer extends _baseComponent.default {
     }
 
     const selectedToken = locale.selected;
-    const selectedText = selectedToken.replace('${total}', "".concat(selectedData.length));
+    const selectedText = selectedToken.replace('${total}', `${selectedData.length}`);
     const headerConfig = {
       totalContent: selectedText,
       allContent: locale.clear,
@@ -565,7 +565,7 @@ class Transfer extends _baseComponent.default {
     };
     const headerCom = this.renderHeader(headerConfig);
     const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
-    const panelCls = "".concat(prefixCls, "-right");
+    const panelCls = `${prefixCls}-right`;
     let content = null;
 
     switch (true) {
@@ -576,7 +576,7 @@ class Transfer extends _baseComponent.default {
 
       case selectedData.length && !draggable:
         const list = /*#__PURE__*/_react.default.createElement("div", {
-          className: "".concat(prefixCls, "-right-list"),
+          className: `${prefixCls}-right-list`,
           role: "list",
           "aria-label": "Selected list"
         }, selectedData.map(item => this.renderRightItem(Object.assign({}, item))));
@@ -606,8 +606,8 @@ class Transfer extends _baseComponent.default {
       renderSourcePanel
     } = this.props;
     const transferCls = (0, _classnames.default)(prefixCls, className, {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-custom-panel")]: renderSelectedPanel && renderSourcePanel
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-custom-panel`]: renderSelectedPanel && renderSourcePanel
     });
     return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Transfer"

package/lib/cjs/tree/autoSizer.js

@@ -86,7 +86,7 @@ class AutoSizer extends _react.PureComponent {
         height: defaultHeight,
         overflow: 'visible'
       },
-      className: "".concat(prefixcls, "-auto-wrapper")
+      className: `${prefixcls}-auto-wrapper`
     }, !bailoutOnChildren && children({
       height,
       width: defaultWidth

package/lib/cjs/tree/index.js

@@ -560,7 +560,7 @@ class Tree extends _baseComponent.default {
       searchPlaceholder,
       showClear
     } = this.props;
-    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"));
+    const inputcls = (0, _classnames.default)(`${prefixcls}-input`);
     const {
       inputValue
     } = this.state;
@@ -572,7 +572,7 @@ class Tree extends _baseComponent.default {
       showClear,
       placeholder: searchPlaceholder
     };
-    const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-search-wrapper"), searchClassName);
+    const wrapperCls = (0, _classnames.default)(`${prefixcls}-search-wrapper`, searchClassName);
     return /*#__PURE__*/_react.default.createElement("div", {
       className: wrapperCls,
       style: searchStyle
@@ -651,7 +651,7 @@ class Tree extends _baseComponent.default {
         width: width,
         itemKey: this.itemKey,
         itemData: flattenNodes,
-        className: "".concat(prefixcls, "-virtual-list"),
+        className: `${prefixcls}-virtual-list`,
         style: {
           direction
         }
@@ -691,9 +691,9 @@ class Tree extends _baseComponent.default {
       virtualize,
       checkRelation
     } = this.props;
-    const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-wrapper"), className);
-    const listCls = (0, _classnames.default)("".concat(prefixcls, "-option-list"), {
-      ["".concat(prefixcls, "-option-list-block")]: blockNode
+    const wrapperCls = (0, _classnames.default)(`${prefixcls}-wrapper`, className);
+    const listCls = (0, _classnames.default)(`${prefixcls}-option-list`, {
+      [`${prefixcls}-option-list-block`]: blockNode
     });
     const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
     const noData = (0, _isEmpty2.default)(keyEntities) || showFilteredOnly && searchNoRes;

package/lib/cjs/tree/nodeList.js

@@ -111,7 +111,7 @@ class NodeList extends _react.PureComponent {
           open: motionType === 'hide',
           duration: 200,
           motion: Boolean(motionType),
-          key: "motion-".concat(nodeKey),
+          key: `motion-${nodeKey}`,
           onMotionEnd: this.onMotionEnd
         }, treeNode.map(node => renderTreeNode(node)));
       }

package/lib/cjs/tree/treeNode.js

@@ -277,7 +277,7 @@ class TreeNode extends _react.PureComponent {
           searchWords: [keyword],
           option: {
             highlightTag: 'span',
-            highlightClassName: "".concat(prefixcls, "-highlight")
+            highlightClassName: `${prefixcls}-highlight`
           }
         });
       } else {
@@ -305,22 +305,22 @@ class TreeNode extends _react.PureComponent {
 
     if (loading) {
       return /*#__PURE__*/_react.default.createElement(_spin.default, {
-        wrapperClassName: "".concat(prefixcls, "-spin-icon")
+        wrapperClassName: `${prefixcls}-spin-icon`
       });
     }
 
     if (showIcon) {
       return /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleDown, {
         role: 'button',
-        "aria-label": "".concat(expanded ? 'Expand' : 'Collapse', " the tree item"),
-        className: "".concat(prefixcls, "-expand-icon"),
+        "aria-label": `${expanded ? 'Expand' : 'Collapse'} the tree item`,
+        className: `${prefixcls}-expand-icon`,
         size: "small",
         onClick: this.onExpand
       });
     }
 
     return /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixcls, "-empty-icon")
+      className: `${prefixcls}-empty-icon`
     });
   }
 
@@ -363,14 +363,14 @@ class TreeNode extends _react.PureComponent {
       } else {
         if (!hasChild) {
           itemIcon = /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
-            className: "".concat(prefixcls, "-item-icon")
+            className: `${prefixcls}-item-icon`
           });
         } else {
           // eslint-disable-next-line max-len
           itemIcon = expanded ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolderOpen, {
-            className: "".concat(prefixcls, "-item-icon")
+            className: `${prefixcls}-item-icon`
           }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFolder, {
-            className: "".concat(prefixcls, "-item-icon")
+            className: `${prefixcls}-item-icon`
           });
         }
       }
@@ -384,12 +384,12 @@ class TreeNode extends _react.PureComponent {
       emptyContent
     } = this.props;
     const wrapperCls = (0, _classnames.default)(prefixcls, {
-      ["".concat(prefixcls, "-empty")]: true
+      [`${prefixcls}-empty`]: true
     });
     return /*#__PURE__*/_react.default.createElement("ul", {
       className: wrapperCls
     }, /*#__PURE__*/_react.default.createElement("li", {
-      className: "".concat(prefixcls, "-label ").concat(prefixcls, "-label-empty"),
+      className: `${prefixcls}-label ${prefixcls}-label-empty`,
       "x-semi-prop": "emptyContent"
     }, emptyContent));
   } // eslint-disable-next-line max-lines-per-function
@@ -432,20 +432,20 @@ class TreeNode extends _react.PureComponent {
     const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
     const dragOverGapBottom = dragOverNodeKey === eventKey && dropPosition === 1;
     const nodeCls = (0, _classnames.default)(prefixcls, {
-      ["".concat(prefixcls, "-level-").concat(level + 1)]: true,
-      ["".concat(prefixcls, "-collapsed")]: !expanded,
-      ["".concat(prefixcls, "-disabled")]: Boolean(disabled),
-      ["".concat(prefixcls, "-selected")]: selected,
-      ["".concat(prefixcls, "-active")]: !multiple && active,
-      ["".concat(prefixcls, "-ellipsis")]: labelEllipsis,
-      ["".concat(prefixcls, "-filtered")]: filtered && treeNodeFilterProp !== 'label',
-      ["".concat(prefixcls, "-drag-over")]: !disabled && dragOver,
-      ["".concat(prefixcls, "-draggable")]: !disabled && draggable && !renderFullLabel,
+      [`${prefixcls}-level-${level + 1}`]: true,
+      [`${prefixcls}-collapsed`]: !expanded,
+      [`${prefixcls}-disabled`]: Boolean(disabled),
+      [`${prefixcls}-selected`]: selected,
+      [`${prefixcls}-active`]: !multiple && active,
+      [`${prefixcls}-ellipsis`]: labelEllipsis,
+      [`${prefixcls}-filtered`]: filtered && treeNodeFilterProp !== 'label',
+      [`${prefixcls}-drag-over`]: !disabled && dragOver,
+      [`${prefixcls}-draggable`]: !disabled && draggable && !renderFullLabel,
       // When draggable + renderFullLabel is enabled, the default style
-      ["".concat(prefixcls, "-fullLabel-draggable")]: !disabled && draggable && renderFullLabel,
+      [`${prefixcls}-fullLabel-draggable`]: !disabled && draggable && renderFullLabel,
       // When draggable + renderFullLabel is turned on, the style of dragover
-      ["".concat(prefixcls, "-fullLabel-drag-over-gap-top")]: !disabled && dragOverGapTop && renderFullLabel,
-      ["".concat(prefixcls, "-fullLabel-drag-over-gap-bottom")]: !disabled && dragOverGapBottom && renderFullLabel
+      [`${prefixcls}-fullLabel-drag-over-gap-top`]: !disabled && dragOverGapTop && renderFullLabel,
+      [`${prefixcls}-fullLabel-drag-over-gap-bottom`]: !disabled && dragOverGapBottom && renderFullLabel
     });
     const labelProps = {
       onClick: this.onClick,
@@ -499,9 +499,9 @@ class TreeNode extends _react.PureComponent {
       }
     }
 
-    const labelCls = (0, _classnames.default)("".concat(prefixcls, "-label"), {
-      ["".concat(prefixcls, "-drag-over-gap-top")]: !disabled && dragOverGapTop,
-      ["".concat(prefixcls, "-drag-over-gap-bottom")]: !disabled && dragOverGapBottom
+    const labelCls = (0, _classnames.default)(`${prefixcls}-label`, {
+      [`${prefixcls}-drag-over-gap-top`]: !disabled && dragOverGapTop,
+      [`${prefixcls}-drag-over-gap-bottom`]: !disabled && dragOverGapBottom
     });
     const setsize = (0, _get2.default)(rest, ['data', 'children', 'length']);
     const posinset = (0, _isString2.default)(rest.pos) ? Number(rest.pos.split('-')[level + 1]) + 1 : 1;
@@ -525,7 +525,7 @@ class TreeNode extends _react.PureComponent {
     }, dragProps), this.renderArrow(), /*#__PURE__*/_react.default.createElement("span", {
       className: labelCls
     }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixcls, "-label-text")
+      className: `${prefixcls}-label-text`
     }, this.renderRealLabel())));
   }
 

package/lib/cjs/treeSelect/index.js

@@ -96,9 +96,9 @@ class TreeSelect extends _baseComponent.default {
         suffix
       } = this.props;
       const suffixWrapperCls = (0, _classnames.default)({
-        ["".concat(prefixcls, "-suffix")]: true,
-        ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
-        ["".concat(prefixcls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
+        [`${prefixcls}-suffix`]: true,
+        [`${prefixcls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
+        [`${prefixcls}-suffix-icon`]: (0, _utils.isSemiIcon)(suffix)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: suffixWrapperCls,
@@ -114,11 +114,11 @@ class TreeSelect extends _baseComponent.default {
       } = this.props;
       const labelNode = prefix || insetLabel;
       const prefixWrapperCls = (0, _classnames.default)({
-        ["".concat(prefixcls, "-prefix")]: true,
+        [`${prefixcls}-prefix`]: true,
         // to be doublechecked
-        ["".concat(prefixcls, "-inset-label")]: insetLabel,
-        ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
-        ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
+        [`${prefixcls}-inset-label`]: insetLabel,
+        [`${prefixcls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
+        [`${prefixcls}-prefix-icon`]: (0, _utils.isSemiIcon)(labelNode)
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         className: prefixWrapperCls,
@@ -138,7 +138,7 @@ class TreeSelect extends _baseComponent.default {
       const style = Object.assign({
         minWidth: dropdownMinWidth
       }, dropdownStyle);
-      const popoverCls = (0, _classnames.default)(dropdownClassName, "".concat(prefixcls, "-popover"));
+      const popoverCls = (0, _classnames.default)(dropdownClassName, `${prefixcls}-popover`);
       return /*#__PURE__*/_react.default.createElement("div", {
         className: popoverCls,
         style: style
@@ -263,7 +263,7 @@ class TreeSelect extends _baseComponent.default {
           color: 'white',
           visible: true,
           onClose,
-          key: "tag-".concat(key, "-").concat(index),
+          key: `tag-${key}-${index}`,
           size: size === 'small' ? 'small' : 'large'
         };
 
@@ -290,9 +290,9 @@ class TreeSelect extends _baseComponent.default {
         inputTriggerFocus
       } = this.state;
       const renderText = this.foundation.getRenderTextInSingle();
-      const spanCls = (0, _classnames.default)("".concat(prefixcls, "-selection-TriggerSearchItem"), {
-        ["".concat(prefixcls, "-selection-TriggerSearchItem-placeholder")]: (inputTriggerFocus || !renderText) && !disabled,
-        ["".concat(prefixcls, "-selection-TriggerSearchItem-disabled")]: disabled
+      const spanCls = (0, _classnames.default)(`${prefixcls}-selection-TriggerSearchItem`, {
+        [`${prefixcls}-selection-TriggerSearchItem-placeholder`]: (inputTriggerFocus || !renderText) && !disabled,
+        [`${prefixcls}-selection-TriggerSearchItem-disabled`]: disabled
       });
       return /*#__PURE__*/_react.default.createElement("span", {
         className: spanCls
@@ -330,7 +330,7 @@ class TreeSelect extends _baseComponent.default {
       if (!multiple || !this.hasValue()) {
         const renderText = this.foundation.getRenderTextInSingle();
         const spanCls = (0, _classnames.default)({
-          ["".concat(prefixcls, "-selection-placeholder")]: !renderText
+          [`${prefixcls}-selection-placeholder`]: !renderText
         });
         return /*#__PURE__*/_react.default.createElement("span", {
           className: spanCls
@@ -397,7 +397,7 @@ class TreeSelect extends _baseComponent.default {
       }
 
       return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)("".concat(prefixcls, "-arrow")),
+        className: (0, _classnames.default)(`${prefixcls}-arrow`),
         "x-semi-prop": "arrowIcon"
       }, arrowIcon) : null;
     };
@@ -407,7 +407,7 @@ class TreeSelect extends _baseComponent.default {
       const {
         clearIcon
       } = this.props;
-      const clearCls = (0, _classnames.default)("".concat(prefixcls, "-clearbtn"));
+      const clearCls = (0, _classnames.default)(`${prefixcls}-clearbtn`);
 
       if (showClearBtn) {
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -459,20 +459,20 @@ class TreeSelect extends _baseComponent.default {
       const isEmptyTriggerSearch = isTriggerPositionSearch && (0, _isEmpty2.default)(checkedKeys);
       const isValueTriggerSearch = isTriggerPositionSearch && !(0, _isEmpty2.default)(checkedKeys);
       const classNames = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, {
-        ["".concat(prefixcls, "-focus")]: isOpen && !isInput,
-        ["".concat(prefixcls, "-disabled")]: disabled,
-        ["".concat(prefixcls, "-single")]: !multiple,
-        ["".concat(prefixcls, "-multiple")]: multiple,
-        ["".concat(prefixcls, "-multiple-tagInput-empty")]: multiple && isEmptyTriggerSearch,
-        ["".concat(prefixcls, "-multiple-tagInput-notEmpty")]: multiple && isValueTriggerSearch,
-        ["".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,
-        ["".concat(prefixcls, "-with-suffix")]: suffix
+        [`${prefixcls}-focus`]: isOpen && !isInput,
+        [`${prefixcls}-disabled`]: disabled,
+        [`${prefixcls}-single`]: !multiple,
+        [`${prefixcls}-multiple`]: multiple,
+        [`${prefixcls}-multiple-tagInput-empty`]: multiple && isEmptyTriggerSearch,
+        [`${prefixcls}-multiple-tagInput-notEmpty`]: multiple && isValueTriggerSearch,
+        [`${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,
+        [`${prefixcls}-with-suffix`]: suffix
       }, className);
       const triggerRenderKeys = multiple ? (0, _treeUtil.normalizeKeyList)([...checkedKeys], keyEntities, leafOnly, true) : selectedKeys;
       const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
@@ -490,7 +490,7 @@ class TreeSelect extends _baseComponent.default {
       }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'selection'
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-selection")
+        className: `${prefixcls}-selection`
       }, this.renderSelectContent())), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
         key: 'suffix'
       }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
@@ -541,8 +541,8 @@ class TreeSelect extends _baseComponent.default {
       const keyList = (0, _treeUtil.normalizeKeyList)([key], keyEntities, leafOnly, true);
       const nodes = keyList.map(i => keyEntities[key] && keyEntities[key].data.key === key ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
       const value = (0, _treeUtil.getValueOrKey)(nodes);
-      const tagCls = (0, _classnames.default)("".concat(prefixcls, "-selection-tag"), {
-        ["".concat(prefixcls, "-selection-tag-disabled")]: disabled
+      const tagCls = (0, _classnames.default)(`${prefixcls}-selection-tag`, {
+        [`${prefixcls}-selection-tag-disabled`]: disabled
       });
       const nodeHaveData = !(0, _isEmpty2.default)(nodes) && !(0, _isEmpty2.default)(nodes[0]);
       const isDisableStrictlyNode = disableStrictly && nodeHaveData && disabledKeys.has(nodes[0].key);
@@ -556,7 +556,7 @@ class TreeSelect extends _baseComponent.default {
 
       const tagProps = {
         size: size === 'small' ? 'small' : 'large',
-        key: "tag-".concat(value, "-").concat(idx),
+        key: `tag-${value}-${idx}`,
         color: 'white',
         className: tagCls,
         closable,
@@ -655,8 +655,8 @@ class TreeSelect extends _baseComponent.default {
       } = this.props;
       const isDropdownPositionSearch = searchPosition === _constants.strings.SEARCH_POSITION_DROPDOWN;
       const inputcls = (0, _classnames.default)({
-        ["".concat(prefixTree, "-input")]: isDropdownPositionSearch,
-        ["".concat(prefixcls, "-inputTrigger")]: !isDropdownPositionSearch
+        [`${prefixTree}-input`]: isDropdownPositionSearch,
+        [`${prefixcls}-inputTrigger`]: !isDropdownPositionSearch
       });
       const {
         inputValue
@@ -678,8 +678,8 @@ class TreeSelect extends _baseComponent.default {
       };
       const realInputProps = isDropdownPositionSearch ? inputDropdownProps : inputTriggerProps;
       const wrapperCls = (0, _classnames.default)({
-        ["".concat(prefixTree, "-search-wrapper")]: isDropdownPositionSearch,
-        ["".concat(prefixcls, "-triggerSingleSearch-wrapper")]: !isDropdownPositionSearch && !multiple
+        [`${prefixTree}-search-wrapper`]: isDropdownPositionSearch,
+        [`${prefixcls}-triggerSingleSearch-wrapper`]: !isDropdownPositionSearch && !multiple
       });
       const useCusSearch = typeof searchRender === 'function' || typeof searchRender === 'boolean';
 
@@ -872,7 +872,7 @@ class TreeSelect extends _baseComponent.default {
           // @ts-ignore avoid strict check of itemKey
           itemKey: this.itemKey,
           itemData: flattenNodes,
-          className: "".concat(prefixTree, "-virtual-list"),
+          className: `${prefixTree}-virtual-list`,
           style: {
             direction
           }
@@ -909,9 +909,9 @@ class TreeSelect extends _baseComponent.default {
         renderFullLabel,
         checkRelation
       } = this.props;
-      const wrapperCls = (0, _classnames.default)("".concat(prefixTree, "-wrapper"));
-      const listCls = (0, _classnames.default)("".concat(prefixTree, "-option-list"), {
-        ["".concat(prefixTree, "-option-list-block")]: true
+      const wrapperCls = (0, _classnames.default)(`${prefixTree}-wrapper`);
+      const listCls = (0, _classnames.default)(`${prefixTree}-option-list`, {
+        [`${prefixTree}-option-list-block`]: true
       });
       const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
       const noData = (0, _isEmpty2.default)(flattenNodes) || showFilteredOnly && searchNoRes;

package/lib/cjs/typography/base.js

@@ -258,7 +258,7 @@ class Base extends _react.Component {
           _react.default.createElement("a", {
             role: "button",
             tabIndex: 0,
-            className: "".concat(prefixCls, "-ellipsis-expand"),
+            className: `${prefixCls}-ellipsis-expand`,
             key: "expand",
             ref: this.expandRef,
             "aria-label": text,
@@ -334,10 +334,10 @@ class Base extends _react.Component {
       } = this.state;
       const useCSS = !expanded && this.canUseCSSEllipsis();
       const ellipsisCls = (0, _classnames.default)({
-        ["".concat(prefixCls, "-ellipsis")]: true,
-        ["".concat(prefixCls, "-ellipsis-single-line")]: rows === 1,
-        ["".concat(prefixCls, "-ellipsis-multiple-line")]: rows > 1,
-        ["".concat(prefixCls, "-ellipsis-overflow-ellipsis")]: rows === 1 && useCSS
+        [`${prefixCls}-ellipsis`]: true,
+        [`${prefixCls}-ellipsis-single-line`]: rows === 1,
+        [`${prefixCls}-ellipsis-multiple-line`]: rows > 1,
+        [`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS
       });
       const ellipsisStyle = useCSS && rows > 1 ? {
         WebkitLineClamp: rows
@@ -548,7 +548,7 @@ class Base extends _react.Component {
 
     const iconSize = size === 'small' ? 'small' : 'default';
     return /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-icon"),
+      className: `${prefixCls}-icon`,
       "x-semi-prop": "icon"
     }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
       size: iconSize
@@ -583,8 +583,8 @@ class Base extends _react.Component {
     } = this.getEllipsisStyle();
     let textNode = ellipsis ? this.renderEllipsisText(ellipsisOpt) : children;
     const linkCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-link-text")]: link,
-      ["".concat(prefixCls, "-link-underline")]: this.props.underline && link
+      [`${prefixCls}-link-text`]: link,
+      [`${prefixCls}-link-underline`]: this.props.underline && link
     });
     textNode = wrapperDecorations(this.props, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconNode, this.props.link ? /*#__PURE__*/_react.default.createElement("span", {
       className: linkCls
@@ -592,12 +592,12 @@ class Base extends _react.Component {
     const hTagReg = /^h[1-6]$/;
     const wrapperCls = (0, _classnames.default)(className, ellipsisCls, {
       // [`${prefixCls}-primary`]: !type || type === 'primary',
-      ["".concat(prefixCls, "-").concat(type)]: type && !link,
-      ["".concat(prefixCls, "-").concat(size)]: size,
-      ["".concat(prefixCls, "-link")]: link,
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-").concat(spacing)]: spacing,
-      ["".concat(prefixCls, "-").concat(heading)]: (0, _isString2.default)(heading) && hTagReg.test(heading)
+      [`${prefixCls}-${type}`]: type && !link,
+      [`${prefixCls}-${size}`]: size,
+      [`${prefixCls}-link`]: link,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-${spacing}`]: spacing,
+      [`${prefixCls}-${heading}`]: (0, _isString2.default)(heading) && hTagReg.test(heading)
     });
     return /*#__PURE__*/_react.default.createElement(_typography.default, Object.assign({
       className: wrapperCls,