@douyinfe/semi-ui 2.27.1 → 2.28.0-beta.1

package/lib/es/modal/ModalContent.js

@@ -64,7 +64,7 @@ export default class ModalContent extends BaseComponent {
       } = props;
 
       if (mask) {
-        const className = cls("".concat(cssClasses.DIALOG, "-mask"), {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        const className = cls(`${cssClasses.DIALOG}-mask`, {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
         });
         return /*#__PURE__*/React.createElement("div", Object.assign({
           key: "mask"
@@ -90,7 +90,7 @@ export default class ModalContent extends BaseComponent {
         });
         closer = /*#__PURE__*/React.createElement(Button, {
           "aria-label": "close",
-          className: "".concat(cssClasses.DIALOG, "-close"),
+          className: `${cssClasses.DIALOG}-close`,
           key: "close-btn",
           onClick: this.close,
           type: "tertiary",
@@ -108,7 +108,7 @@ export default class ModalContent extends BaseComponent {
         icon
       } = this.props;
       return icon ? /*#__PURE__*/React.createElement("span", {
-        className: "".concat(cssClasses.DIALOG, "-icon-wrapper"),
+        className: `${cssClasses.DIALOG}-icon-wrapper`,
         "x-semi-prop": "icon"
       }, icon) : null;
     };
@@ -124,11 +124,11 @@ export default class ModalContent extends BaseComponent {
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       return title === null || title === undefined ? null : /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-header")
+        className: `${cssClasses.DIALOG}-header`
       }, icon, /*#__PURE__*/React.createElement(Typography.Title, {
         heading: 5,
-        className: "".concat(cssClasses.DIALOG, "-title"),
-        id: "".concat(cssClasses.DIALOG, "-title"),
+        className: `${cssClasses.DIALOG}-title`,
+        id: `${cssClasses.DIALOG}-title`,
         "x-semi-prop": "title"
       }, title), closer);
     };
@@ -139,19 +139,19 @@ export default class ModalContent extends BaseComponent {
         children,
         title
       } = this.props;
-      const bodyCls = cls("".concat(cssClasses.DIALOG, "-body"), {
-        ["".concat(cssClasses.DIALOG, "-withIcon")]: this.props.icon
+      const bodyCls = cls(`${cssClasses.DIALOG}-body`, {
+        [`${cssClasses.DIALOG}-withIcon`]: this.props.icon
       });
       const closer = this.renderCloseBtn();
       const icon = this.renderIcon();
       const hasHeader = title !== null && title !== undefined || 'header' in this.props;
       return hasHeader ? /*#__PURE__*/React.createElement("div", {
         className: bodyCls,
-        id: "".concat(cssClasses.DIALOG, "-body"),
+        id: `${cssClasses.DIALOG}-body`,
         style: bodyStyle,
         "x-semi-prop": "children"
       }, children) : /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-body-wrapper")
+        className: `${cssClasses.DIALOG}-body-wrapper`
       }, icon, /*#__PURE__*/React.createElement("div", {
         className: bodyCls,
         style: bodyStyle,
@@ -163,9 +163,9 @@ export default class ModalContent extends BaseComponent {
       const props = __rest(this.props, []);
 
       const style = {};
-      const digCls = cls("".concat(cssClasses.DIALOG), {
-        ["".concat(cssClasses.DIALOG, "-centered")]: props.centered,
-        ["".concat(cssClasses.DIALOG, "-").concat(props.size)]: props.size
+      const digCls = cls(`${cssClasses.DIALOG}`, {
+        [`${cssClasses.DIALOG}-centered`]: props.centered,
+        [`${cssClasses.DIALOG}-${props.size}`]: props.size
       });
 
       if (props.width) {
@@ -185,7 +185,7 @@ export default class ModalContent extends BaseComponent {
       const body = this.renderBody();
       const header = this.renderHeader();
       const footer = props.footer ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClasses.DIALOG, "-footer"),
+        className: `${cssClasses.DIALOG}-footer`,
         "x-semi-prop": "footer"
       }, props.footer) : null;
       const dialogElement =
@@ -201,11 +201,11 @@ export default class ModalContent extends BaseComponent {
         role: "dialog",
         ref: this.modalDialogRef,
         "aria-modal": "true",
-        "aria-labelledby": "".concat(cssClasses.DIALOG, "-title"),
-        "aria-describedby": "".concat(cssClasses.DIALOG, "-body"),
+        "aria-labelledby": `${cssClasses.DIALOG}-title`,
+        "aria-describedby": `${cssClasses.DIALOG}-body`,
         onAnimationEnd: props.onAnimationEnd,
-        className: cls(["".concat(cssClasses.DIALOG, "-content"), props.contentClassName, {
-          ["".concat(cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
+        className: cls([`${cssClasses.DIALOG}-content`, props.contentClassName, {
+          [`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen
         }])
       }, header, body, footer)); // return props.visible ? dialogElement : null;
 
@@ -217,7 +217,7 @@ export default class ModalContent extends BaseComponent {
       prevFocusElement: FocusTrapHandle.getActiveElement()
     };
     this.foundation = new ModalContentFoundation(this.adapter);
-    this.dialogId = "dialog-".concat(uuid++);
+    this.dialogId = `dialog-${uuid++}`;
     this.modalDialogRef = /*#__PURE__*/React.createRef();
   }
 
@@ -328,9 +328,9 @@ export default class ModalContent extends BaseComponent {
       direction
     } = this.context;
     const classList = cls(className, {
-      ["".concat(cssClasses.DIALOG, "-popup")]: getPopupContainer && !maskFixed,
-      ["".concat(cssClasses.DIALOG, "-fixed")]: maskFixed,
-      ["".concat(cssClasses.DIALOG, "-rtl")]: direction === 'rtl'
+      [`${cssClasses.DIALOG}-popup`]: getPopupContainer && !maskFixed,
+      [`${cssClasses.DIALOG}-fixed`]: maskFixed,
+      [`${cssClasses.DIALOG}-rtl`]: direction === 'rtl'
     });
     const containerContext = getContainerContext();
     const elem = /*#__PURE__*/React.createElement("div", {
@@ -338,8 +338,8 @@ export default class ModalContent extends BaseComponent {
     }, this.getMaskElement(), /*#__PURE__*/React.createElement("div", Object.assign({
       role: "none",
       className: cls({
-        ["".concat(cssClasses.DIALOG, "-wrap")]: true,
-        ["".concat(cssClasses.DIALOG, "-wrap-center")]: this.props.centered
+        [`${cssClasses.DIALOG}-wrap`]: true,
+        [`${cssClasses.DIALOG}-wrap-center`]: this.props.centered
       }),
       onClick: maskClosable ? this.onMaskClick : null,
       onMouseUp: maskClosable ? this.onMaskMouseUp : null

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

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

package/lib/es/navigation/CollapseButton.js

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

package/lib/es/navigation/Footer.js

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

package/lib/es/navigation/Item.js

@@ -15,7 +15,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 = "".concat(cssClasses.PREFIX, "-item");
+const clsPrefix = `${cssClasses.PREFIX}-item`;
 export default class NavItem extends BaseComponent {
   constructor(props) {
     super(props);
@@ -121,9 +121,9 @@ export default class NavItem extends BaseComponent {
       iconSize = 'default';
     }
 
-    const className = cls("".concat(clsPrefix, "-icon"), {
-      ["".concat(clsPrefix, "-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(clsPrefix, "-icon-info")]: !isToggleIcon
+    const className = cls(`${clsPrefix}-icon`, {
+      [`${clsPrefix}-icon-toggle-${this.context.toggleIconPosition}`]: isToggleIcon,
+      [`${clsPrefix}-icon-info`]: !isToggleIcon
     });
     return /*#__PURE__*/React.createElement("i", {
       className: className,
@@ -172,13 +172,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: "".concat(cssClasses.PREFIX, "-item-text")
+        className: `${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: "".concat(prefixCls, "-item-link"),
+        className: `${prefixCls}-item-link`,
         href: link,
         tabIndex: -1
       }, linkOptions), itemChildren);
@@ -189,10 +189,10 @@ export default class NavItem extends BaseComponent {
     if (isInSubNav && (isCollapsed || mode === strings.MODE_HORIZONTAL)) {
       const popoverItemCls = cls({
         [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.createElement(Dropdown.Item, {
         selected: selected,
@@ -207,13 +207,13 @@ export default class NavItem extends BaseComponent {
       }, itemChildren);
     } else {
       // Items are divided into normal and sub-wrap
-      const popoverItemCls = cls("".concat(className || "".concat(clsPrefix, "-normal")), {
+      const popoverItemCls = cls(`${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/es/navigation/SubNav.js

@@ -122,14 +122,14 @@ export default class SubNav extends BaseComponent {
       iconSize = 'default';
     }
 
-    const className = cls("".concat(prefixCls, "-item-icon"), {
-      ["".concat(prefixCls, "-item-icon-toggle-").concat(this.context.toggleIconPosition)]: isToggleIcon,
-      ["".concat(prefixCls, "-item-icon-info")]: !isToggleIcon
+    const className = cls(`${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.isValidElement(icon) ? withTransition ? /*#__PURE__*/React.createElement(CSSAnimation, {
       animationState: isOpen ? "enter" : "leave",
-      startClassName: "".concat(cssClasses.PREFIX, "-icon-rotate-").concat(isOpen ? "180" : "0")
+      startClassName: `${cssClasses.PREFIX}-icon-rotate-${isOpen ? "180" : "0"}`
     }, _ref => {
       let {
         animationClassName
@@ -167,9 +167,9 @@ export default class SubNav extends BaseComponent {
       limitIndent
     } = this.context;
     const isOpen = this.adapter.getIsOpen();
-    const titleCls = cls("".concat(prefixCls, "-sub-title"), {
-      ["".concat(prefixCls, "-sub-title-selected")]: this.adapter.getIsSelected(itemKey),
-      ["".concat(prefixCls, "-sub-title-disabled")]: disabled
+    const titleCls = cls(`${prefixCls}-sub-title`, {
+      [`${prefixCls}-sub-title-selected`]: this.adapter.getIsSelected(itemKey),
+      [`${prefixCls}-sub-title-disabled`]: disabled
     });
     let withTransition = false;
     let toggleIconType = '';
@@ -220,9 +220,9 @@ export default class SubNav extends BaseComponent {
       onKeyPress: this.handleKeyPress,
       "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-item-inner")
+      className: `${prefixCls}-item-inner`
     }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && 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: "".concat(prefixCls, "-item-text")
+      className: `${prefixCls}-item-text`
     }, text), this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;
   }
@@ -240,9 +240,9 @@ export default class SubNav extends BaseComponent {
     } = this.context;
     const isOpen = this.adapter.getIsOpen();
     const isHorizontal = mode === strings.MODE_HORIZONTAL;
-    const subNavCls = cls("".concat(prefixCls, "-sub"), {
-      ["".concat(prefixCls, "-sub-open")]: isOpen,
-      ["".concat(prefixCls, "-sub-popover")]: isCollapsed || isHorizontal
+    const subNavCls = cls(`${prefixCls}-sub`, {
+      [`${prefixCls}-sub-open`]: isOpen,
+      [`${prefixCls}-sub-popover`]: isCollapsed || isHorizontal
     });
     const ulWithMotion = /*#__PURE__*/React.createElement(Collapsible, {
       motion: subNavMotion,
@@ -278,7 +278,7 @@ export default class SubNav extends BaseComponent {
     const isOpen = this.adapter.getIsOpen();
     const openKeysIsControlled = this.adapter.getOpenKeysIsControlled();
     const subNavCls = cls({
-      ["".concat(prefixCls, "-popover")]: isCollapsed
+      [`${prefixCls}-popover`]: isCollapsed
     });
     const dropdownProps = {
       trigger: 'hover',
@@ -336,7 +336,7 @@ export default class SubNav extends BaseComponent {
       itemKey: itemKey,
       forwardRef: this.setItemRef,
       isCollapsed: isCollapsed,
-      className: "".concat(prefixCls, "-sub-wrap"),
+      className: `${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, {
-      ["".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 = cls("".concat(prefixCls, "-header-list-outer"), {
-      ["".concat(prefixCls, "-header-list-outer-collapsed")]: isCollapsed
+    const headerListOuterCls = cls(`${prefixCls}-header-list-outer`, {
+      [`${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: "".concat(prefixCls, "-inner")
+      className: `${prefixCls}-inner`
     }, /*#__PURE__*/React.createElement("div", {
       className: headerListOuterCls
     }, headers, /*#__PURE__*/React.createElement("div", {
       style: bodyStyle,
-      className: "".concat(prefixCls, "-list-wrapper")
+      className: `${prefixCls}-list-wrapper`
     }, /*#__PURE__*/React.createElement("ul", {
       role: "menu",
       "aria-orientation": mode,
-      className: "".concat(prefixCls, "-list")
+      className: `${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: "".concat(cssClasses.NOTICE, "-animation-").concat(isRemoved ? "hide" : "show", "_").concat(position)
+              startClassName: `${cssClasses.NOTICE}-animation-${isRemoved ? "hide" : "show"}_${position}`
             }, _ref => {
               let {
                 animationClassName,
@@ -192,7 +192,7 @@ class NotificationList extends BaseComponent {
   static destroyAll() {
     if (ref) {
       ref.destroyAll();
-      const wrapper = document.querySelector("#".concat(this.wrapperId));
+      const wrapper = document.querySelector(`#${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' ? "".concat(val, "px") : val;
+        style[pos] = typeof val === 'number' ? `${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({
-      ["".concat(prefixCls, "-icon")]: true,
-      ["".concat(prefixCls, "-").concat(type)]: true
+      [`${prefixCls}-icon`]: true,
+      [`${prefixCls}-${type}`]: true
     });
 
     if (icon) {
@@ -141,11 +141,11 @@ class Notice extends BaseComponent {
       visible
     } = this.state;
     const wrapper = cls(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 = 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: "".concat(prefixCls, "-inner")
+        className: `${prefixCls}-inner`
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-content-wrapper")
+        className: `${prefixCls}-content-wrapper`
       }, title ? /*#__PURE__*/React.createElement("div", {
         id: titleID,
-        className: "".concat(prefixCls, "-title"),
+        className: `${prefixCls}-title`,
         "x-semi-prop": "title"
       }, title) : '', content ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-content"),
+        className: `${prefixCls}-content`,
         "x-semi-prop": "content"
       }, content) : ''), showClose && /*#__PURE__*/React.createElement(Button, {
-        className: "".concat(prefixCls, "-icon-close"),
+        className: `${prefixCls}-icon-close`,
         type: "tertiary",
         icon: /*#__PURE__*/React.createElement(IconClose, null),
         theme: "borderless",

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

@@ -83,7 +83,7 @@ declare class OverflowList extends BaseComponent<OverflowListProps, OverflowList
     reintersect: (entries: Array<IntersectionObserverEntry>) => void;
     mergeRef: (ref: RefCallback<any> | MutableRefObject<any> | null, node: Element, key: Key) => void;
     renderOverflow: () => ReactNode | ReactNode[];
-    getItemKey: (item: any, defalutKey?: Key) => any;
+    getItemKey: (item: any, defaultKey?: Key) => any;
     renderItemList: () => React.DetailedReactHTMLElement<{
         className: string;
         style: {

package/lib/es/overflowList/index.js

@@ -12,6 +12,7 @@ import ResizeObserver from '../resizeObserver';
 import IntersectionObserver from './intersectionObserver';
 import OverflowListFoundation from '@douyinfe/semi-foundation/lib/es/overflowList/foundation';
 import '@douyinfe/semi-foundation/lib/es/overflowList/overflowList.css';
+import { cloneDeep } from '../_utils';
 const prefixCls = cssClasses.PREFIX;
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
@@ -65,7 +66,7 @@ class OverflowList extends BaseComponent {
       return this.props.overflowRenderer(overflow);
     };
 
-    this.getItemKey = (item, defalutKey) => {
+    this.getItemKey = (item, defaultKey) => {
       const {
         itemKey
       } = this.props;
@@ -74,7 +75,7 @@ class OverflowList extends BaseComponent {
         return itemKey(item);
       }
 
-      return _get(item, itemKey || 'key', defalutKey);
+      return _get(item, itemKey || 'key', defaultKey);
     };
 
     this.renderItemList = () => {
@@ -109,18 +110,18 @@ class OverflowList extends BaseComponent {
               });
             }
           }, /*#__PURE__*/React.createElement("div", {
-            className: "".concat(prefixCls, "-overflow")
+            className: `${prefixCls}-overflow`
           }, child));
         }
       }
 
       const inner = renderMode === RenderMode.SCROLL ? [overflow[0], /*#__PURE__*/React.createElement("div", {
-        className: cls(wrapperClassName, "".concat(prefixCls, "-scroll-wrapper")),
+        className: cls(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,
@@ -128,7 +129,7 @@ class OverflowList extends BaseComponent {
         } = item;
         return /*#__PURE__*/React.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) => {
@@ -145,11 +146,11 @@ class OverflowList extends BaseComponent {
           }
         }, /*#__PURE__*/React.createElement("div", {
           key: key,
-          className: "".concat(prefixCls, "-item")
+          className: `${prefixCls}-item`
         }, child));
       }), collapseFrom === Boundary.END ? overflow : null];
       const list = /*#__PURE__*/React.createElement('div', {
-        className: cls("".concat(prefixCls), className),
+        className: cls(`${prefixCls}`, className),
         style: Object.assign(Object.assign({}, style), renderMode === RenderMode.COLLAPSE ? {
           maxWidth: '100%',
           visibility: overflowStatus === "calculating" ? "hidden" : "visible"
@@ -174,10 +175,10 @@ class OverflowList extends BaseComponent {
 
       const {
         maxCount
-      } = this.state; // 已经按照最大值maxCount渲染完毕，触发真正的渲染。(-1 是overflow部分会占1)
-      // Already rendered maxCount items, trigger the real rendering. (-1 for the overflow part)
+      } = this.state; // 已经按照最大值maxCount渲染完毕，触发真正的渲染
+      // Already rendered maxCount items, trigger the real rendering
 
-      if (this.itemSizeMap.size === maxCount - 1) {
+      if (this.itemSizeMap.size === maxCount) {
         this.setState({
           overflowStatus: 'calculating'
         });
@@ -193,7 +194,7 @@ class OverflowList extends BaseComponent {
       visibleState: new Map(),
       itemSizeMap: new Map(),
       overflowStatus: "calculating",
-      pivot: 0,
+      pivot: -1,
       overflowWidth: 0,
       maxCount: 0
     };
@@ -218,17 +219,27 @@ class OverflowList extends BaseComponent {
       // reset visible state if the above props change.
       newState.direction = OverflowDirection.GROW;
       newState.lastOverflowCount = 0;
+      newState.maxCount = 0;
 
       if (props.renderMode === RenderMode.SCROLL) {
         newState.visible = props.items;
         newState.overflow = [];
       } else {
-        newState.visible = [];
-        newState.overflow = [];
+        let maxCount = props.items.length;
+
+        if (Math.floor(prevState.containerWidth / numbers.MINIMUM_HTML_ELEMENT_WIDTH) !== 0) {
+          maxCount = Math.min(maxCount, Math.floor(prevState.containerWidth / numbers.MINIMUM_HTML_ELEMENT_WIDTH));
+        }
+
+        const isCollapseFromStart = props.collapseFrom === Boundary.START;
+        const visible = isCollapseFromStart ? cloneDeep(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
+        const overflow = isCollapseFromStart ? cloneDeep(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
+        newState.visible = visible;
+        newState.overflow = overflow;
+        newState.maxCount = maxCount;
       }
 
-      newState.pivot = 0;
-      newState.maxCount = 0;
+      newState.pivot = -1;
       newState.overflowStatus = "calculating";
     }
 
@@ -255,6 +266,9 @@ class OverflowList extends BaseComponent {
   componentDidUpdate(prevProps, prevState) {
     if (!_isEqual(prevProps.items, this.props.items)) {
       this.itemRefs = {};
+      this.setState({
+        visibleState: new Map()
+      });
     }
 
     const {
@@ -268,25 +282,7 @@ class OverflowList extends BaseComponent {
       return;
     }
 
-    if (visible.length === 0 && overflow.length === 0 && this.props.items.length !== 0) {
-      // 推测container最多能渲染的数量
-      // Figure out the maximum number of items in this container
-      const maxCount = Math.min(this.props.items.length, Math.floor(containerWidth / numbers.MINIMUM_HTML_ELEMENT_WIDTH)); // 如果collapseFrom是start, 第一次用来计算容量时，倒转列表顺序渲染
-      // If collapseFrom === start, render item from end to start. Figuring out how many items in the end could fit in container.
-
-      const isCollapseFromStart = this.props.collapseFrom === Boundary.START;
-      const visible = isCollapseFromStart ? this.foundation.getReversedItems().slice(0, maxCount) : this.props.items.slice(0, maxCount);
-      const overflow = isCollapseFromStart ? this.foundation.getReversedItems().slice(maxCount) : this.props.items.slice(maxCount);
-      this.setState({
-        overflowStatus: 'calculating',
-        visible,
-        overflow,
-        maxCount: maxCount
-      });
-      this.itemSizeMap.clear();
-    } else {
-      this.foundation.handleCollapseOverflow();
-    }
+    this.foundation.handleCollapseOverflow();
   }
 
   render() {