@douyinfe/semi-ui 2.27.1-alpha.2 → 2.27.1-alpha.3

package/lib/es/navigation/Footer.js

@@ -53,8 +53,8 @@ export default class NavFooter extends PureComponent {
       children = this.renderCollapseButton();
     }
 
-    const wrapCls = cls(className, `${cssClasses.PREFIX}-footer`, {
-      [`${cssClasses.PREFIX}-footer-collapsed`]: isCollapsed
+    const wrapCls = cls(className, "".concat(cssClasses.PREFIX, "-footer"), {
+      ["".concat(cssClasses.PREFIX, "-footer-collapsed")]: isCollapsed
     });
     return /*#__PURE__*/React.createElement("div", {
       className: wrapCls,

package/lib/es/navigation/Header.js

@@ -28,18 +28,18 @@ export default class NavHeader extends PureComponent {
     const {
       isCollapsed
     } = this.context;
-    const wrapCls = cls(className, `${cssClasses.PREFIX}-header`, {
-      [`${cssClasses.PREFIX}-header-collapsed`]: isCollapsed
+    const wrapCls = cls(className, "".concat(cssClasses.PREFIX, "-header"), {
+      ["".concat(cssClasses.PREFIX, "-header-collapsed")]: isCollapsed
     });
     let wrappedChildren = /*#__PURE__*/React.createElement(React.Fragment, null, logo ? /*#__PURE__*/React.createElement("i", {
-      className: `${cssClasses.PREFIX}-header-logo`
+      className: "".concat(cssClasses.PREFIX, "-header-logo")
     }, this.renderLogo(logo)) : null, !isNullOrUndefined(text) && !isCollapsed ? /*#__PURE__*/React.createElement("span", {
-      className: `${cssClasses.PREFIX}-header-text`
+      className: "".concat(cssClasses.PREFIX, "-header-text")
     }, text) : null, children);
 
     if (typeof link === 'string') {
       wrappedChildren = /*#__PURE__*/React.createElement("a", Object.assign({
-        className: `${prefixCls}-header-link`,
+        className: "".concat(prefixCls, "-header-link"),
         href: link
       }, linkOptions), wrappedChildren);
     }

package/lib/es/navigation/Item.js

@@ -16,7 +16,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/navigation
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
 import Dropdown from '../dropdown';
-const clsPrefix = `${cssClasses.PREFIX}-item`;
+const clsPrefix = "".concat(cssClasses.PREFIX, "-item");
 export default class NavItem extends BaseComponent {
   constructor(props) {
     super(props);
@@ -129,9 +129,9 @@ export default class NavItem extends BaseComponent {
       iconSize = 'default';
     }
 
-    const className = cls(`${clsPrefix}-icon`, {
-      [`${clsPrefix}-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
-      [`${clsPrefix}-icon-info`]: !isToggleIcon
+    const className = cls("".concat(clsPrefix, "-icon"), {
+      ["".concat(clsPrefix, "-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
+      ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/React.createElement("i", {
       className: className,
@@ -183,13 +183,13 @@ export default class NavItem extends BaseComponent {
       }
 
       itemChildren = /*#__PURE__*/React.createElement(React.Fragment, null, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null, !isNullOrUndefined(text) ? /*#__PURE__*/React.createElement("span", {
-        className: `${cssClasses.PREFIX}-item-text`
+        className: "".concat(cssClasses.PREFIX, "-item-text")
       }, text) : '', this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {
       itemChildren = /*#__PURE__*/React.createElement("a", Object.assign({
-        className: `${prefixCls}-item-link`,
+        className: "".concat(prefixCls, "-item-link"),
         href: link,
         tabIndex: -1
       }, linkOptions), itemChildren);
@@ -200,10 +200,10 @@ export default class NavItem extends BaseComponent {
     if (isInSubNav && (isCollapsed || mode === strings.MODE_HORIZONTAL)) {
       const popoverItemCls = cls({
         [clsPrefix]: true,
-        [`${clsPrefix}-sub`]: isSubNav,
-        [`${clsPrefix}-selected`]: selected,
-        [`${clsPrefix}-collapsed`]: isCollapsed,
-        [`${clsPrefix}-disabled`]: disabled
+        ["".concat(clsPrefix, "-sub")]: isSubNav,
+        ["".concat(clsPrefix, "-selected")]: selected,
+        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
+        ["".concat(clsPrefix, "-disabled")]: disabled
       });
       itemDom = /*#__PURE__*/React.createElement(Dropdown.Item, {
         selected: selected,
@@ -220,15 +220,15 @@ export default class NavItem extends BaseComponent {
       // Items are divided into normal and sub-wrap
       const isFirstLayer = !_isUndefined(isInSubNavInProps) && !isInSubNavInProps || _isUndefined(isInSubNavInProps) && _isUndefined(isInSubNavInContext);
 
-      const popoverItemCls = cls(`${className || `${clsPrefix}-normal`}`, {
+      const popoverItemCls = cls("".concat(className || "".concat(clsPrefix, "-normal")), {
         [clsPrefix]: true,
-        [`${clsPrefix}-sub`]: isSubNav,
-        [`${clsPrefix}-selected`]: selected && !isSubNav,
-        [`${clsPrefix}-collapsed`]: isCollapsed,
-        [`${clsPrefix}-disabled`]: disabled,
-        [`${clsPrefix}-has-link`]: typeof link === 'string',
-        [`${cssClasses.PREFIX}-first-layer`]: isFirstLayer,
-        [`${clsPrefix}-horizontal`]: modeInProps === strings.MODE_HORIZONTAL
+        ["".concat(clsPrefix, "-sub")]: isSubNav,
+        ["".concat(clsPrefix, "-selected")]: selected && !isSubNav,
+        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
+        ["".concat(clsPrefix, "-disabled")]: disabled,
+        ["".concat(clsPrefix, "-has-link")]: typeof link === 'string',
+        ["".concat(cssClasses.PREFIX, "-first-layer")]: isFirstLayer,
+        ["".concat(clsPrefix, "-horizontal")]: modeInProps === strings.MODE_HORIZONTAL
       });
       const ariaProps = {
         'aria-disabled': disabled

package/lib/es/navigation/SubNav.js

@@ -132,14 +132,14 @@ export default class SubNav extends BaseComponent {
     }
 
     const isOpen = this.adapter.getIsOpen();
-    const className = cls(`${prefixCls}-item-icon`, {
-      [`${prefixCls}-item-icon-toggle-${(_a = this.context.toggleIconPosition) !== null && _a !== void 0 ? _a : 'right'}`]: isToggleIcon,
-      [`${prefixCls}-item-icon-info`]: !isToggleIcon,
-      [`${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}-no-transition`]: !withTransition && isToggleIcon
+    const className = cls("".concat(prefixCls, "-item-icon"), {
+      ["".concat(prefixCls, "-item-icon-toggle-").concat((_a = this.context.toggleIconPosition) !== null && _a !== void 0 ? _a : 'right')]: isToggleIcon,
+      ["".concat(prefixCls, "-item-icon-info")]: !isToggleIcon,
+      ["".concat(prefixCls, "-icon-rotate-").concat(isOpen ? "180" : "0", "-no-transition")]: !withTransition && isToggleIcon
     });
     const iconElem = /*#__PURE__*/React.isValidElement(icon) ? withTransition ? /*#__PURE__*/React.createElement(CSSAnimation, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: `${prefixCls}-icon-rotate-${isOpen ? "180" : "0"}`
+      startClassName: "".concat(prefixCls, "-icon-rotate-").concat(isOpen ? "180" : "0")
     }, _ref => {
       let {
         animationClassName
@@ -177,11 +177,11 @@ export default class SubNav extends BaseComponent {
     const mode = this.adapter.getMode();
     const isOpen = this.adapter.getIsOpen();
     const isCollapsed = this.adapter.getIsCollapsed();
-    const titleCls = cls(`${prefixCls}-sub-title`, {
-      [`${prefixCls}-sub-title-selected`]: this.adapter.getIsSelected(itemKey),
-      [`${prefixCls}-sub-title-disabled`]: disabled,
-      [`${prefixCls}-first-layer`]: !isInSubNav,
-      [`${prefixCls}-sub-title-horizontal`]: mode === strings.MODE_HORIZONTAL
+    const titleCls = cls("".concat(prefixCls, "-sub-title"), {
+      ["".concat(prefixCls, "-sub-title-selected")]: this.adapter.getIsSelected(itemKey),
+      ["".concat(prefixCls, "-sub-title-disabled")]: disabled,
+      ["".concat(prefixCls, "-first-layer")]: !isInSubNav,
+      ["".concat(prefixCls, "-sub-title-horizontal")]: mode === strings.MODE_HORIZONTAL
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -233,9 +233,9 @@ export default class SubNav extends BaseComponent {
       onKeyPress: this.handleKeyPress,
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-item-inner`
+      className: "".concat(prefixCls, "-item-inner")
     }, placeholderIcons, toggleIconPositionLeft && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-item-text`
+      className: "".concat(prefixCls, "-item-text")
     }, text), !toggleIconPositionLeft && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;
   }
@@ -253,9 +253,9 @@ export default class SubNav extends BaseComponent {
     const isOpen = this.adapter.getIsOpen();
     const mode = this.adapter.getMode();
     const isHorizontal = mode === strings.MODE_HORIZONTAL;
-    const subNavCls = cls(`${prefixCls}-sub`, {
-      [`${prefixCls}-sub-open`]: isOpen,
-      [`${prefixCls}-sub-popover`]: isCollapsed || isHorizontal
+    const subNavCls = cls("".concat(prefixCls, "-sub"), {
+      ["".concat(prefixCls, "-sub-open")]: isOpen,
+      ["".concat(prefixCls, "-sub-popover")]: isCollapsed || isHorizontal
     });
     const ulWithMotion = /*#__PURE__*/React.createElement(Collapsible, {
       motion: subNavMotion,
@@ -291,7 +291,7 @@ export default class SubNav extends BaseComponent {
     const isOpen = this.adapter.getIsOpen();
     const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
     const subNavCls = cls({
-      [`${prefixCls}-popover`]: isCollapsed
+      ["".concat(prefixCls, "-popover")]: isCollapsed
     });
     const dropdownProps = {
       trigger: 'hover',
@@ -349,7 +349,7 @@ export default class SubNav extends BaseComponent {
       itemKey: itemKey,
       forwardRef: this.setItemRef,
       isCollapsed: isCollapsed,
-      className: `${prefixCls}-sub-wrap`,
+      className: "".concat(prefixCls, "-sub-wrap"),
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       disabled: disabled,

package/lib/es/navigation/index.js

@@ -270,12 +270,12 @@ class Nav extends BaseComponent {
     }
 
     const finalCls = cls(prefixCls, className, {
-      [`${prefixCls}-collapsed`]: isCollapsed,
-      [`${prefixCls}-horizontal`]: mode === 'horizontal',
-      [`${prefixCls}-vertical`]: mode === 'vertical'
+      ["".concat(prefixCls, "-collapsed")]: isCollapsed,
+      ["".concat(prefixCls, "-horizontal")]: mode === 'horizontal',
+      ["".concat(prefixCls, "-vertical")]: mode === 'vertical'
     });
-    const headerListOuterCls = cls(`${prefixCls}-header-list-outer`, {
-      [`${prefixCls}-header-list-outer-collapsed`]: isCollapsed
+    const headerListOuterCls = cls("".concat(prefixCls, "-header-list-outer"), {
+      ["".concat(prefixCls, "-header-list-outer-collapsed")]: isCollapsed
     });
 
     if (this.itemsChanged) {
@@ -320,16 +320,16 @@ class Nav extends BaseComponent {
       className: finalCls,
       style: finalStyle
     }, /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-inner`
+      className: "".concat(prefixCls, "-inner")
     }, /*#__PURE__*/React.createElement("div", {
       className: headerListOuterCls
     }, headers, /*#__PURE__*/React.createElement("div", {
       style: bodyStyle,
-      className: `${prefixCls}-list-wrapper`
+      className: "".concat(prefixCls, "-list-wrapper")
     }, /*#__PURE__*/React.createElement("ul", {
       role: "menu",
       "aria-orientation": mode,
-      className: `${prefixCls}-list`
+      className: "".concat(prefixCls, "-list")
     }, this.adapter.getCache('itemElems'), children))), footers))));
   }
 

package/lib/es/notification/index.js

@@ -56,7 +56,7 @@ class NotificationList extends BaseComponent {
             return /*#__PURE__*/React.createElement(CSSAnimation, {
               key: notice.id,
               animationState: isRemoved ? "leave" : "enter",
-              startClassName: `${cssClasses.NOTICE}-animation-${isRemoved ? "hide" : "show"}_${position}`
+              startClassName: "".concat(cssClasses.NOTICE, "-animation-").concat(isRemoved ? "hide" : "show", "_").concat(position)
             }, _ref => {
               let {
                 animationClassName,
@@ -192,7 +192,7 @@ class NotificationList extends BaseComponent {
   static destroyAll() {
     if (ref) {
       ref.destroyAll();
-      const wrapper = document.querySelector(`#${this.wrapperId}`);
+      const wrapper = document.querySelector("#".concat(this.wrapperId));
       ReactDOM.unmountComponentAtNode(wrapper);
       wrapper && wrapper.parentNode.removeChild(wrapper);
       ref = null;
@@ -225,7 +225,7 @@ class NotificationList extends BaseComponent {
     ['top', 'left', 'bottom', 'right'].forEach(pos => {
       if (pos in noticeInstance) {
         const val = noticeInstance[pos];
-        style[pos] = typeof val === 'number' ? `${val}px` : val;
+        style[pos] = typeof val === 'number' ? "".concat(val, "px") : val;
       }
     });
     return style;

package/lib/es/notification/notice.js

@@ -98,8 +98,8 @@ class Notice extends BaseComponent {
     };
     let iconType = iconMap[type];
     const iconCls = cls({
-      [`${prefixCls}-icon`]: true,
-      [`${prefixCls}-${type}`]: true
+      ["".concat(prefixCls, "-icon")]: true,
+      ["".concat(prefixCls, "-").concat(type)]: true
     });
 
     if (icon) {
@@ -141,11 +141,11 @@ class Notice extends BaseComponent {
       visible
     } = this.state;
     const wrapper = cls(prefixCls, className, {
-      [`${prefixCls}-close`]: !visible,
-      [`${prefixCls}-icon-show`]: types.includes(type),
-      [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-${theme}`]: theme === 'light',
-      [`${prefixCls}-rtl`]: direction === 'rtl'
+      ["".concat(prefixCls, "-close")]: !visible,
+      ["".concat(prefixCls, "-icon-show")]: types.includes(type),
+      ["".concat(prefixCls, "-").concat(type)]: true,
+      ["".concat(prefixCls, "-").concat(theme)]: theme === 'light',
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
     const titleID = getUuidShort({});
     return (
@@ -162,18 +162,18 @@ class Notice extends BaseComponent {
         onAnimationEnd: this.props.onAnimationEnd,
         onAnimationStart: this.props.onAnimationStart
       }, /*#__PURE__*/React.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-inner`
+        className: "".concat(prefixCls, "-inner")
       }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-content-wrapper`
+        className: "".concat(prefixCls, "-content-wrapper")
       }, title ? /*#__PURE__*/React.createElement("div", {
         id: titleID,
-        className: `${prefixCls}-title`,
+        className: "".concat(prefixCls, "-title"),
         "x-semi-prop": "title"
       }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-content`,
+        className: "".concat(prefixCls, "-content"),
         "x-semi-prop": "content"
       }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
-        className: `${prefixCls}-icon-close`,
+        className: "".concat(prefixCls, "-icon-close"),
         type: "tertiary",
         icon: /*#__PURE__*/React.createElement(IconClose, null),
         theme: "borderless",

package/lib/es/overflowList/index.js

@@ -109,18 +109,18 @@ class OverflowList extends BaseComponent {
               });
             }
           }, /*#__PURE__*/React.createElement("div", {
-            className: `${prefixCls}-overflow`
+            className: "".concat(prefixCls, "-overflow")
           }, child));
         }
       }
 
       const inner = renderMode === RenderMode.SCROLL ? [overflow[0], /*#__PURE__*/React.createElement("div", {
-        className: cls(wrapperClassName, `${prefixCls}-scroll-wrapper`),
+        className: cls(wrapperClassName, "".concat(prefixCls, "-scroll-wrapper")),
         ref: ref => {
           this.scroller = ref;
         },
         style: Object.assign({}, wrapperStyle),
-        key: `${prefixCls}-scroll-wrapper`
+        key: "".concat(prefixCls, "-scroll-wrapper")
       }, visible.map(visibleItemRenderer).map(item => {
         const {
           forwardRef,
@@ -128,7 +128,7 @@ class OverflowList extends BaseComponent {
         } = item;
         return /*#__PURE__*/React.cloneElement(item, {
           ref: node => this.mergeRef(forwardRef, node, key),
-          'data-scrollkey': `${key}`,
+          'data-scrollkey': "".concat(key),
           key
         });
       })), overflow[1]] : [collapseFrom === Boundary.START ? overflow : null, visible.map((item, idx) => {
@@ -145,11 +145,11 @@ class OverflowList extends BaseComponent {
           }
         }, /*#__PURE__*/React.createElement("div", {
           key: key,
-          className: `${prefixCls}-item`
+          className: "".concat(prefixCls, "-item")
         }, child));
       }), collapseFrom === Boundary.END ? overflow : null];
       const list = /*#__PURE__*/React.createElement('div', {
-        className: cls(`${prefixCls}`, className),
+        className: cls("".concat(prefixCls), className),
         style: Object.assign(Object.assign({}, style), renderMode === RenderMode.COLLAPSE ? {
           maxWidth: '100%',
           visibility: overflowStatus === "calculating" ? "hidden" : "visible"

package/lib/es/pagination/index.js

@@ -138,9 +138,9 @@ export default class Pagination extends BaseComponent {
       prevDisabled
     } = this.state;
     const preClassName = classNames({
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-prev`]: true,
-      [`${prefixCls}-item-disabled`]: prevDisabled
+      ["".concat(prefixCls, "-item")]: true,
+      ["".concat(prefixCls, "-prev")]: true,
+      ["".concat(prefixCls, "-item-disabled")]: prevDisabled
     });
     return /*#__PURE__*/React.createElement("li", {
       role: "button",
@@ -162,9 +162,9 @@ export default class Pagination extends BaseComponent {
       nextDisabled
     } = this.state;
     const nextClassName = classNames({
-      [`${prefixCls}-item`]: true,
-      [`${prefixCls}-item-disabled`]: nextDisabled,
-      [`${prefixCls}-next`]: true
+      ["".concat(prefixCls, "-item")]: true,
+      ["".concat(prefixCls, "-item-disabled")]: nextDisabled,
+      ["".concat(prefixCls, "-next")]: true
     });
     return /*#__PURE__*/React.createElement("li", {
       role: "button",
@@ -191,7 +191,7 @@ export default class Pagination extends BaseComponent {
     const {
       pageSize
     } = this.state;
-    const switchCls = classNames(`${prefixCls}-switch`);
+    const switchCls = classNames("".concat(prefixCls, "-switch"));
 
     if (!showSizeChanger) {
       return null;
@@ -202,7 +202,7 @@ export default class Pagination extends BaseComponent {
     const options = newPageSizeOpts.map(size => /*#__PURE__*/React.createElement(Option, {
       value: size,
       key: size
-    }, /*#__PURE__*/React.createElement("span", null, `${size} `, pageSizeText)));
+    }, /*#__PURE__*/React.createElement("span", null, "".concat(size, " "), pageSizeText)));
     return /*#__PURE__*/React.createElement("div", {
       className: switchCls
     }, /*#__PURE__*/React.createElement(Select, {
@@ -212,7 +212,7 @@ export default class Pagination extends BaseComponent {
       key: pageSizeText,
       position: popoverPosition || 'bottomRight',
       clickToHide: true,
-      dropdownClassName: `${prefixCls}-select-dropdown`
+      dropdownClassName: "".concat(prefixCls, "-select-dropdown")
     }, options));
   }
 
@@ -234,14 +234,14 @@ export default class Pagination extends BaseComponent {
 
     const isDisabled = totalPageNum === 1;
     const quickJumpCls = classNames({
-      [`${prefixCls}-quickjump`]: true,
-      [`${prefixCls}-quickjump-disabled`]: isDisabled
+      ["".concat(prefixCls, "-quickjump")]: true,
+      ["".concat(prefixCls, "-quickjump-disabled")]: isDisabled
     });
     return /*#__PURE__*/React.createElement("div", {
       className: quickJumpCls
     }, /*#__PURE__*/React.createElement("span", null, locale.jumpTo), /*#__PURE__*/React.createElement(InputNumber, {
       value: quickJumpPage,
-      className: `${prefixCls}-quickjump-input-number`,
+      className: "".concat(prefixCls, "-quickjump-input-number"),
       hideButtons: true,
       disabled: isDisabled,
       onBlur: e => this.foundation.handleQuickJumpBlur(),
@@ -262,15 +262,15 @@ export default class Pagination extends BaseComponent {
       popoverZIndex
     } = this.props;
     return pageList.map((page, i) => {
-      const pageListClassName = classNames(`${prefixCls}-item`, {
-        [`${prefixCls}-item-active`]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
+      const pageListClassName = classNames("".concat(prefixCls, "-item"), {
+        ["".concat(prefixCls, "-item-active")]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
 
       });
       const pageEl = /*#__PURE__*/React.createElement("li", {
-        key: `${page}${i}`,
+        key: "".concat(page).concat(i),
         onClick: () => this.foundation.goPage(page, i),
         className: pageListClassName,
-        "aria-label": page === '...' ? 'More' : `Page ${page}`,
+        "aria-label": page === '...' ? 'More' : "Page ".concat(page),
         "aria-current": currentPage === page ? "page" : false
       }, page);
 
@@ -281,7 +281,7 @@ export default class Pagination extends BaseComponent {
           trigger: "hover",
           // onVisibleChange={visible=>this.handleRestHover(visible, i < 3 ? 'left' : 'right')}
           content: this.renderRestPageList(content),
-          key: `${page}${i}`,
+          key: "".concat(page).concat(i),
           position: popoverPosition,
           zIndex: popoverZIndex
         }, pageEl);
@@ -296,7 +296,7 @@ export default class Pagination extends BaseComponent {
     const {
       direction
     } = this.context;
-    const className = classNames(`${prefixCls}-rest-item`);
+    const className = classNames("".concat(prefixCls, "-rest-item"));
     const count = restList.length;
 
     const row = item => {
@@ -307,11 +307,11 @@ export default class Pagination extends BaseComponent {
       const page = restList[index];
       return /*#__PURE__*/React.createElement("div", {
         role: "listitem",
-        key: `${page}${index}`,
+        key: "".concat(page).concat(index),
         className: className,
         onClick: () => this.foundation.goPage(page, index),
         style: style,
-        "aria-label": `${page}`
+        "aria-label": "".concat(page)
       }, page);
     };
 
@@ -321,7 +321,7 @@ export default class Pagination extends BaseComponent {
       /*#__PURE__*/
       // @ts-ignore skip type check cause react-window not update with @types/react 18
       React.createElement(List, {
-        className: `${prefixCls}-rest-list`,
+        className: "".concat(prefixCls, "-rest-list"),
         itemData: restList,
         itemSize: itemHeight,
         width: 78,
@@ -342,7 +342,7 @@ export default class Pagination extends BaseComponent {
       hoverShowPageSelect,
       showSizeChanger
     } = this.props;
-    const paginationCls = classNames(`${prefixCls}-small`, prefixCls, className);
+    const paginationCls = classNames("".concat(prefixCls, "-small"), prefixCls, className);
     const {
       currentPage,
       total,
@@ -359,7 +359,7 @@ export default class Pagination extends BaseComponent {
     }, (v, i) => i + 1);
     const pageList = this.renderRestPageList(pageNumbers);
     const page = /*#__PURE__*/React.createElement("div", {
-      className: `${prefixCls}-item ${prefixCls}-item-small`
+      className: "".concat(prefixCls, "-item ").concat(prefixCls, "-item-small")
     }, currentPage, "/", totalPageNum, " ");
     return /*#__PURE__*/React.createElement("div", {
       className: paginationCls,
@@ -381,8 +381,8 @@ export default class Pagination extends BaseComponent {
       hideOnSinglePage,
       showSizeChanger
     } = this.props;
-    const paginationCls = classNames(className, `${prefixCls}`);
-    const showTotalCls = `${prefixCls}-total`;
+    const paginationCls = classNames(className, "".concat(prefixCls));
+    const showTotalCls = "".concat(prefixCls, "-total");
     const totalPageNum = Math.ceil(total / pageSize);
 
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
@@ -394,7 +394,7 @@ export default class Pagination extends BaseComponent {
       style: style
     }, showTotal ? /*#__PURE__*/React.createElement("span", {
       className: showTotalCls
-    }, locale.total, ` ${Math.ceil(total / pageSize)} `, locale.page) : null, this.renderPrevBtn(), this.renderPageList(), this.renderNextBtn(), this.renderPageSizeSwitch(locale), this.renderQuickJump(locale));
+    }, locale.total, " ".concat(Math.ceil(total / pageSize), " "), locale.page) : null, this.renderPrevBtn(), this.renderPageList(), this.renderNextBtn(), this.renderPageSizeSwitch(locale), this.renderQuickJump(locale));
   }
 
   render() {

package/lib/es/popconfirm/index.js

@@ -120,7 +120,7 @@ export default class Popconfirm extends BaseComponent {
       direction
     } = this.context;
     const popCardCls = cls(prefixCls, className, {
-      [`${prefixCls}-rtl`]: direction === 'rtl'
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
     });
     const showTitle = title !== null && typeof title !== 'undefined';
     const showContent = !(content === null || typeof content === 'undefined');
@@ -132,29 +132,29 @@ export default class Popconfirm extends BaseComponent {
         onClick: this.stopImmediatePropagation,
         style: style
       }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-inner`
+        className: "".concat(prefixCls, "-inner")
       }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header`
+        className: "".concat(prefixCls, "-header")
       }, /*#__PURE__*/React.createElement("i", {
-        className: `${prefixCls}-header-icon`,
+        className: "".concat(prefixCls, "-header-icon"),
         "x-semi-prop": "icon"
       }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header-body`
+        className: "".concat(prefixCls, "-header-body")
       }, showTitle ? /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-header-title`,
+        className: "".concat(prefixCls, "-header-title"),
         "x-semi-prop": "title"
       }, title) : null), /*#__PURE__*/React.createElement(Button, {
-        className: `${prefixCls}-btn-close`,
+        className: "".concat(prefixCls, "-btn-close"),
         icon: /*#__PURE__*/React.createElement(IconClose, null),
         size: "small",
         theme: 'borderless',
         type: cancelType,
         onClick: this.handleCancel
       })), showContent ? /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-body`,
+        className: "".concat(prefixCls, "-body"),
         "x-semi-prop": "content"
       }, content) : null, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-footer`
+        className: "".concat(prefixCls, "-footer")
       }, this.renderControls())))
     );
   }

package/lib/es/popover/index.d.ts

@@ -58,7 +58,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         margin: PropTypes.Requireable<NonNullable<number | object>>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<NonNullable<"click" | "focus" | "hover" | "custom">>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
         contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/es/popover/index.js

@@ -40,7 +40,7 @@ class Popover extends React.PureComponent {
         direction
       } = this.context;
       const popCardCls = classNames(prefixCls, contentClassName, {
-        [`${prefixCls}-rtl`]: direction === 'rtl'
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
       });
       const contentNode = this.renderContentNode({
         initialFocusRef,
@@ -49,7 +49,7 @@ class Popover extends React.PureComponent {
       return /*#__PURE__*/React.createElement("div", {
         className: popCardCls
       }, /*#__PURE__*/React.createElement("div", {
-        className: `${prefixCls}-content`
+        className: "".concat(prefixCls, "-content")
       }, contentNode));
     };