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

package/lib/cjs/modal/useModal/index.js

@@ -41,7 +41,7 @@ function useModal() {
       let closeFunc;
 
       const modal = /*#__PURE__*/_react.default.createElement(_HookModal.default, {
-        key: "semi-modal-".concat(uuid),
+        key: `semi-modal-${uuid}`,
         config: withFunc(config),
         ref: modalRef,
         afterClose: () => {

package/lib/cjs/navigation/CollapseButton.js

@@ -45,7 +45,7 @@ function CollapseButton(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-collapse-btn")
+    className: `${prefixCls}-collapse-btn`
   }, isCollapsed ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: finalCollapseText,
     position: "right"

package/lib/cjs/navigation/Footer.js

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

package/lib/cjs/navigation/Header.js

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

package/lib/cjs/navigation/Item.js

@@ -36,7 +36,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable max-len */
 
 /* eslint-disable no-nested-ternary */
-const clsPrefix = "".concat(_constants.cssClasses.PREFIX, "-item");
+const clsPrefix = `${_constants.cssClasses.PREFIX}-item`;
 
 class NavItem extends _baseComponent.default {
   constructor(props) {
@@ -143,9 +143,9 @@ class NavItem extends _baseComponent.default {
       iconSize = 'default';
     }
 
-    const className = (0, _classnames.default)("".concat(clsPrefix, "-icon"), {
-      ["".concat(clsPrefix, "-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
+    const className = (0, _classnames.default)(`${clsPrefix}-icon`, {
+      [`${clsPrefix}-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
+      [`${clsPrefix}-icon-info`]: !isToggleIcon
     });
     return /*#__PURE__*/_react.default.createElement("i", {
       className: className,
@@ -194,13 +194,13 @@ class NavItem extends _baseComponent.default {
       }
 
       itemChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, 'key-position-left') : null, !(0, _isNullOrUndefined.default)(text) ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(_constants.cssClasses.PREFIX, "-item-text")
+        className: `${_constants.cssClasses.PREFIX}-item-text`
       }, text) : '', this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, _constants.strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {
       itemChildren = /*#__PURE__*/_react.default.createElement("a", Object.assign({
-        className: "".concat(prefixCls, "-item-link"),
+        className: `${prefixCls}-item-link`,
         href: link,
         tabIndex: -1
       }, linkOptions), itemChildren);
@@ -211,10 +211,10 @@ class NavItem extends _baseComponent.default {
     if (isInSubNav && (isCollapsed || mode === _constants.strings.MODE_HORIZONTAL)) {
       const popoverItemCls = (0, _classnames.default)({
         [clsPrefix]: true,
-        ["".concat(clsPrefix, "-sub")]: isSubNav,
-        ["".concat(clsPrefix, "-selected")]: selected,
-        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
-        ["".concat(clsPrefix, "-disabled")]: disabled
+        [`${clsPrefix}-sub`]: isSubNav,
+        [`${clsPrefix}-selected`]: selected,
+        [`${clsPrefix}-collapsed`]: isCollapsed,
+        [`${clsPrefix}-disabled`]: disabled
       });
       itemDom = /*#__PURE__*/_react.default.createElement(_dropdown.default.Item, {
         selected: selected,
@@ -229,13 +229,13 @@ class NavItem extends _baseComponent.default {
       }, itemChildren);
     } else {
       // Items are divided into normal and sub-wrap
-      const popoverItemCls = (0, _classnames.default)("".concat(className || "".concat(clsPrefix, "-normal")), {
+      const popoverItemCls = (0, _classnames.default)(`${className || `${clsPrefix}-normal`}`, {
         [clsPrefix]: true,
-        ["".concat(clsPrefix, "-sub")]: isSubNav,
-        ["".concat(clsPrefix, "-selected")]: selected && !isSubNav,
-        ["".concat(clsPrefix, "-collapsed")]: isCollapsed,
-        ["".concat(clsPrefix, "-disabled")]: disabled,
-        ["".concat(clsPrefix, "-has-link")]: typeof link === 'string'
+        [`${clsPrefix}-sub`]: isSubNav,
+        [`${clsPrefix}-selected`]: selected && !isSubNav,
+        [`${clsPrefix}-collapsed`]: isCollapsed,
+        [`${clsPrefix}-disabled`]: disabled,
+        [`${clsPrefix}-has-link`]: typeof link === 'string'
       });
       const ariaProps = {
         'aria-disabled': disabled

package/lib/cjs/navigation/SubNav.js

@@ -146,14 +146,14 @@ class SubNav extends _baseComponent.default {
       iconSize = 'default';
     }
 
-    const className = (0, _classnames.default)("".concat(prefixCls, "-item-icon"), {
-      ["".concat(prefixCls, "-item-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(prefixCls, "-item-icon-info")]: !isToggleIcon
+    const className = (0, _classnames.default)(`${prefixCls}-item-icon`, {
+      [`${prefixCls}-item-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
+      [`${prefixCls}-item-icon-info`]: !isToggleIcon
     });
     const isOpen = this.adapter.getIsOpen();
     const iconElem = /*#__PURE__*/_react.default.isValidElement(icon) ? withTransition ? /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: "".concat(_constants.cssClasses.PREFIX, "-icon-rotate-").concat(isOpen ? "180" : "0")
+      startClassName: `${_constants.cssClasses.PREFIX}-icon-rotate-${isOpen ? "180" : "0"}`
     }, _ref => {
       let {
         animationClassName
@@ -191,9 +191,9 @@ class SubNav extends _baseComponent.default {
       limitIndent
     } = this.context;
     const isOpen = this.adapter.getIsOpen();
-    const titleCls = (0, _classnames.default)("".concat(prefixCls, "-sub-title"), {
-      ["".concat(prefixCls, "-sub-title-selected")]: this.adapter.getIsSelected(itemKey),
-      ["".concat(prefixCls, "-sub-title-disabled")]: disabled
+    const titleCls = (0, _classnames.default)(`${prefixCls}-sub-title`, {
+      [`${prefixCls}-sub-title-selected`]: this.adapter.getIsSelected(itemKey),
+      [`${prefixCls}-sub-title-disabled`]: disabled
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -245,9 +245,9 @@ class SubNav extends _baseComponent.default {
       onKeyPress: this.handleKeyPress,
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-item-inner")
+      className: `${prefixCls}-item-inner`
     }, placeholderIcons, this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== _constants.strings.MODE_HORIZONTAL ? this.renderIcon(icon, _constants.strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-item-text")
+      className: `${prefixCls}-item-text`
     }, text), this.context.toggleIconPosition === _constants.strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, _constants.strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
 
     return titleDiv;
@@ -266,9 +266,9 @@ class SubNav extends _baseComponent.default {
     } = this.context;
     const isOpen = this.adapter.getIsOpen();
     const isHorizontal = mode === _constants.strings.MODE_HORIZONTAL;
-    const subNavCls = (0, _classnames.default)("".concat(prefixCls, "-sub"), {
-      ["".concat(prefixCls, "-sub-open")]: isOpen,
-      ["".concat(prefixCls, "-sub-popover")]: isCollapsed || isHorizontal
+    const subNavCls = (0, _classnames.default)(`${prefixCls}-sub`, {
+      [`${prefixCls}-sub-open`]: isOpen,
+      [`${prefixCls}-sub-popover`]: isCollapsed || isHorizontal
     });
 
     const ulWithMotion = /*#__PURE__*/_react.default.createElement(_collapsible.default, {
@@ -306,7 +306,7 @@ class SubNav extends _baseComponent.default {
     const isOpen = this.adapter.getIsOpen();
     const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
     const subNavCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-popover")]: isCollapsed
+      [`${prefixCls}-popover`]: isCollapsed
     });
     const dropdownProps = {
       trigger: 'hover',
@@ -364,7 +364,7 @@ class SubNav extends _baseComponent.default {
       itemKey: itemKey,
       forwardRef: this.setItemRef,
       isCollapsed: isCollapsed,
-      className: "".concat(prefixCls, "-sub-wrap"),
+      className: `${prefixCls}-sub-wrap`,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       disabled: disabled,

package/lib/cjs/navigation/index.js

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

package/lib/cjs/notification/index.js

@@ -78,7 +78,7 @@ class NotificationList extends _baseComponent.default {
             return /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
               key: notice.id,
               animationState: isRemoved ? "leave" : "enter",
-              startClassName: "".concat(_constants.cssClasses.NOTICE, "-animation-").concat(isRemoved ? "hide" : "show", "_").concat(position)
+              startClassName: `${_constants.cssClasses.NOTICE}-animation-${isRemoved ? "hide" : "show"}_${position}`
             }, _ref => {
               let {
                 animationClassName,
@@ -214,7 +214,7 @@ class NotificationList extends _baseComponent.default {
   static destroyAll() {
     if (ref) {
       ref.destroyAll();
-      const wrapper = document.querySelector("#".concat(this.wrapperId));
+      const wrapper = document.querySelector(`#${this.wrapperId}`);
 
       _reactDom.default.unmountComponentAtNode(wrapper);
 
@@ -249,7 +249,7 @@ class NotificationList extends _baseComponent.default {
     ['top', 'left', 'bottom', 'right'].forEach(pos => {
       if (pos in noticeInstance) {
         const val = noticeInstance[pos];
-        style[pos] = typeof val === 'number' ? "".concat(val, "px") : val;
+        style[pos] = typeof val === 'number' ? `${val}px` : val;
       }
     });
     return style;

package/lib/cjs/notification/notice.js

@@ -118,8 +118,8 @@ class Notice extends _baseComponent.default {
     };
     let iconType = iconMap[type];
     const iconCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-icon")]: true,
-      ["".concat(prefixCls, "-").concat(type)]: true
+      [`${prefixCls}-icon`]: true,
+      [`${prefixCls}-${type}`]: true
     });
 
     if (icon) {
@@ -161,11 +161,11 @@ class Notice extends _baseComponent.default {
       visible
     } = this.state;
     const wrapper = (0, _classnames.default)(prefixCls, className, {
-      ["".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'
+      [`${prefixCls}-close`]: !visible,
+      [`${prefixCls}-icon-show`]: types.includes(type),
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-${theme}`]: theme === 'light',
+      [`${prefixCls}-rtl`]: direction === 'rtl'
     });
     const titleID = (0, _uuid.getUuidShort)({});
     return (
@@ -182,18 +182,18 @@ class Notice extends _baseComponent.default {
         onAnimationEnd: this.props.onAnimationEnd,
         onAnimationStart: this.props.onAnimationStart
       }, /*#__PURE__*/_react.default.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-inner")
+        className: `${prefixCls}-inner`
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-content-wrapper")
+        className: `${prefixCls}-content-wrapper`
       }, title ? /*#__PURE__*/_react.default.createElement("div", {
         id: titleID,
-        className: "".concat(prefixCls, "-title"),
+        className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, title) : '', content ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-content"),
+        className: `${prefixCls}-content`,
         "x-semi-prop": "content"
       }, content) : ''), showClose && /*#__PURE__*/_react.default.createElement(_iconButton.default, {
-        className: "".concat(prefixCls, "-icon-close"),
+        className: `${prefixCls}-icon-close`,
         type: "tertiary",
         icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
         theme: "borderless",

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

@@ -88,7 +88,7 @@ declare class OverflowList extends BaseComponent<OverflowListProps, OverflowList
         className: string;
         style: {
             maxWidth: string;
-            visibility: "visible" | "hidden";
+            visibility: "hidden" | "visible";
             accentColor?: import("csstype").Property.AccentColor;
             alignContent?: import("csstype").Property.AlignContent;
             alignItems?: import("csstype").Property.AlignItems;

package/lib/cjs/overflowList/index.js

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

package/lib/cjs/pagination/index.js

@@ -164,9 +164,9 @@ class Pagination extends _baseComponent.default {
       prevDisabled
     } = this.state;
     const preClassName = (0, _classnames.default)({
-      ["".concat(prefixCls, "-item")]: true,
-      ["".concat(prefixCls, "-prev")]: true,
-      ["".concat(prefixCls, "-item-disabled")]: prevDisabled
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-prev`]: true,
+      [`${prefixCls}-item-disabled`]: prevDisabled
     });
     return /*#__PURE__*/_react.default.createElement("li", {
       role: "button",
@@ -188,9 +188,9 @@ class Pagination extends _baseComponent.default {
       nextDisabled
     } = this.state;
     const nextClassName = (0, _classnames.default)({
-      ["".concat(prefixCls, "-item")]: true,
-      ["".concat(prefixCls, "-item-disabled")]: nextDisabled,
-      ["".concat(prefixCls, "-next")]: true
+      [`${prefixCls}-item`]: true,
+      [`${prefixCls}-item-disabled`]: nextDisabled,
+      [`${prefixCls}-next`]: true
     });
     return /*#__PURE__*/_react.default.createElement("li", {
       role: "button",
@@ -217,7 +217,7 @@ class Pagination extends _baseComponent.default {
     const {
       pageSize
     } = this.state;
-    const switchCls = (0, _classnames.default)("".concat(prefixCls, "-switch"));
+    const switchCls = (0, _classnames.default)(`${prefixCls}-switch`);
 
     if (!showSizeChanger) {
       return null;
@@ -239,7 +239,7 @@ class Pagination extends _baseComponent.default {
       key: pageSize,
       position: popoverPosition || 'bottomRight',
       clickToHide: true,
-      dropdownClassName: "".concat(prefixCls, "-select-dropdown")
+      dropdownClassName: `${prefixCls}-select-dropdown`
     }, options));
   }
 
@@ -261,14 +261,14 @@ class Pagination extends _baseComponent.default {
 
     const isDisabled = totalPageNum === 1;
     const quickJumpCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-quickjump")]: true,
-      ["".concat(prefixCls, "-quickjump-disabled")]: isDisabled
+      [`${prefixCls}-quickjump`]: true,
+      [`${prefixCls}-quickjump-disabled`]: isDisabled
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: quickJumpCls
     }, /*#__PURE__*/_react.default.createElement("span", null, locale.jumpTo), /*#__PURE__*/_react.default.createElement(_index2.default, {
       value: quickJumpPage,
-      className: "".concat(prefixCls, "-quickjump-input-number"),
+      className: `${prefixCls}-quickjump-input-number`,
       hideButtons: true,
       disabled: isDisabled,
       onBlur: e => this.foundation.handleQuickJumpBlur(),
@@ -289,16 +289,16 @@ class Pagination extends _baseComponent.default {
       popoverZIndex
     } = this.props;
     return pageList.map((page, i) => {
-      const pageListClassName = (0, _classnames.default)("".concat(prefixCls, "-item"), {
-        ["".concat(prefixCls, "-item-active")]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
+      const pageListClassName = (0, _classnames.default)(`${prefixCls}-item`, {
+        [`${prefixCls}-item-active`]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
 
       });
 
       const pageEl = /*#__PURE__*/_react.default.createElement("li", {
-        key: "".concat(page).concat(i),
+        key: `${page}${i}`,
         onClick: () => this.foundation.goPage(page, i),
         className: pageListClassName,
-        "aria-label": page === '...' ? 'More' : "Page ".concat(page),
+        "aria-label": page === '...' ? 'More' : `Page ${page}`,
         "aria-current": currentPage === page ? "page" : false
       }, page);
 
@@ -309,7 +309,7 @@ class Pagination extends _baseComponent.default {
           trigger: "hover",
           // onVisibleChange={visible=>this.handleRestHover(visible, i < 3 ? 'left' : 'right')}
           content: this.renderRestPageList(content),
-          key: "".concat(page).concat(i),
+          key: `${page}${i}`,
           position: popoverPosition,
           zIndex: popoverZIndex
         }, pageEl);
@@ -324,7 +324,7 @@ class Pagination extends _baseComponent.default {
     const {
       direction
     } = this.context;
-    const className = (0, _classnames.default)("".concat(prefixCls, "-rest-item"));
+    const className = (0, _classnames.default)(`${prefixCls}-rest-item`);
     const count = restList.length;
 
     const row = item => {
@@ -335,11 +335,11 @@ class Pagination extends _baseComponent.default {
       const page = restList[index];
       return /*#__PURE__*/_react.default.createElement("div", {
         role: "listitem",
-        key: "".concat(page).concat(index),
+        key: `${page}${index}`,
         className: className,
         onClick: () => this.foundation.goPage(page, index),
         style: style,
-        "aria-label": "".concat(page)
+        "aria-label": `${page}`
       }, page);
     };
 
@@ -349,7 +349,7 @@ class Pagination extends _baseComponent.default {
       /*#__PURE__*/
       // @ts-ignore skip type check cause react-window not update with @types/react 18
       _react.default.createElement(_reactWindow.FixedSizeList, {
-        className: "".concat(prefixCls, "-rest-list"),
+        className: `${prefixCls}-rest-list`,
         itemData: restList,
         itemSize: itemHeight,
         width: 78,
@@ -370,7 +370,7 @@ class Pagination extends _baseComponent.default {
       hoverShowPageSelect,
       showSizeChanger
     } = this.props;
-    const paginationCls = (0, _classnames.default)("".concat(prefixCls, "-small"), prefixCls, className);
+    const paginationCls = (0, _classnames.default)(`${prefixCls}-small`, prefixCls, className);
     const {
       currentPage,
       total,
@@ -388,7 +388,7 @@ class Pagination extends _baseComponent.default {
     const pageList = this.renderRestPageList(pageNumbers);
 
     const page = /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixCls, "-item ").concat(prefixCls, "-item-small")
+      className: `${prefixCls}-item ${prefixCls}-item-small`
     }, currentPage, "/", totalPageNum, " ");
 
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -411,8 +411,8 @@ class Pagination extends _baseComponent.default {
       hideOnSinglePage,
       showSizeChanger
     } = this.props;
-    const paginationCls = (0, _classnames.default)(className, "".concat(prefixCls));
-    const showTotalCls = "".concat(prefixCls, "-total");
+    const paginationCls = (0, _classnames.default)(className, `${prefixCls}`);
+    const showTotalCls = `${prefixCls}-total`;
     const totalPageNum = Math.ceil(total / pageSize);
 
     if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PopconfirmAdapter } from '@douyinfe/semi-foundation/lib/cjs/popconfirm/popconfirmFoundation';
+import PopconfirmFoundation, { PopconfirmAdapter } from '@douyinfe/semi-foundation/lib/cjs/popconfirm/popconfirmFoundation';
 import BaseComponent from '../_base/baseComponent';
-import { PopoverProps } from '../popover';
-import { Position, Trigger } from '../tooltip';
+import Popover, { PopoverProps } from '../popover';
+import { Position, Trigger, RenderContentProps } from '../tooltip';
 import { ButtonProps } from '../button';
 import { Type as ButtonType } from '../button/Button';
 import { ContextValue } from '../configProvider/context';
@@ -12,7 +12,6 @@ export interface PopconfirmProps extends PopoverProps {
     cancelText?: string;
     cancelButtonProps?: ButtonProps;
     cancelType?: ButtonType;
-    content?: React.ReactNode;
     defaultVisible?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
@@ -41,7 +40,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     static propTypes: {
         motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         disabled: PropTypes.Requireable<boolean>;
-        content: PropTypes.Requireable<any>;
+        content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         title: PropTypes.Requireable<any>;
         prefixCls: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
@@ -78,6 +77,9 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         onConfirm: (...args: any[]) => void;
         onClickOutSide: (...args: any[]) => void;
     };
+    footerRef: React.RefObject<HTMLDivElement | null>;
+    popoverRef: React.RefObject<Popover | null>;
+    foundation: PopconfirmFoundation;
     constructor(props: PopconfirmProps);
     context: ContextValue;
     static getDerivedStateFromProps(props: PopconfirmProps, state: PopconfirmState): Partial<PopconfirmState>;
@@ -85,9 +87,11 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     handleCancel: (e: React.MouseEvent) => void;
     handleConfirm: (e: React.MouseEvent) => void;
     handleVisibleChange: (visible: boolean) => void;
-    handleClickOutSide: (e: React.MouseEvent) => any;
+    handleClickOutSide: (e: React.MouseEvent) => void;
     stopImmediatePropagation: (e: React.SyntheticEvent) => void;
     renderControls(): JSX.Element;
-    renderConfirmPopCard(): JSX.Element;
+    renderConfirmPopCard: ({ initialFocusRef }: {
+        initialFocusRef?: RenderContentProps<any>['initialFocusRef'];
+    }) => JSX.Element;
     render(): string | number | boolean | React.ReactFragment | JSX.Element;
 }