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

package/lib/cjs/radio/radio.js

@@ -194,29 +194,29 @@ class Radio extends _baseComponent.default {
     const prefix = realPrefixCls || _constants.radioClasses.PREFIX;
     const focusOuter = isCardRadioGroup || isPureCardRadioGroup || isButtonRadio;
     const wrapper = (0, _classnames.default)(prefix, {
-      [`${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,
+      ["".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,
       [className]: Boolean(className),
-      [`${prefix}-focus`]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
+      ["".concat(prefix, "-focus")]: focusVisible && (isCardRadioGroup || isPureCardRadioGroup)
     });
     const groupName = this.isInGroup() && this.context.radioGroup.name;
     const addonCls = (0, _classnames.default)({
-      [`${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
+      ["".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
     }, addonClassName);
 
     const renderContent = () => {
@@ -225,8 +225,8 @@ class Radio extends _baseComponent.default {
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([`${prefix}-content`, {
-          [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup
+        className: (0, _classnames.default)(["".concat(prefix, "-content"), {
+          ["".concat(prefix, "-isCardRadioGroup_content")]: isCardRadioGroup
         }])
       }, children ? /*#__PURE__*/_react.default.createElement("span", {
         className: addonCls,
@@ -234,7 +234,7 @@ class Radio extends _baseComponent.default {
         id: addonId,
         "x-semi-prop": "children"
       }, children) : null, extra && !isButtonRadio ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefix}-extra`,
+        className: "".concat(prefix, "-extra"),
         id: extraId,
         "x-semi-prop": "extra"
       }, extra) : null);

package/lib/cjs/radio/radioGroup.js

@@ -96,11 +96,11 @@ class RadioGroup extends _baseComponent.default {
     const prefix = prefixCls || _constants.radioGroupClasses.PREFIX;
     const prefixClsDisplay = (0, _classnames.default)(className, {
       [prefix]: true,
-      [`${prefix}-wrapper`]: true,
-      [`${prefix}-${direction}`]: direction && !isButtonRadio,
-      [`${prefix}-${direction}-default`]: direction && isDefaultRadio,
-      [`${prefix}-${direction}-card`]: direction && isCardRadio,
-      [`${prefix}-buttonRadio`]: isButtonRadio
+      ["".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
     });
     const realValue = this.state.value;
     let inner;

package/lib/cjs/radio/radioInner.js

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

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

@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         tooltips: PropTypes.Requireable<string[]>;
         id: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;

package/lib/cjs/rating/index.js

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

package/lib/cjs/rating/item.d.ts

@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         disabled: PropTypes.Requireable<boolean>;
         count: PropTypes.Requireable<number>;
         ariaLabelPrefix: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<NonNullable<number | "small" | "default">>;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         'aria-describedby': PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/cjs/rating/item.js

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

package/lib/cjs/scrollList/index.js

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

package/lib/cjs/scrollList/scrollItem.js

@@ -147,7 +147,7 @@ class ScrollItem extends _baseComponent.default {
         const {
           children
         } = list;
-        const reg = new RegExp(`\\s*${selectedCls}\\s*`, 'g');
+        const reg = new RegExp("\\s*".concat(selectedCls, "\\s*"), 'g');
         (0, _map2.default)(children, node => {
           node.className = node.className && node.className.replace(reg, ' ');
 
@@ -157,7 +157,7 @@ class ScrollItem extends _baseComponent.default {
         });
 
         if (selectedNode.className && !blankReg.test(selectedNode.className)) {
-          selectedNode.className += ` ${selectedCls}`;
+          selectedNode.className += " ".concat(selectedCls);
         } else {
           selectedNode.className = selectedCls;
         }
@@ -294,8 +294,8 @@ class ScrollItem extends _baseComponent.default {
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
         const selected = selectedIndex === index;
         const cls = (0, _classnames.default)({
-          [`${_constants.cssClasses.PREFIX}-item-sel`]: selected && mode !== wheelMode,
-          [`${_constants.cssClasses.PREFIX}-item-disabled`]: Boolean(item.disabled)
+          ["".concat(_constants.cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
+          ["".concat(_constants.cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
         });
         let text = '';
 
@@ -339,7 +339,7 @@ class ScrollItem extends _baseComponent.default {
         style
       } = this.props;
       const inner = this.renderItemList();
-      const wrapperCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-item`, className);
+      const wrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-item"), className);
       return /*#__PURE__*/_react.default.createElement("div", {
         style: style,
         className: wrapperCls,
@@ -368,23 +368,23 @@ class ScrollItem extends _baseComponent.default {
         appendCount
       } = this.state;
       const prependList = (0, _times2.default)(prependCount).reduce((arr, num) => {
-        const items = this.renderItemList(`pre_${num}_`);
+        const items = this.renderItemList("pre_".concat(num, "_"));
         arr.unshift(...items);
         return arr;
       }, []);
       const appendList = (0, _times2.default)(appendCount).reduce((arr, num) => {
-        const items = this.renderItemList(`app_${num}_`);
+        const items = this.renderItemList("app_".concat(num, "_"));
         arr.push(...items);
         return arr;
       }, []);
       const inner = this.renderItemList();
-      const listWrapperCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-list-outer`, {
-        [`${_constants.cssClasses.PREFIX}-list-outer-nocycle`]: !cycled
+      const listWrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-list-outer"), {
+        ["".concat(_constants.cssClasses.PREFIX, "-list-outer-nocycle")]: !cycled
       });
-      const wrapperCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-item-wheel`, className);
-      const selectorCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-selector`);
-      const preShadeCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-shade`, `${_constants.cssClasses.PREFIX}-shade-pre`);
-      const postShadeCls = (0, _classnames.default)(`${_constants.cssClasses.PREFIX}-shade`, `${_constants.cssClasses.PREFIX}-shade-post`);
+      const wrapperCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-item-wheel"), className);
+      const selectorCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-selector"));
+      const preShadeCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-shade"), "".concat(_constants.cssClasses.PREFIX, "-shade-pre"));
+      const postShadeCls = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-shade"), "".concat(_constants.cssClasses.PREFIX, "-shade-post"));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: wrapperCls,
         style: style

package/lib/cjs/select/index.js

@@ -410,13 +410,13 @@ class Select extends _baseComponent.default {
       },
       updateScrollTop: index => {
         // eslint-disable-next-line max-len
-        let optionClassName = `.${prefixcls}-option-selected`;
+        let optionClassName = ".".concat(prefixcls, "-option-selected");
 
         if (index !== undefined) {
-          optionClassName = `.${prefixcls}-option:nth-child(${index})`;
+          optionClassName = ".".concat(prefixcls, "-option:nth-child(").concat(index, ")");
         }
 
-        let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`);
+        let destNode = document.querySelector("#".concat(prefixcls, "-").concat(this.selectOptionListID, " ").concat(optionClassName));
 
         if (Array.isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -476,9 +476,9 @@ class Select extends _baseComponent.default {
       filter
     } = this.props;
     const inputPropsCls = (0, _get2.default)(inputProps, 'className');
-    const inputcls = (0, _classnames.default)(`${prefixcls}-input`, {
-      [`${prefixcls}-input-single`]: !multiple,
-      [`${prefixcls}-input-multiple`]: multiple
+    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
+      ["".concat(prefixcls, "-input-single")]: !multiple,
+      ["".concat(prefixcls, "-input-multiple")]: multiple
     }, inputPropsCls);
     const {
       inputValue,
@@ -494,7 +494,7 @@ class Select extends _baseComponent.default {
 
     if (multiple) {
       style = {
-        width: inputValue ? `${inputValue.length * 16}px` : '2px'
+        width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
       };
       selectInputProps.style = style;
     }
@@ -502,7 +502,7 @@ class Select extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement(_index3.default, Object.assign({
       ref: this.inputRef,
       size: size,
-      "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
+      "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
       onFocus: e => {
         // if multiple and filter, when use tab key to let select get focus
         // need to manual update state isFocus to let the focus style take effect
@@ -560,7 +560,7 @@ class Select extends _baseComponent.default {
   }
 
   renderLoading() {
-    const loadingWrapperCls = `${prefixcls}-loading-wrapper`;
+    const loadingWrapperCls = "".concat(prefixcls, "-loading-wrapper");
     return /*#__PURE__*/_react.default.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
@@ -601,7 +601,7 @@ class Select extends _baseComponent.default {
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
         inputValue: inputValue,
-        id: `${this.selectID}-option-${optionIndex}`
+        id: "".concat(this.selectID, "-option-").concat(optionIndex)
       }), option.label);
     }
 
@@ -625,7 +625,7 @@ class Select extends _baseComponent.default {
       }), /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Select"
       }, locale => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: `${prefixcls}-create-tips`
+        className: "".concat(prefixcls, "-create-tips")
       }, locale.createText), option.value)));
 
       return defaultCreateItem;
@@ -729,42 +729,42 @@ class Select extends _baseComponent.default {
       minWidth: dropdownMinWidth
     }, dropdownStyle);
     const optionListCls = (0, _classnames.default)({
-      [`${prefixcls}-option-list`]: true,
-      [`${prefixcls}-option-list-chosen`]: selections.size
+      ["".concat(prefixcls, "-option-list")]: true,
+      ["".concat(prefixcls, "-option-list-chosen")]: selections.size
     });
     const isEmpty = !options.length || !options.some(item => item._show);
     return (
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       _react.default.createElement("div", {
-        id: `${prefixcls}-${this.selectOptionListID}`,
+        id: "".concat(prefixcls, "-").concat(this.selectOptionListID),
         className: (0, _classnames.default)({
           // When emptyContent is null and the option is empty, there is no need for the drop-down option for the user,
           // so there is no need to set padding through this className
-          [`${prefixcls}-option-list-wrapper`]: !(isEmpty && emptyContent === null)
+          ["".concat(prefixcls, "-option-list-wrapper")]: !(isEmpty && emptyContent === null)
         }, dropdownClassName),
         style: style,
         ref: this.setOptionContainerEl,
         onKeyDown: e => this.foundation.handleContainerKeyDown(e)
       }, outerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-outer-top-slot`,
+        className: "".concat(prefixcls, "-option-list-outer-top-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerTopSlot) : null, /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          maxHeight: `${maxHeight}px`
+          maxHeight: "".concat(maxHeight, "px")
         },
         className: optionListCls,
         role: "listbox",
         "aria-multiselectable": multiple,
         onScroll: e => this.foundation.handleListScroll(e)
       }, innerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-inner-top-slot`,
+        className: "".concat(prefixcls, "-option-list-inner-top-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerTopSlot) : null, loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent, innerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-inner-bottom-slot`,
+        className: "".concat(prefixcls, "-option-list-inner-bottom-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: `${prefixcls}-option-list-outer-bottom-slot`,
+        className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerBottomSlot) : null)
     );
@@ -794,13 +794,13 @@ class Select extends _baseComponent.default {
     }
 
     const spanCls = (0, _classnames.default)({
-      [`${prefixcls}-selection-text`]: true,
-      [`${prefixcls}-selection-placeholder`]: !renderText && renderText !== 0,
-      [`${prefixcls}-selection-text-hide`]: inputValue && showInput,
-      [`${prefixcls}-selection-text-inactive`]: !inputValue && showInput // Stack Input & RenderText(opacity 0.4)
+      ["".concat(prefixcls, "-selection-text")]: true,
+      ["".concat(prefixcls, "-selection-placeholder")]: !renderText && renderText !== 0,
+      ["".concat(prefixcls, "-selection-text-hide")]: inputValue && showInput,
+      ["".concat(prefixcls, "-selection-text-inactive")]: !inputValue && showInput // Stack Input & RenderText(opacity 0.4)
 
     });
-    const contentWrapperCls = `${prefixcls}-content-wrapper`;
+    const contentWrapperCls = "".concat(prefixcls, "-content-wrapper");
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/_react.default.createElement("span", {
@@ -885,14 +885,14 @@ class Select extends _baseComponent.default {
     }
 
     const contentWrapperCls = (0, _classnames.default)({
-      [`${prefixcls}-content-wrapper`]: true,
-      [`${prefixcls}-content-wrapper-one-line`]: maxTagCount,
-      [`${prefixcls}-content-wrapper-empty`]: !tags.length
+      ["".concat(prefixcls, "-content-wrapper")]: true,
+      ["".concat(prefixcls, "-content-wrapper-one-line")]: maxTagCount,
+      ["".concat(prefixcls, "-content-wrapper-empty")]: !tags.length
     });
     const spanCls = (0, _classnames.default)({
-      [`${prefixcls}-selection-text`]: true,
-      [`${prefixcls}-selection-placeholder`]: !tags.length,
-      [`${prefixcls}-selection-text-hide`]: tags && tags.length // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
+      ["".concat(prefixcls, "-selection-text")]: true,
+      ["".concat(prefixcls, "-selection-placeholder")]: !tags.length,
+      ["".concat(prefixcls, "-selection-text-hide")]: tags && tags.length // [prefixcls + '-selection-text-inactive']: !inputValue && !tags.length,
 
     });
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
@@ -955,9 +955,9 @@ class Select extends _baseComponent.default {
       suffix
     } = this.props;
     const suffixWrapperCls = (0, _classnames.default)({
-      [`${prefixcls}-suffix`]: true,
-      [`${prefixcls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
-      [`${prefixcls}-suffix-icon`]: (0, _utils2.isSemiIcon)(suffix)
+      ["".concat(prefixcls, "-suffix")]: true,
+      ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+      ["".concat(prefixcls, "-suffix-icon")]: (0, _utils2.isSemiIcon)(suffix)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: suffixWrapperCls,
@@ -973,10 +973,10 @@ class Select extends _baseComponent.default {
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = (0, _classnames.default)({
-      [`${prefixcls}-prefix`]: true,
-      [`${prefixcls}-inset-label`]: insetLabel,
-      [`${prefixcls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
-      [`${prefixcls}-prefix-icon`]: (0, _utils2.isSemiIcon)(labelNode)
+      ["".concat(prefixcls, "-prefix")]: true,
+      ["".concat(prefixcls, "-inset-label")]: insetLabel,
+      ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _isString2.default)(labelNode),
+      ["".concat(prefixcls, "-prefix-icon")]: (0, _utils2.isSemiIcon)(labelNode)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixWrapperCls,
@@ -1018,26 +1018,26 @@ class Select extends _baseComponent.default {
     const filterable = Boolean(filter); // filter（boolean || function）
 
     const selectionCls = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, className, {
-      [`${prefixcls}-open`]: isOpen,
-      [`${prefixcls}-focus`]: isFocus,
-      [`${prefixcls}-disabled`]: disabled,
-      [`${prefixcls}-single`]: !multiple,
-      [`${prefixcls}-multiple`]: multiple,
-      [`${prefixcls}-filterable`]: filterable,
-      [`${prefixcls}-small`]: size === 'small',
-      [`${prefixcls}-large`]: size === 'large',
-      [`${prefixcls}-error`]: validateStatus === 'error',
-      [`${prefixcls}-warning`]: validateStatus === 'warning',
-      [`${prefixcls}-no-arrow`]: !showArrow,
-      [`${prefixcls}-with-prefix`]: prefix || insetLabel,
-      [`${prefixcls}-with-suffix`]: suffix
+      ["".concat(prefixcls, "-open")]: isOpen,
+      ["".concat(prefixcls, "-focus")]: isFocus,
+      ["".concat(prefixcls, "-disabled")]: disabled,
+      ["".concat(prefixcls, "-single")]: !multiple,
+      ["".concat(prefixcls, "-multiple")]: multiple,
+      ["".concat(prefixcls, "-filterable")]: filterable,
+      ["".concat(prefixcls, "-small")]: size === 'small',
+      ["".concat(prefixcls, "-large")]: size === 'large',
+      ["".concat(prefixcls, "-error")]: validateStatus === 'error',
+      ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
+      ["".concat(prefixcls, "-no-arrow")]: !showArrow,
+      ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
+      ["".concat(prefixcls, "-with-suffix")]: suffix
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixcls}-arrow`,
+      className: "".concat(prefixcls, "-arrow"),
       "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
-      className: `${prefixcls}-arrow-empty`
+      className: "".concat(prefixcls, "-arrow-empty")
     });
     const clear = clearIcon ? clearIcon : /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null);
     const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
@@ -1055,11 +1055,11 @@ class Select extends _baseComponent.default {
     }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "selection"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${prefixcls}-selection`)
+      className: (0, _classnames.default)("".concat(prefixcls, "-selection"))
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${prefixcls}-clear`),
+      className: (0, _classnames.default)("".concat(prefixcls, "-clear")),
       onClick: this.onClear
     }, clear) : arrowContent), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "suffix"
@@ -1082,7 +1082,7 @@ class Select extends _baseComponent.default {
         role: "combobox",
         "aria-disabled": disabled,
         "aria-expanded": isOpen,
-        "aria-controls": `${prefixcls}-${this.selectOptionListID}`,
+        "aria-controls": "".concat(prefixcls, "-").concat(this.selectOptionListID),
         "aria-haspopup": "listbox",
         "aria-label": selections.size ? 'selected' : '',
         "aria-invalid": this.props['aria-invalid'],
@@ -1096,7 +1096,7 @@ class Select extends _baseComponent.default {
         style: style,
         id: this.selectID,
         tabIndex: tabIndex,
-        "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
+        "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
         onFocus: e => this.foundation.handleTriggerFocus(e),