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

package/lib/es/overflowList/intersectionObserver.js

@@ -2,6 +2,7 @@ import _isEmpty from "lodash/isEmpty";
 import _isEqual from "lodash/isEqual";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { isHTMLElement } from '../_base/reactUtils';
 export default class ReactIntersectionObserver extends React.PureComponent {
   componentDidMount() {
     const {
@@ -62,7 +63,7 @@ export default class ReactIntersectionObserver extends React.PureComponent {
     Object.keys(items).forEach(key => {
       const node = items[key];
 
-      if (!node) {
+      if (!(node && isHTMLElement(node))) {
         return;
       }
 

package/lib/es/pagination/index.js

@@ -138,9 +138,9 @@ export default class Pagination extends BaseComponent {
       prevDisabled
     } = this.state;
     const preClassName = classNames({
-      ["".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.createElement("li", {
       role: "button",
@@ -162,9 +162,9 @@ export default class Pagination extends BaseComponent {
       nextDisabled
     } = this.state;
     const nextClassName = classNames({
-      ["".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.createElement("li", {
       role: "button",
@@ -191,7 +191,7 @@ export default class Pagination extends BaseComponent {
     const {
       pageSize
     } = this.state;
-    const switchCls = classNames("".concat(prefixCls, "-switch"));
+    const switchCls = classNames(`${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, "".concat(size, " "), pageSizeText)));
+    }, /*#__PURE__*/React.createElement("span", null, `${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: "".concat(prefixCls, "-select-dropdown")
+      dropdownClassName: `${prefixCls}-select-dropdown`
     }, options));
   }
 
@@ -234,14 +234,14 @@ export default class Pagination extends BaseComponent {
 
     const isDisabled = totalPageNum === 1;
     const quickJumpCls = classNames({
-      ["".concat(prefixCls, "-quickjump")]: true,
-      ["".concat(prefixCls, "-quickjump-disabled")]: isDisabled
+      [`${prefixCls}-quickjump`]: true,
+      [`${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: "".concat(prefixCls, "-quickjump-input-number"),
+      className: `${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("".concat(prefixCls, "-item"), {
-        ["".concat(prefixCls, "-item-active")]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
+      const pageListClassName = classNames(`${prefixCls}-item`, {
+        [`${prefixCls}-item-active`]: currentPage === page // [`${prefixCls}-item-rest-opening`]: (i < 3 && isLeftRestHover && page ==='...') || (i > 3 && isRightRestHover && page === '...')
 
       });
       const pageEl = /*#__PURE__*/React.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);
 
@@ -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: "".concat(page).concat(i),
+          key: `${page}${i}`,
           position: popoverPosition,
           zIndex: popoverZIndex
         }, pageEl);
@@ -296,7 +296,7 @@ export default class Pagination extends BaseComponent {
     const {
       direction
     } = this.context;
-    const className = classNames("".concat(prefixCls, "-rest-item"));
+    const className = classNames(`${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: "".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);
     };
 
@@ -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: "".concat(prefixCls, "-rest-list"),
+        className: `${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("".concat(prefixCls, "-small"), prefixCls, className);
+    const paginationCls = classNames(`${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: "".concat(prefixCls, "-item ").concat(prefixCls, "-item-small")
+      className: `${prefixCls}-item ${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, "".concat(prefixCls));
-    const showTotalCls = "".concat(prefixCls, "-total");
+    const paginationCls = classNames(className, `${prefixCls}`);
+    const showTotalCls = `${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, " ".concat(Math.ceil(total / pageSize), " "), locale.page) : null, this.renderPrevBtn(), this.renderPageList(), this.renderNextBtn(), this.renderPageSizeSwitch(locale), this.renderQuickJump(locale));
+    }, locale.total, ` ${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, {
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+      [`${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: "".concat(prefixCls, "-inner")
+        className: `${prefixCls}-inner`
       }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header")
+        className: `${prefixCls}-header`
       }, /*#__PURE__*/React.createElement("i", {
-        className: "".concat(prefixCls, "-header-icon"),
+        className: `${prefixCls}-header-icon`,
         "x-semi-prop": "icon"
       }, /*#__PURE__*/React.isValidElement(icon) ? icon : null), /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header-body")
+        className: `${prefixCls}-header-body`
       }, showTitle ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-header-title"),
+        className: `${prefixCls}-header-title`,
         "x-semi-prop": "title"
       }, title) : null), /*#__PURE__*/React.createElement(Button, {
-        className: "".concat(prefixCls, "-btn-close"),
+        className: `${prefixCls}-btn-close`,
         icon: /*#__PURE__*/React.createElement(IconClose, null),
         size: "small",
         theme: 'borderless',
         type: cancelType,
         onClick: this.handleCancel
       })), showContent ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-body"),
+        className: `${prefixCls}-body`,
         "x-semi-prop": "content"
       }, content) : null, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-footer")
+        className: `${prefixCls}-footer`
       }, this.renderControls())))
     );
   }

package/lib/es/popover/index.js

@@ -40,7 +40,7 @@ class Popover extends React.PureComponent {
         direction
       } = this.context;
       const popCardCls = classNames(prefixCls, contentClassName, {
-        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+        [`${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: "".concat(prefixCls, "-content")
+        className: `${prefixCls}-content`
       }, contentNode));
     };
 

package/lib/es/progress/index.js

@@ -102,9 +102,9 @@ class Progress extends Component {
       percentNumber
     } = this.state;
     const classNames = {
-      wrapper: cls("".concat(prefixCls, "-circle"), className),
-      svg: cls("".concat(prefixCls, "-circle-ring")),
-      circle: cls("".concat(prefixCls, "-circle-ring-inner"))
+      wrapper: cls(`${prefixCls}-circle`, className),
+      svg: cls(`${prefixCls}-circle-ring`),
+      circle: cls(`${prefixCls}-circle-ring-inner`)
     };
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber);
@@ -127,7 +127,7 @@ class Progress extends Component {
     const circumference = radius * 2 * Math.PI;
     const strokeDashoffset = (1 - perc / 100) * circumference; // Offset
 
-    const strokeDasharray = "".concat(circumference, " ").concat(circumference);
+    const strokeDasharray = `${circumference} ${circumference}`;
     const text = format(percNumber);
     return /*#__PURE__*/React.createElement("div", {
       id: id,
@@ -170,7 +170,7 @@ class Progress extends Component {
       cy: cy,
       "aria-hidden": true
     })), showInfo && size !== 'small' ? /*#__PURE__*/React.createElement("span", {
-      className: "".concat(prefixCls, "-circle-text")
+      className: `${prefixCls}-circle-text`
     }, text) : null);
   }
 
@@ -223,14 +223,14 @@ class Progress extends Component {
       percentNumber
     } = this.state;
     const progressWrapperCls = cls(prefixCls, className, {
-      ["".concat(prefixCls, "-horizontal")]: direction === strings.DEFAULT_DIRECTION,
-      ["".concat(prefixCls, "-vertical")]: direction !== strings.DEFAULT_DIRECTION,
-      ["".concat(prefixCls, "-large")]: size === 'large'
+      [`${prefixCls}-horizontal`]: direction === strings.DEFAULT_DIRECTION,
+      [`${prefixCls}-vertical`]: direction !== strings.DEFAULT_DIRECTION,
+      [`${prefixCls}-large`]: size === 'large'
     });
     const progressTrackCls = cls({
-      ["".concat(prefixCls, "-track")]: true
+      [`${prefixCls}-track`]: true
     });
-    const innerCls = cls("".concat(prefixCls, "-track-inner"));
+    const innerCls = cls(`${prefixCls}-track-inner`);
     const perc = this.calcPercent(percent);
     const percNumber = this.calcPercent(percentNumber); // parse stroke & generate gradients
 
@@ -241,9 +241,9 @@ class Progress extends Component {
     };
 
     if (direction === strings.DEFAULT_DIRECTION) {
-      innerStyle.width = "".concat(perc, "%");
+      innerStyle.width = `${perc}%`;
     } else {
-      innerStyle.height = "".concat(perc, "%");
+      innerStyle.height = `${perc}%`;
     }
 
     const text = format(percNumber);
@@ -269,7 +269,7 @@ class Progress extends Component {
       style: innerStyle,
       "aria-hidden": true
     })), showInfo ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-line-text")
+      className: `${prefixCls}-line-text`
     }, text) : null);
   }
 
@@ -315,7 +315,7 @@ Progress.propTypes = {
 Progress.defaultProps = {
   className: '',
   direction: strings.DEFAULT_DIRECTION,
-  format: text => "".concat(text, "%"),
+  format: text => `${text}%`,
   motion: true,
   orbitStroke: 'var(--semi-color-fill-0)',
   percent: 0,

package/lib/es/radio/radio.js

@@ -174,29 +174,29 @@ class Radio extends BaseComponent {
     const prefix = realPrefixCls || css.PREFIX;
     const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
     const wrapper = cls(prefix, {
-      ["".concat(prefix, "-disabled")]: isDisabled,
-      ["".concat(prefix, "-checked")]: realChecked,
-      ["".concat(prefix, "-").concat(displayMode)]: Boolean(displayMode),
-      ["".concat(prefix, "-buttonRadioComponent")]: isButtonRadioComponent,
-      ["".concat(prefix, "-buttonRadioGroup")]: isButtonRadioGroup,
-      ["".concat(prefix, "-buttonRadioGroup-").concat(buttonSize)]: isButtonRadioGroup && buttonSize,
-      ["".concat(prefix, "-cardRadioGroup")]: isCardRadioGroup,
-      ["".concat(prefix, "-cardRadioGroup_disabled")]: isDisabled && isCardRadioGroup,
-      ["".concat(prefix, "-cardRadioGroup_checked")]: isCardRadioGroup && realChecked && !isDisabled,
-      ["".concat(prefix, "-cardRadioGroup_checked_disabled")]: isCardRadioGroup && realChecked && isDisabled,
-      ["".concat(prefix, "-cardRadioGroup_hover")]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
+      [`${prefix}-disabled`]: isDisabled,
+      [`${prefix}-checked`]: realChecked,
+      [`${prefix}-${displayMode}`]: Boolean(displayMode),
+      [`${prefix}-buttonRadioComponent`]: isButtonRadioComponent,
+      [`${prefix}-buttonRadioGroup`]: isButtonRadioGroup,
+      [`${prefix}-buttonRadioGroup-${buttonSize}`]: isButtonRadioGroup && buttonSize,
+      [`${prefix}-cardRadioGroup`]: isCardRadioGroup,
+      [`${prefix}-cardRadioGroup_disabled`]: isDisabled && isCardRadioGroup,
+      [`${prefix}-cardRadioGroup_checked`]: isCardRadioGroup && realChecked && !isDisabled,
+      [`${prefix}-cardRadioGroup_checked_disabled`]: isCardRadioGroup && realChecked && isDisabled,
+      [`${prefix}-cardRadioGroup_hover`]: isCardRadioGroup && !realChecked && isHover && !isDisabled,
       [className]: Boolean(className),
-      ["".concat(prefix, "-focus")]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
+      [`${prefix}-focus`]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
     });
     const groupName = this.isInGroup() && this.context.radioGroup.name;
     const addonCls = cls({
-      ["".concat(prefix, "-addon")]: !isButtonRadio,
-      ["".concat(prefix, "-addon-buttonRadio")]: isButtonRadio,
-      ["".concat(prefix, "-addon-buttonRadio-checked")]: isButtonRadio && realChecked,
-      ["".concat(prefix, "-addon-buttonRadio-disabled")]: isButtonRadio && isDisabled,
-      ["".concat(prefix, "-addon-buttonRadio-hover")]: isButtonRadio && !realChecked && !isDisabled && isHover,
-      ["".concat(prefix, "-addon-buttonRadio-").concat(buttonSize)]: isButtonRadio && buttonSize,
-      ["".concat(prefix, "-focus")]: focusVisible && isButtonRadio
+      [`${prefix}-addon`]: !isButtonRadio,
+      [`${prefix}-addon-buttonRadio`]: isButtonRadio,
+      [`${prefix}-addon-buttonRadio-checked`]: isButtonRadio && realChecked,
+      [`${prefix}-addon-buttonRadio-disabled`]: isButtonRadio && isDisabled,
+      [`${prefix}-addon-buttonRadio-hover`]: isButtonRadio && !realChecked && !isDisabled && isHover,
+      [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
+      [`${prefix}-focus`]: focusVisible && isButtonRadio
     }, addonClassName);
 
     const renderContent = () => {
@@ -205,8 +205,8 @@ class Radio extends BaseComponent {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: cls(["".concat(prefix, "-content"), {
-          ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
+        className: cls([`${prefix}-content`, {
+          [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup
         }])
       }, children ? /*#__PURE__*/React.createElement("span", {
         className: addonCls,
@@ -214,7 +214,7 @@ class Radio extends BaseComponent {
         id: addonId,
         "x-semi-prop": "children"
       }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefix, "-extra"),
+        className: `${prefix}-extra`,
         id: extraId,
         "x-semi-prop": "extra"
       }, extra) : null);

package/lib/es/radio/radioGroup.js

@@ -79,11 +79,11 @@ class RadioGroup extends BaseComponent {
     const prefix = prefixCls || css.PREFIX;
     const prefixClsDisplay = classnames(className, {
       [prefix]: true,
-      ["".concat(prefix, "-wrapper")]: true,
-      ["".concat(prefix, "-").concat(direction)]: direction && !isButtonRadio,
-      ["".concat(prefix, "-").concat(direction, "-default")]: direction && isDefaultRadio,
-      ["".concat(prefix, "-").concat(direction, "-card")]: direction && isCardRadio,
-      ["".concat(prefix, "-buttonRadio")]: isButtonRadio
+      [`${prefix}-wrapper`]: true,
+      [`${prefix}-${direction}`]: direction && !isButtonRadio,
+      [`${prefix}-${direction}-default`]: direction && isDefaultRadio,
+      [`${prefix}-${direction}-card`]: direction && isCardRadio,
+      [`${prefix}-buttonRadio`]: isButtonRadio
     });
     const realValue = this.state.value;
     let inner;

package/lib/es/radio/radioInner.js

@@ -82,15 +82,15 @@ class RadioInner extends BaseComponent {
     } = this.state;
     const prefix = this.props.prefixCls || css.PREFIX;
     const wrapper = classnames({
-      ["".concat(prefix, "-inner")]: true,
-      ["".concat(prefix, "-inner-checked")]: Boolean(checked),
-      ["".concat(prefix, "-inner-buttonRadio")]: isButtonRadio,
-      ["".concat(prefix, "-inner-pureCardRadio")]: isPureCardRadioGroup
+      [`${prefix}-inner`]: true,
+      [`${prefix}-inner-checked`]: Boolean(checked),
+      [`${prefix}-inner-buttonRadio`]: isButtonRadio,
+      [`${prefix}-inner-pureCardRadio`]: isPureCardRadioGroup
     });
     const inner = classnames({
-      ["".concat(prefix, "-focus")]: focusInner,
-      ["".concat(prefix, "-focus-border")]: focusInner && !checked,
-      ["".concat(prefix, "-inner-display")]: !isButtonRadio
+      [`${prefix}-focus`]: focusInner,
+      [`${prefix}-focus-border`]: focusInner && !checked,
+      [`${prefix}-inner-display`]: !isButtonRadio
     });
     return /*#__PURE__*/React.createElement("span", {
       className: wrapper

package/lib/es/rating/index.js

@@ -119,7 +119,7 @@ export default class Rating extends BaseComponent {
           ref: this.saveRef(ind),
           index: ind,
           count: count,
-          prefixCls: "".concat(prefixCls, "-star"),
+          prefixCls: `${prefixCls}-star`,
           allowHalf: allowHalf,
           value: hoverValue === undefined ? value : hoverValue,
           onClick: disabled ? noop : this.onClick,
@@ -141,7 +141,7 @@ export default class Rating extends BaseComponent {
             visible: showTips,
             trigger: "custom",
             content: text,
-            key: "".concat(ind, "-").concat(showTips)
+            key: `${ind}-${showTips}`
           }, content);
         }
 
@@ -279,11 +279,11 @@ export default class Rating extends BaseComponent {
       emptyStarFocusVisible
     } = this.state;
     const ariaLabelPrefix = this.getAriaLabelPrefix();
-    const ariaLabel = "Rating: ".concat(value, " of ").concat(count, " ").concat(ariaLabelPrefix).concat(value === 1 ? '' : 's', ",");
+    const ariaLabel = `Rating: ${value} of ${count} ${ariaLabelPrefix}${value === 1 ? '' : 's'},`;
     const itemList = this.getItemList(ariaLabelPrefix);
     const listCls = cls(prefixCls, {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-focus")]: emptyStarFocusVisible
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-focus`]: emptyStarFocusVisible
     }, className);
     return (
       /*#__PURE__*/

package/lib/es/rating/item.js

@@ -128,9 +128,9 @@ export default class Item extends BaseComponent {
     const isFull = starValue <= value;
     const isCustomSize = typeof size === 'number';
     const starCls = cls(prefixCls, {
-      ["".concat(prefixCls, "-half")]: isHalf,
-      ["".concat(prefixCls, "-full")]: isFull,
-      ["".concat(prefixCls, "-").concat(size)]: !isCustomSize
+      [`${prefixCls}-half`]: isHalf,
+      [`${prefixCls}-full`]: isFull,
+      [`${prefixCls}-${size}`]: !isCustomSize
     });
     const sizeStyle = isCustomSize ? {
       width: size,
@@ -145,9 +145,9 @@ export default class Item extends BaseComponent {
       }
     });
     const isEmpty = index === count;
-    const starWrapCls = cls("".concat(prefixCls, "-wrapper"), {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(cssClasses.PREFIX, "-focus")]: (firstStarFocus || secondStarFocus) && value !== 0
+    const starWrapCls = cls(`${prefixCls}-wrapper`, {
+      [`${prefixCls}-disabled`]: disabled,
+      [`${cssClasses.PREFIX}-focus`]: (firstStarFocus || secondStarFocus) && value !== 0
     });
     const starWrapProps = {
       onClick: disabled ? null : this.onClick,
@@ -163,10 +163,10 @@ export default class Item extends BaseComponent {
       'aria-posinset': 2 * index + 1,
       'aria-setsize': AriaSetSize,
       'aria-disabled': disabled,
-      'aria-label': "".concat(index + 0.5, " ").concat(ariaLabelPrefix, "s"),
+      'aria-label': `${index + 0.5} ${ariaLabelPrefix}s`,
       'aria-labelledby': this.props['aria-describedby'],
       'aria-describedby': this.props['aria-describedby'],
-      className: cls("".concat(prefixCls, "-first"), "".concat(cssClasses.PREFIX, "-no-focus")),
+      className: cls(`${prefixCls}-first`, `${cssClasses.PREFIX}-no-focus`),
       tabIndex: !disabled && value === index + 0.5 ? 0 : -1,
       onFocus: e => {
         this.onFocus(e, 'first');
@@ -183,10 +183,10 @@ export default class Item extends BaseComponent {
       'aria-posinset': allowHalf ? 2 * (index + 1) : index + 1,
       'aria-setsize': AriaSetSize,
       'aria-disabled': disabled,
-      'aria-label': "".concat(isEmpty ? 0 : index + 1, " ").concat(ariaLabelPrefix).concat(index === 0 ? '' : 's'),
+      'aria-label': `${isEmpty ? 0 : index + 1} ${ariaLabelPrefix}${index === 0 ? '' : 's'}`,
       'aria-labelledby': this.props['aria-describedby'],
       'aria-describedby': this.props['aria-describedby'],
-      className: cls("".concat(prefixCls, "-second"), "".concat(cssClasses.PREFIX, "-no-focus")),
+      className: cls(`${prefixCls}-second`, `${cssClasses.PREFIX}-no-focus`),
       tabIndex: secondStarTabIndex,
       onFocus: e => {
         this.onFocus(e, 'second');
@@ -201,7 +201,7 @@ export default class Item extends BaseComponent {
       key: index
     }, /*#__PURE__*/React.createElement("div", Object.assign({}, starWrapProps), allowHalf && !isEmpty && /*#__PURE__*/React.createElement("div", Object.assign({}, firstStarProps, {
       style: {
-        width: "".concat(firstWidth * 100, "%")
+        width: `${firstWidth * 100}%`
       }
     }), content), /*#__PURE__*/React.createElement("div", Object.assign({}, secondStarProps, {
       "x-semi-prop": "character"

package/lib/es/scrollList/index.js

@@ -27,7 +27,7 @@ class ScrollList extends BaseComponent {
       [prefixCls || cssClasses.PREFIX]: true
     });
     const clsHeader = classnames({
-      ["".concat(prefixCls || cssClasses.PREFIX, "-header")]: true
+      [`${prefixCls || cssClasses.PREFIX}-header`]: true
     });
     return /*#__PURE__*/React.createElement("div", {
       className: clsWrapper,
@@ -35,18 +35,18 @@ class ScrollList extends BaseComponent {
     }, header ? /*#__PURE__*/React.createElement("div", {
       className: clsHeader
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsHeader, "-title"),
+      className: `${clsHeader}-title`,
       "x-semi-prop": this.props['x-semi-header-alias'] || "header"
     }, header), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-line")
+      className: `${clsWrapper}-line`
     })) : null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-body"),
+      className: `${clsWrapper}-body`,
       style: {
         height: bodyHeight ? bodyHeight : ''
       },
       "x-semi-prop": "children"
     }, children), footer ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(clsWrapper, "-footer"),
+      className: `${clsWrapper}-footer`,
       "x-semi-prop": this.props['x-semi-footer-alias'] || "footer"
     }, footer) : null);
   }