@douyinfe/semi-ui 2.25.2 → 2.25.4

package/lib/es/table/Table.js

@@ -248,17 +248,17 @@ class Table extends BaseComponent {
       const {
         prefixCls
       } = this.props;
-      const positionAll = ["".concat(prefixCls, "-scroll-position-both"), "".concat(prefixCls, "-scroll-position-middle"), "".concat(prefixCls, "-scroll-position-left"), "".concat(prefixCls, "-scroll-position-right")];
+      const positionAll = [`${prefixCls}-scroll-position-both`, `${prefixCls}-scroll-position-middle`, `${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
       this.scrollPosition = position;
       const tableNode = this.wrapRef.current;
 
       if (tableNode && tableNode.nodeType) {
         if (position === 'both') {
-          const acceptPosition = ["".concat(prefixCls, "-scroll-position-left"), "".concat(prefixCls, "-scroll-position-right")];
+          const acceptPosition = [`${prefixCls}-scroll-position-left`, `${prefixCls}-scroll-position-right`];
           tableNode.classList.remove(..._difference(positionAll, acceptPosition));
           tableNode.classList.add(...acceptPosition);
         } else {
-          const acceptPosition = ["".concat(prefixCls, "-scroll-position-").concat(position)];
+          const acceptPosition = [`${prefixCls}-scroll-position-${position}`];
           tableNode.classList.remove(..._difference(positionAll, acceptPosition));
           tableNode.classList.add(...acceptPosition);
         }
@@ -319,7 +319,7 @@ class Table extends BaseComponent {
           const hasRowSelected = _this.foundation.hasRowSelected(selectedRowKeys, allRowKeysSet);
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
-            "aria-label": "".concat(allIsSelected ? 'Deselect' : 'Select', " all rows"),
+            "aria-label": `${allIsSelected ? 'Deselect' : 'Select'} all rows`,
             disabled: disabled,
             key: columnKey,
             selected: allIsSelected,
@@ -336,7 +336,7 @@ class Table extends BaseComponent {
           const checkboxPropsFn = () => typeof getCheckboxProps === 'function' ? getCheckboxProps(record) : {};
 
           return /*#__PURE__*/React.createElement(ColumnSelection, {
-            "aria-label": "".concat(selected ? 'Deselect' : 'Select', " this row"),
+            "aria-label": `${selected ? 'Deselect' : 'Select'} this row`,
             getCheckboxProps: checkboxPropsFn,
             selected: selected,
             onChange: (status, e) => _this.toggleSelectRow(status, key, e)
@@ -372,7 +372,7 @@ class Table extends BaseComponent {
           column = Object.assign(Object.assign({}, column), _omit(rowSelection, needOmitSelectionKey));
         }
 
-        column.className = classnames(column.className, "".concat(prefixCls, "-column-selection"));
+        column.className = classnames(column.className, `${prefixCls}-column-selection`);
         column.title = _this.renderTitleSelectionCallback;
         column.render = _this.renderRowSelectionCallback;
       }
@@ -438,7 +438,7 @@ class Table extends BaseComponent {
         fixed: expandCellFixed,
         key: strings.DEFAULT_KEY_COLUMN_EXPAND
       };
-      column.className = classnames(column.className, "".concat(prefixCls, "-column-expand"));
+      column.className = classnames(column.className, `${prefixCls}-column-expand`);
       column.render = expandIcon !== false ? function () {
         let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
         let record = arguments.length > 1 ? arguments[1] : undefined;
@@ -572,7 +572,7 @@ class Table extends BaseComponent {
       }
 
       return /*#__PURE__*/isValidElement(title) || typeof title === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-title"),
+        className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, title) : null;
     };
@@ -584,7 +584,7 @@ class Table extends BaseComponent {
         empty,
         dataSource
       } = props;
-      const wrapCls = "".concat(prefixCls, "-placeholder");
+      const wrapCls = `${prefixCls}-placeholder`;
 
       const isEmpty = _this.foundation.isEmpty(dataSource);
 
@@ -598,7 +598,7 @@ class Table extends BaseComponent {
       }, (locale, localeCode) => /*#__PURE__*/React.createElement("div", {
         className: wrapCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-empty"),
+        className: `${prefixCls}-empty`,
         "x-semi-prop": "empty"
       }, empty || locale.emptyText)));
     };
@@ -618,7 +618,7 @@ class Table extends BaseComponent {
       }
 
       return /*#__PURE__*/isValidElement(footer) || typeof footer === 'string' ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-footer"),
+        className: `${prefixCls}-footer`,
         key: "footer",
         "x-semi-prop": "footer"
       }, footer) : null;
@@ -1430,13 +1430,13 @@ class Table extends BaseComponent {
     }
 
     const wrapCls = classnames({
-      ["".concat(prefixCls, "-").concat(strings.SIZE_SMALL)]: size === strings.SIZE_SMALL,
-      ["".concat(prefixCls, "-").concat(strings.SIZE_MIDDLE)]: size === strings.SIZE_MIDDLE,
-      ["".concat(prefixCls, "-virtualized")]: Boolean(virtualized),
-      ["".concat(prefixCls, "-bordered")]: bordered,
-      ["".concat(prefixCls, "-fixed-header")]: Boolean(y),
-      ["".concat(prefixCls, "-scroll-position-left")]: ['both', 'left'].includes(this.position),
-      ["".concat(prefixCls, "-scroll-position-right")]: ['both', 'right'].includes(this.position)
+      [`${prefixCls}-${strings.SIZE_SMALL}`]: size === strings.SIZE_SMALL,
+      [`${prefixCls}-${strings.SIZE_MIDDLE}`]: size === strings.SIZE_MIDDLE,
+      [`${prefixCls}-virtualized`]: Boolean(virtualized),
+      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-fixed-header`]: Boolean(y),
+      [`${prefixCls}-scroll-position-left`]: ['both', 'left'].includes(this.position),
+      [`${prefixCls}-scroll-position-right`]: ['both', 'right'].includes(this.position)
     }); // pagination
 
     const tablePagination = pagination && propPagination ? this.renderPagination(pagination, propRenderPagination) : null;
@@ -1459,7 +1459,7 @@ class Table extends BaseComponent {
     });
     return /*#__PURE__*/React.createElement("div", {
       ref: this.rootWrapRef,
-      className: classnames(className, "".concat(prefixCls, "-wrapper")),
+      className: classnames(className, `${prefixCls}-wrapper`),
       "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
@@ -1476,7 +1476,7 @@ class Table extends BaseComponent {
       dataSource: props.dataSource,
       prefixCls: props.prefixCls
     }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-container")
+      className: `${prefixCls}-container`
     }, this.renderMainTable(Object.assign({}, props))), /*#__PURE__*/React.createElement(React.Fragment, {
       key: 'pagination-bottom'
     }, ['bottom', 'both'].includes(paginationPosition) ? tablePagination : null)))));

package/lib/es/table/TableCell.js

@@ -191,9 +191,9 @@ export default class TableCell extends BaseComponent {
 
     const indentText = indent && indentSize ? /*#__PURE__*/React.createElement("span", {
       style: {
-        paddingLeft: "".concat(indentSize * indent, "px")
+        paddingLeft: `${indentSize * indent}px`
       },
-      className: "".concat(prefixCls, "-row-indent indent-level-").concat(indent)
+      className: `${prefixCls}-row-indent indent-level-${indent}`
     }) : null; // column.render
 
     const realExpandIcon = typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon;
@@ -265,7 +265,7 @@ export default class TableCell extends BaseComponent {
 
     if (isSection) {
       inner = /*#__PURE__*/React.createElement("div", {
-        className: classnames("".concat(prefixCls, "-section-inner")),
+        className: classnames(`${prefixCls}-section-inner`),
         style: {
           width: anyColumnFixed ? amendTableWidth(tableWidth) : undefined
         }
@@ -316,11 +316,11 @@ export default class TableCell extends BaseComponent {
     }
 
     const inner = this.renderInner(text, indentText, realExpandIcon);
-    const columnCls = classnames(className, "".concat(prefixCls, "-row-cell"), _get(customCellProps, 'className'), {
-      ["".concat(prefixCls, "-cell-fixed-left")]: fixedLeftFlag,
-      ["".concat(prefixCls, "-cell-fixed-left-last")]: lastFixedLeft,
-      ["".concat(prefixCls, "-cell-fixed-right")]: fixedRightFlag,
-      ["".concat(prefixCls, "-cell-fixed-right-first")]: firstFixedRight
+    const columnCls = classnames(className, `${prefixCls}-row-cell`, _get(customCellProps, 'className'), {
+      [`${prefixCls}-cell-fixed-left`]: fixedLeftFlag,
+      [`${prefixCls}-cell-fixed-left-last`]: lastFixedLeft,
+      [`${prefixCls}-cell-fixed-right`]: fixedRightFlag,
+      [`${prefixCls}-cell-fixed-right-first`]: firstFixedRight
     });
     return /*#__PURE__*/React.createElement(BodyCell, Object.assign({
       role: "gridcell",

package/lib/es/table/TableHeader.js

@@ -113,7 +113,7 @@ class TableHeader extends BaseComponent {
     const rows = parseHeaderRows(columns);
     const HeaderWrapper = components.header.wrapper;
     return /*#__PURE__*/React.createElement(HeaderWrapper, {
-      className: "".concat(prefixCls, "-thead"),
+      className: `${prefixCls}-thead`,
       ref: forwardedRef
     }, rows.map((row, idx) => /*#__PURE__*/React.createElement(TableHeaderRow, {
       prefixCls: prefixCls,

package/lib/es/table/TableHeaderRow.js

@@ -38,7 +38,7 @@ export default class TableHeaderRow extends BaseComponent {
           row,
           index
         } = this.props;
-        const cellSelector = ".".concat(prefixCls, "-row-head");
+        const cellSelector = `.${prefixCls}-row-head`;
         const heads = node && node.querySelectorAll && node.querySelectorAll(cellSelector);
         this.context.setHeadWidths(_map(heads, (head, headIndex) => {
           let configWidth = _get(row, [headIndex, 'column', 'width']);
@@ -92,7 +92,7 @@ export default class TableHeaderRow extends BaseComponent {
 
     const rowProps = onHeaderRow(columns, index) || {};
 
-    _set(rowProps, 'className', classnames(_get(rowProps, 'className'), "".concat(prefixCls, "-row")));
+    _set(rowProps, 'className', classnames(_get(rowProps, 'className'), `${prefixCls}-row`));
 
     const cells = _map(row, (cell, cellIndex) => {
       const {
@@ -108,16 +108,16 @@ export default class TableHeaderRow extends BaseComponent {
           textAlign: column.align
         });
         customProps.className = classnames(customProps.className, column.className, {
-          ["".concat(prefixCls, "-align-").concat(column.align)]: Boolean(column.align)
+          [`${prefixCls}-align-${column.align}`]: Boolean(column.align)
         });
       }
 
-      customProps.className = classnames("".concat(prefixCls, "-row-head"), column.className, customProps.className, // `${prefixCls}-fixed-columns`,
+      customProps.className = classnames(`${prefixCls}-row-head`, column.className, customProps.className, // `${prefixCls}-fixed-columns`,
       {
-        ["".concat(prefixCls, "-cell-fixed-left")]: isFixedLeft(column),
-        ["".concat(prefixCls, "-cell-fixed-left-last")]: isLastLeftFixed(slicedColumns, column),
-        ["".concat(prefixCls, "-cell-fixed-right")]: isFixedRight(column),
-        ["".concat(prefixCls, "-cell-fixed-right-first")]: isFirstFixedRight(slicedColumns, column)
+        [`${prefixCls}-cell-fixed-left`]: isFixedLeft(column),
+        [`${prefixCls}-cell-fixed-left-last`]: isLastLeftFixed(slicedColumns, column),
+        [`${prefixCls}-cell-fixed-right`]: isFixedRight(column),
+        [`${prefixCls}-cell-fixed-right-first`]: isFirstFixedRight(slicedColumns, column)
       });
 
       if (headWidths.length && slicedColumns.length) {

package/lib/es/table/TablePagination.js

@@ -19,11 +19,11 @@ export default class TablePagination extends PureComponent {
 
     const customPagination = renderPagination && _isFunction(renderPagination) ? renderPagination(pagination) : null;
     return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-pagination-outer")
+      className: `${prefixCls}-pagination-outer`
     }, /*#__PURE__*/isValidElement(customPagination) ? customPagination : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-pagination-info")
+      className: `${prefixCls}-pagination-info`
     }, info), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-pagination-wrapper")
+      className: `${prefixCls}-pagination-wrapper`
     }, total > 0 ? /*#__PURE__*/React.createElement(Pagination, Object.assign({}, pagination, {
       key: _get(pagination, 'pageSize', 'pagination')
     })) : null)));

package/lib/es/tabs/TabBar.js

@@ -33,7 +33,7 @@ class TabBar extends React.Component {
         const key = this._getItemKey(itemKey); // eslint-disable-next-line max-len
 
 
-        const tabItem = document.querySelector("[data-uuid=\"".concat(this.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+        const tabItem = document.querySelector(`[data-uuid="${this.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
         tabItem.scrollIntoView({
           behavior: 'smooth',
           block: 'nearest',
@@ -56,7 +56,7 @@ class TabBar extends React.Component {
       const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
         "aria-label": "Close",
         role: "button",
-        className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
+        className: `${cssClasses.TABS_TAB}-icon-close`,
         onClick: e => deleteTabItem(panel.itemKey, e)
       }) : null;
       let events = {};
@@ -73,14 +73,14 @@ class TabBar extends React.Component {
       const className = cls(cssClasses.TABS_TAB, {
         [cssClasses.TABS_TAB_ACTIVE]: isSelected,
         [cssClasses.TABS_TAB_DISABLED]: panel.disabled,
-        ["".concat(cssClasses.TABS_TAB, "-small")]: size === 'small',
-        ["".concat(cssClasses.TABS_TAB, "-medium")]: size === 'medium'
+        [`${cssClasses.TABS_TAB}-small`]: size === 'small',
+        [`${cssClasses.TABS_TAB}-medium`]: size === 'medium'
       });
       return /*#__PURE__*/React.createElement("div", Object.assign({
         role: "tab",
-        id: "semiTab".concat(key),
-        "data-tabkey": "semiTab".concat(key),
-        "aria-controls": "semiTabPanel".concat(key),
+        id: `semiTab${key}`,
+        "data-tabkey": `semiTab${key}`,
+        "aria-controls": `semiTabPanel${key}`,
         "aria-disabled": panel.disabled ? 'true' : 'false',
         "aria-selected": isSelected ? 'true' : 'false',
         tabIndex: isSelected ? 0 : -1,
@@ -103,7 +103,7 @@ class TabBar extends React.Component {
       const key = this._getItemKey(lastItem.itemKey); // eslint-disable-next-line max-len
 
 
-      const tabItem = document.querySelector("[data-uuid=\"".concat(this.uuid, "\"] .").concat(cssClasses.TABS_TAB, "[data-scrollkey=\"").concat(key, "\"]"));
+      const tabItem = document.querySelector(`[data-uuid="${this.uuid}"] .${cssClasses.TABS_TAB}[data-scrollkey="${key}"]`);
       tabItem.scrollIntoView({
         behavior: 'smooth',
         block: 'nearest',
@@ -142,17 +142,17 @@ class TabBar extends React.Component {
         }, panelIcon, tab);
       }));
       const arrowCls = cls({
-        ["".concat(cssClasses.TABS_BAR, "-arrow-").concat(pos)]: pos,
-        ["".concat(cssClasses.TABS_BAR, "-arrow")]: true
+        [`${cssClasses.TABS_BAR}-arrow-${pos}`]: pos,
+        [`${cssClasses.TABS_BAR}-arrow`]: true
       });
       const dropdownCls = cls(dropdownClassName, {
-        ["".concat(cssClasses.TABS_BAR, "-dropdown")]: true
+        [`${cssClasses.TABS_BAR}-dropdown`]: true
       });
       return /*#__PURE__*/React.createElement(Dropdown, {
         className: dropdownCls,
         clickToHide: true,
         clickTriggerToHide: true,
-        key: "".concat(rePosKey, "-").concat(pos),
+        key: `${rePosKey}-${pos}`,
         position: pos === 'start' ? 'bottomLeft' : 'bottomRight',
         render: disabled ? null : menu,
         showTick: true,
@@ -193,14 +193,14 @@ class TabBar extends React.Component {
         items: renderedList,
         overflowRenderer: this.renderOverflow,
         renderMode: "scroll",
-        className: "".concat(cssClasses.TABS_BAR, "-overflow-list"),
+        className: `${cssClasses.TABS_BAR}-overflow-list`,
         visibleItemRenderer: this.renderTabItem
       });
     };
 
     this._isActive = key => key === this.props.activeKey;
 
-    this._getItemKey = key => "".concat(key, "-bar");
+    this._getItemKey = key => `${key}-bar`;
 
     this.state = {
       endInd: props.list.length,
@@ -225,8 +225,8 @@ class TabBar extends React.Component {
     };
     const tabBarExtraContentStyle = tabBarExtraContent && tabBarExtraContent.props ? tabBarExtraContent.props.style : {};
     const extraCls = cls(cssClasses.TABS_BAR_EXTRA, {
-      ["".concat(cssClasses.TABS_BAR, "-").concat(type, "-extra")]: type,
-      ["".concat(cssClasses.TABS_BAR, "-").concat(type, "-extra-").concat(size)]: size
+      [`${cssClasses.TABS_BAR}-${type}-extra`]: type,
+      [`${cssClasses.TABS_BAR}-${type}-extra-${size}`]: size
     });
 
     if (tabBarExtraContent) {
@@ -258,8 +258,8 @@ class TabBar extends React.Component {
       [cssClasses.TABS_BAR_LINE]: type === 'line',
       [cssClasses.TABS_BAR_CARD]: type === 'card',
       [cssClasses.TABS_BAR_BUTTON]: type === 'button',
-      ["".concat(cssClasses.TABS_BAR, "-").concat(tabPosition)]: tabPosition,
-      ["".concat(cssClasses.TABS_BAR, "-collapse")]: collapsible
+      [`${cssClasses.TABS_BAR}-${tabPosition}`]: tabPosition,
+      [`${cssClasses.TABS_BAR}-collapse`]: collapsible
     });
     const extra = this.renderExtra();
     const contents = collapsible ? this.renderCollapsedTab() : this.renderTabComponents(list);

package/lib/es/tabs/TabPane.js

@@ -100,8 +100,8 @@ class TabPane extends PureComponent {
     return /*#__PURE__*/React.createElement("div", Object.assign({
       ref: this.ref,
       role: "tabpanel",
-      id: "semiTabPanel".concat(itemKey),
-      "aria-labelledby": "semiTab".concat(itemKey),
+      id: `semiTabPanel${itemKey}`,
+      "aria-labelledby": `semiTab${itemKey}`,
       className: classNames,
       style: style,
       "aria-hidden": active ? 'false' : 'true',
@@ -118,7 +118,7 @@ class TabPane extends PureComponent {
         animationEventsNeedBind
       } = _ref;
       return /*#__PURE__*/React.createElement("div", Object.assign({
-        className: "".concat(cssClasses.TABS_PANE_MOTION_OVERLAY, " ").concat(animationClassName),
+        className: `${cssClasses.TABS_PANE_MOTION_OVERLAY} ${animationClassName}`,
         "x-semi-prop": "children"
       }, animationEventsNeedBind), shouldRender ? children : null);
     }));

package/lib/es/tabs/index.js

@@ -290,11 +290,11 @@ class Tabs extends BaseComponent {
     } = this.state;
     const tabWrapperCls = cls(className, {
       [cssClasses.TABS]: true,
-      ["".concat(cssClasses.TABS, "-").concat(tabPosition)]: tabPosition
+      [`${cssClasses.TABS}-${tabPosition}`]: tabPosition
     });
     const tabContentCls = cls({
       [cssClasses.TABS_CONTENT]: true,
-      ["".concat(cssClasses.TABS_CONTENT, "-").concat(tabPosition)]: tabPosition
+      [`${cssClasses.TABS_CONTENT}-${tabPosition}`]: tabPosition
     });
     const tabBarProps = {
       activeKey,

package/lib/es/tag/group.js

@@ -33,7 +33,7 @@ export default class TagGroup extends PureComponent {
         trigger: "hover",
         position: "top",
         autoAdjustOverflow: true,
-        className: "".concat(prefixCls, "-rest-group-popover")
+        className: `${prefixCls}-rest-group-popover`
       }, popoverProps, {
         key: "_+n_Popover"
       }), nTag);
@@ -116,10 +116,10 @@ export default class TagGroup extends PureComponent {
       size
     } = this.props;
     const groupCls = classNames({
-      ["".concat(prefixCls, "-group")]: true,
-      ["".concat(prefixCls, "-group-max")]: maxTagCount,
-      ["".concat(prefixCls, "-group-small")]: size === 'small',
-      ["".concat(prefixCls, "-group-large")]: size === 'large'
+      [`${prefixCls}-group`]: true,
+      [`${prefixCls}-group-max`]: maxTagCount,
+      [`${prefixCls}-group-small`]: size === 'small',
+      [`${prefixCls}-group-large`]: size === 'large'
     }, className);
     const tags = this.renderAllTags();
     const tagContents = typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags);

package/lib/es/tag/index.js

@@ -146,16 +146,16 @@ export default class Tag extends Component {
     const baseProps = Object.assign(Object.assign({}, attr), {
       onClick,
       className: classNames(prefixCls, {
-        ["".concat(prefixCls, "-default")]: size === 'default',
-        ["".concat(prefixCls, "-small")]: size === 'small',
-        ["".concat(prefixCls, "-large")]: size === 'large',
-        ["".concat(prefixCls, "-square")]: shape === 'square',
-        ["".concat(prefixCls, "-circle")]: shape === 'circle',
-        ["".concat(prefixCls, "-").concat(type)]: type,
-        ["".concat(prefixCls, "-").concat(color, "-").concat(type)]: color && type,
-        ["".concat(prefixCls, "-closable")]: closable,
-        ["".concat(prefixCls, "-invisible")]: !isVisible,
-        ["".concat(prefixCls, "-avatar-").concat(avatarShape)]: avatarSrc
+        [`${prefixCls}-default`]: size === 'default',
+        [`${prefixCls}-small`]: size === 'small',
+        [`${prefixCls}-large`]: size === 'large',
+        [`${prefixCls}-square`]: shape === 'square',
+        [`${prefixCls}-circle`]: shape === 'circle',
+        [`${prefixCls}-${type}`]: type,
+        [`${prefixCls}-${color}-${type}`]: color && type,
+        [`${prefixCls}-closable`]: closable,
+        [`${prefixCls}-invisible`]: !isVisible,
+        [`${prefixCls}-avatar-${avatarShape}`]: avatarSrc
       }, className)
     });
     const wrapProps = clickable ? Object.assign(Object.assign({}, baseProps), a11yProps) : baseProps;
@@ -163,15 +163,15 @@ export default class Tag extends Component {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     React.createElement("div", {
-      className: "".concat(prefixCls, "-close"),
+      className: `${prefixCls}-close`,
       onClick: e => this.close(e, children, tagKey)
     }, /*#__PURE__*/React.createElement(IconClose, {
       size: "small"
     })) : null;
     return /*#__PURE__*/React.createElement("div", Object.assign({
-      "aria-label": this.props['aria-label'] || _isString(children) ? "".concat(closable ? 'Closable ' : '', "Tag: ").concat(children) : ''
+      "aria-label": this.props['aria-label'] || _isString(children) ? `${closable ? 'Closable ' : ''}Tag: ${children}` : ''
     }, wrapProps), avatarSrc ? this.renderAvatar() : null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
+      className: `${prefixCls}-content`
     }, children), closeIcon);
   }
 

package/lib/es/tagInput/index.js

@@ -25,7 +25,7 @@ const SortableList = SortableContainer(_ref => {
     items
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-sortable-list")
+    className: `${prefixCls}-sortable-list`
   }, items.map((item, index) =>
   /*#__PURE__*/
   // @ts-ignore skip SortableItem type check
@@ -103,22 +103,22 @@ class TagInput extends BaseComponent {
         active
       } = this.state;
       const showIconHandler = active && draggable;
-      const tagCls = cls("".concat(prefixCls, "-wrapper-tag"), {
-        ["".concat(prefixCls, "-wrapper-tag-size-").concat(size)]: size,
-        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+      const tagCls = cls(`${prefixCls}-wrapper-tag`, {
+        [`${prefixCls}-wrapper-tag-size-${size}`]: size,
+        [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
       });
-      const typoCls = cls("".concat(prefixCls, "-wrapper-typo"), {
-        ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
+      const typoCls = cls(`${prefixCls}-wrapper-typo`, {
+        [`${prefixCls}-wrapper-typo-disabled`]: disabled
       });
       const itemWrapperCls = cls({
-        ["".concat(prefixCls, "-drag-item")]: showIconHandler,
-        ["".concat(prefixCls, "-wrapper-tag-icon")]: showIconHandler
+        [`${prefixCls}-drag-item`]: showIconHandler,
+        [`${prefixCls}-wrapper-tag-icon`]: showIconHandler
       });
       const DragHandle = SortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
-        className: "".concat(prefixCls, "-drag-handler")
+        className: `${prefixCls}-drag-handler`
       }));
       return tagsArray.map((value, index) => {
-        const elementKey = showIconHandler ? value : "".concat(index).concat(value);
+        const elementKey = showIconHandler ? value : `${index}${value}`;
 
         const onClose = () => {
           !disabled && this.handleTagClose(index);
@@ -139,9 +139,9 @@ class TagInput extends BaseComponent {
             closable: !disabled,
             key: elementKey,
             visible: true,
-            "aria-label": "".concat(!disabled ? 'Closable ' : '', "Tag: ").concat(value)
+            "aria-label": `${!disabled ? 'Closable ' : ''}Tag: ${value}`
           }, /*#__PURE__*/React.createElement("div", {
-            className: "".concat(prefixCls, "-tag-content-wrapper")
+            className: `${prefixCls}-tag-content-wrapper`
           }, showIconHandler && /*#__PURE__*/React.createElement(DragHandle, null), /*#__PURE__*/React.createElement(Paragraph, {
             className: typoCls,
             ellipsis: {
@@ -311,8 +311,8 @@ class TagInput extends BaseComponent {
       disabled,
       clearIcon
     } = this.props;
-    const clearCls = cls("".concat(prefixCls, "-clearBtn"), {
-      ["".concat(prefixCls, "-clearBtn-invisible")]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
+    const clearCls = cls(`${prefixCls}-clearBtn`, {
+      [`${prefixCls}-clearBtn-invisible`]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
     });
 
     if (showClear) {
@@ -341,11 +341,11 @@ class TagInput extends BaseComponent {
       return null;
     }
 
-    const prefixWrapperCls = cls("".concat(prefixCls, "-prefix"), {
-      ["".concat(prefixCls, "-inset-label")]: insetLabel,
-      ["".concat(prefixCls, "-prefix-text")]: labelNode && _isString(labelNode),
+    const prefixWrapperCls = cls(`${prefixCls}-prefix`, {
+      [`${prefixCls}-inset-label`]: insetLabel,
+      [`${prefixCls}-prefix-text`]: labelNode && _isString(labelNode),
       // eslint-disable-next-line max-len
-      ["".concat(prefixCls, "-prefix-icon")]: isSemiIcon(labelNode)
+      [`${prefixCls}-prefix-icon`]: isSemiIcon(labelNode)
     });
     return (
       /*#__PURE__*/
@@ -369,10 +369,10 @@ class TagInput extends BaseComponent {
       return null;
     }
 
-    const suffixWrapperCls = cls("".concat(prefixCls, "-suffix"), {
-      ["".concat(prefixCls, "-suffix-text")]: suffix && _isString(suffix),
+    const suffixWrapperCls = cls(`${prefixCls}-suffix`, {
+      [`${prefixCls}-suffix-text`]: suffix && _isString(suffix),
       // eslint-disable-next-line max-len
-      ["".concat(prefixCls, "-suffix-icon")]: isSemiIcon(suffix)
+      [`${prefixCls}-suffix-icon`]: isSemiIcon(suffix)
     });
     return (
       /*#__PURE__*/
@@ -399,8 +399,8 @@ class TagInput extends BaseComponent {
       tagsArray,
       active
     } = this.state;
-    const restTagsCls = cls("".concat(prefixCls, "-wrapper-n"), {
-      ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
+    const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
+      [`${prefixCls}-wrapper-n-disabled`]: disabled
     });
     const allTags = this.getAllTags();
     let restTags = [];
@@ -424,7 +424,7 @@ class TagInput extends BaseComponent {
       // @ts-ignore skip SortableItem type check
       return /*#__PURE__*/React.createElement(SortableList, {
         useDragHandle: true,
-        helperClass: "".concat(prefixCls, "-drag-item-move"),
+        helperClass: `${prefixCls}-drag-item-move`,
         items: sortableListItems,
         onSortEnd: this.onSortEnd,
         axis: "xy"
@@ -478,16 +478,16 @@ class TagInput extends BaseComponent {
       active
     } = this.state;
     const tagInputCls = cls(prefixCls, className, {
-      ["".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'
+      [`${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'
     });
-    const inputCls = cls("".concat(prefixCls, "-wrapper-input"), "".concat(prefixCls, "-wrapper-input-").concat(size));
-    const wrapperCls = cls("".concat(prefixCls, "-wrapper"));
+    const inputCls = cls(`${prefixCls}-wrapper-input`, `${prefixCls}-wrapper-input-${size}`);
+    const wrapperCls = cls(`${prefixCls}-wrapper`);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line

package/lib/es/timePicker/Combobox.js

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