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

package/lib/cjs/select/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -35,9 +37,15 @@ var _index = _interopRequireDefault(require("../tag/index"));
 
 var _group = _interopRequireDefault(require("../tag/group"));
 
+var _index2 = _interopRequireDefault(require("../overflowList/index"));
+
+var _index3 = _interopRequireDefault(require("../space/index"));
+
+var _text = _interopRequireDefault(require("../typography/text"));
+
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
-var _index2 = _interopRequireDefault(require("../popover/index"));
+var _index4 = _interopRequireDefault(require("../popover/index"));
 
 var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
 
@@ -49,7 +57,7 @@ var _utils = require("./utils");
 
 var _virtualRow = _interopRequireDefault(require("./virtualRow"));
 
-var _index3 = _interopRequireDefault(require("../input/index"));
+var _index5 = _interopRequireDefault(require("../input/index"));
 
 var _option = _interopRequireDefault(require("./option"));
 
@@ -155,7 +163,8 @@ class Select extends _baseComponent.default {
       optionGroups: [],
       isHovering: false,
       isFocusInContainer: false,
-      isFullTags: false
+      isFullTags: false,
+      overflowItemCount: 0
     };
     /* Generate random string */
 
@@ -380,6 +389,11 @@ class Select extends _baseComponent.default {
           isFocus
         });
       },
+      updateOverflowItemCount: overflowItemCount => {
+        this.setState({
+          overflowItemCount
+        });
+      },
       focusTrigger: () => {
         try {
           const {
@@ -410,13 +424,13 @@ class Select extends _baseComponent.default {
       },
       updateScrollTop: index => {
         // eslint-disable-next-line max-len
-        let optionClassName = ".".concat(prefixcls, "-option-selected");
+        let optionClassName = `.${prefixcls}-option-selected`;
 
         if (index !== undefined) {
-          optionClassName = ".".concat(prefixcls, "-option:nth-child(").concat(index, ")");
+          optionClassName = `.${prefixcls}-option:nth-child(${index})`;
         }
 
-        let destNode = document.querySelector("#".concat(prefixcls, "-").concat(this.selectOptionListID, " ").concat(optionClassName));
+        let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`);
 
         if (Array.isArray(destNode)) {
           // eslint-disable-next-line prefer-destructuring
@@ -476,9 +490,9 @@ class Select extends _baseComponent.default {
       filter
     } = this.props;
     const inputPropsCls = (0, _get2.default)(inputProps, 'className');
-    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
-      ["".concat(prefixcls, "-input-single")]: !multiple,
-      ["".concat(prefixcls, "-input-multiple")]: multiple
+    const inputcls = (0, _classnames.default)(`${prefixcls}-input`, {
+      [`${prefixcls}-input-single`]: !multiple,
+      [`${prefixcls}-input-multiple`]: multiple
     }, inputPropsCls);
     const {
       inputValue,
@@ -494,15 +508,15 @@ class Select extends _baseComponent.default {
 
     if (multiple) {
       style = {
-        width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
+        width: inputValue ? `${inputValue.length * 16}px` : '2px'
       };
       selectInputProps.style = style;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_index3.default, Object.assign({
+    return /*#__PURE__*/_react.default.createElement(_index5.default, Object.assign({
       ref: this.inputRef,
       size: size,
-      "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
+      "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${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 +574,7 @@ class Select extends _baseComponent.default {
   }
 
   renderLoading() {
-    const loadingWrapperCls = "".concat(prefixcls, "-loading-wrapper");
+    const loadingWrapperCls = `${prefixcls}-loading-wrapper`;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
@@ -601,7 +615,7 @@ class Select extends _baseComponent.default {
         key: option.key || option.label + option.value + optionIndex,
         renderOptionItem: renderOptionItem,
         inputValue: inputValue,
-        id: "".concat(this.selectID, "-option-").concat(optionIndex)
+        id: `${this.selectID}-option-${optionIndex}`
       }), option.label);
     }
 
@@ -625,7 +639,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: "".concat(prefixcls, "-create-tips")
+        className: `${prefixcls}-create-tips`
       }, locale.createText), option.value)));
 
       return defaultCreateItem;
@@ -729,42 +743,42 @@ class Select extends _baseComponent.default {
       minWidth: dropdownMinWidth
     }, dropdownStyle);
     const optionListCls = (0, _classnames.default)({
-      ["".concat(prefixcls, "-option-list")]: true,
-      ["".concat(prefixcls, "-option-list-chosen")]: selections.size
+      [`${prefixcls}-option-list`]: true,
+      [`${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: "".concat(prefixcls, "-").concat(this.selectOptionListID),
+        id: `${prefixcls}-${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
-          ["".concat(prefixcls, "-option-list-wrapper")]: !(isEmpty && emptyContent === null)
+          [`${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: "".concat(prefixcls, "-option-list-outer-top-slot"),
+        className: `${prefixcls}-option-list-outer-top-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerTopSlot) : null, /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          maxHeight: "".concat(maxHeight, "px")
+          maxHeight: `${maxHeight}px`
         },
         className: optionListCls,
         role: "listbox",
         "aria-multiselectable": multiple,
         onScroll: e => this.foundation.handleListScroll(e)
       }, innerTopSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-inner-top-slot"),
+        className: `${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: "".concat(prefixcls, "-option-list-inner-bottom-slot"),
+        className: `${prefixcls}-option-list-inner-bottom-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
+        className: `${prefixcls}-option-list-outer-bottom-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerBottomSlot) : null)
     );
@@ -794,13 +808,13 @@ class Select extends _baseComponent.default {
     }
 
     const spanCls = (0, _classnames.default)({
-      ["".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)
+      [`${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)
 
     });
-    const contentWrapperCls = "".concat(prefixcls, "-content-wrapper");
+    const contentWrapperCls = `${prefixcls}-content-wrapper`;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/_react.default.createElement("span", {
@@ -809,22 +823,172 @@ class Select extends _baseComponent.default {
     }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
   }
 
-  renderMultipleSelection(selections, filterable) {
+  renderTag(item, i, isCollapseItem) {
+    const {
+      size,
+      disabled: selectDisabled
+    } = this.props;
+    let {
+      renderSelectedItem
+    } = this.props;
+    const label = item[0];
+    const {
+      value
+    } = item[1];
+    const disabled = item[1].disabled || selectDisabled;
+
+    const onClose = (tagContent, e) => {
+      if (e && typeof e.preventDefault === 'function') {
+        e.preventDefault(); // make sure that tag will not hidden immediately in controlled mode
+      }
+
+      this.foundation.removeTag({
+        label,
+        value
+      });
+    };
+
+    if (typeof renderSelectedItem === 'undefined') {
+      renderSelectedItem = optionNode => ({
+        isRenderInTag: true,
+        content: optionNode.label
+      });
+    }
+
+    const {
+      content,
+      isRenderInTag
+    } = renderSelectedItem(item[1], {
+      index: i,
+      disabled,
+      onClose
+    });
+    const basic = {
+      disabled,
+      closable: !disabled,
+      onClose
+    };
+    const realContent = isCollapseItem && !(0, _isFunction2.default)(this.props.renderSelectedItem) ? /*#__PURE__*/_react.default.createElement(_text.default, {
+      size: 'small',
+      ellipsis: {
+        rows: 1,
+        showTooltip: {
+          type: 'popover',
+          opts: {
+            style: {
+              width: 'auto',
+              fontSize: 12
+            }
+          }
+        }
+      }
+    }, content) : content;
+
+    if (isRenderInTag) {
+      return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, basic, {
+        color: "white",
+        size: size || 'large',
+        key: value,
+        style: {
+          maxWidth: '100%'
+        }
+      }), realContent);
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: value
+      }, realContent);
+    }
+  }
+
+  renderNTag(n, restTags) {
+    const {
+      size,
+      showRestTagsPopover,
+      restTagsPopoverProps
+    } = this.props;
+
+    let nTag = /*#__PURE__*/_react.default.createElement(_index.default, {
+      closable: false,
+      size: size || 'large',
+      color: 'grey',
+      className: `${prefixcls}-content-wrapper-collapse-tag`,
+      key: `_+${n}`,
+      style: {
+        marginRight: 0,
+        flexShrink: 0
+      }
+    }, "+", n);
+
+    if (showRestTagsPopover) {
+      nTag = /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({
+        showArrow: true,
+        content: /*#__PURE__*/_react.default.createElement(_index3.default, {
+          spacing: 2,
+          wrap: true,
+          style: {
+            maxWidth: '400px'
+          }
+        }, restTags.map((tag, index) => this.renderTag(tag, index))),
+        trigger: "hover",
+        position: "top",
+        autoAdjustOverflow: true
+      }, restTagsPopoverProps, {
+        key: `_+${n}_Popover`
+      }), nTag);
+    }
+
+    return nTag;
+  }
+
+  renderOverflow(items, index) {
+    const isCollapse = true;
+    return items.length && items[0] ? this.renderTag(items[0], index, isCollapse) : null;
+  }
+
+  handleOverflow(items) {
+    const {
+      overflowItemCount,
+      selections
+    } = this.state;
+    const {
+      maxTagCount
+    } = this.props;
+    const maxVisibleCount = selections.size - maxTagCount;
+    const newOverFlowItemCount = maxVisibleCount > 0 ? maxVisibleCount + items.length - 1 : items.length - 1;
+
+    if (items.length > 1 && overflowItemCount !== newOverFlowItemCount) {
+      this.foundation.updateOverflowItemCount(selections.size, newOverFlowItemCount);
+    }
+  }
+
+  renderCollapsedTags(selections, length) {
+    const {
+      overflowItemCount
+    } = this.state;
+    const normalTags = typeof length === 'number' ? selections.slice(0, length) : selections;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: `${prefixcls}-content-wrapper-collapse`
+    }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      items: normalTags,
+      overflowRenderer: overflowItems => this.renderOverflow(overflowItems, length - 1),
+      onOverflow: overflowItems => this.handleOverflow(overflowItems),
+      visibleItemRenderer: (item, index) => this.renderTag(item, index)
+    }), overflowItemCount > 0 && this.renderNTag(overflowItemCount, selections.slice(selections.length - overflowItemCount)));
+  }
+
+  renderOneLineTags(selectedItems, n) {
     let {
       renderSelectedItem
     } = this.props;
     const {
       showRestTagsPopover,
       restTagsPopoverProps,
-      placeholder,
       maxTagCount
     } = this.props;
     const {
-      inputValue,
       isFullTags
     } = this.state;
-    const renderTags = [];
-    const selectedItems = [...selections];
+    let tagContent;
 
     if (typeof renderSelectedItem === 'undefined') {
       renderSelectedItem = optionNode => ({
@@ -833,74 +997,87 @@ class Select extends _baseComponent.default {
       });
     }
 
-    let mapItems = [];
-    let tags = [];
-    let tagContent;
-
-    if (!(0, _isNumber2.default)(maxTagCount)) {
-      // maxTagCount is not set, all tags are displayed
-      mapItems = selectedItems;
-      tags = mapItems.map((item, i) => {
+    if (showRestTagsPopover) {
+      // showRestTagsPopover = true，
+      const mapItems = isFullTags ? selectedItems : selectedItems.slice(0, maxTagCount);
+      const tags = mapItems.map((item, i) => {
         return this.getTagItem(item, i, renderSelectedItem);
       });
-      tagContent = tags;
+      tagContent = /*#__PURE__*/_react.default.createElement(_group.default, {
+        tagList: tags,
+        maxTagCount: n,
+        restCount: isFullTags ? undefined : selectedItems.length - maxTagCount,
+        size: "large",
+        mode: "custom",
+        showPopover: showRestTagsPopover,
+        popoverProps: restTagsPopoverProps,
+        onPlusNMouseEnter: () => {
+          this.foundation.updateIsFullTags();
+        }
+      });
     } else {
-      // maxTagCount is set
-      if (showRestTagsPopover) {
-        // showRestTagsPopover = true，
-        mapItems = isFullTags ? selectedItems : selectedItems.slice(0, maxTagCount);
-        tags = mapItems.map((item, i) => {
-          return this.getTagItem(item, i, renderSelectedItem);
-        });
-        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
-        tagContent = /*#__PURE__*/_react.default.createElement(_group.default, {
-          tagList: tags,
-          maxTagCount: n,
-          restCount: isFullTags ? undefined : selectedItems.length - maxTagCount,
-          size: "large",
-          mode: "custom",
-          showPopover: showRestTagsPopover,
-          popoverProps: restTagsPopoverProps,
-          onPlusNMouseEnter: () => {
-            this.foundation.updateIsFullTags();
-          }
-        });
-      } else {
-        // If maxTagCount is set, showRestTagsPopover is false/undefined, 
-        // then there is no popover when hovering, no extra Tags are displayed, 
-        // only the tags and restCount displayed in the trigger need to be passed in
-        mapItems = selectedItems.slice(0, maxTagCount);
-        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
-        tags = mapItems.map((item, i) => {
-          return this.getTagItem(item, i, renderSelectedItem);
-        });
-        tagContent = /*#__PURE__*/_react.default.createElement(_group.default, {
-          tagList: tags,
-          maxTagCount: n,
-          restCount: selectedItems.length - maxTagCount,
-          size: "large",
-          mode: "custom"
-        });
-      }
+      // If maxTagCount is set, showRestTagsPopover is false/undefined, 
+      // then there is no popover when hovering, no extra Tags are displayed, 
+      // only the tags and restCount displayed in the trigger need to be passed in
+      const mapItems = selectedItems.slice(0, maxTagCount);
+      const tags = mapItems.map((item, i) => {
+        return this.getTagItem(item, i, renderSelectedItem);
+      });
+      tagContent = /*#__PURE__*/_react.default.createElement(_group.default, {
+        tagList: tags,
+        maxTagCount: n,
+        restCount: selectedItems.length - maxTagCount,
+        size: "large",
+        mode: "custom"
+      });
+    }
+
+    return tagContent;
+  }
+
+  renderMultipleSelection(selections, filterable) {
+    let {
+      renderSelectedItem
+    } = this.props;
+    const {
+      placeholder,
+      maxTagCount,
+      expandRestTagsOnClick,
+      ellipsisTrigger
+    } = this.props;
+    const {
+      inputValue,
+      isOpen
+    } = this.state;
+    const selectedItems = [...selections];
+
+    if (typeof renderSelectedItem === 'undefined') {
+      renderSelectedItem = optionNode => ({
+        isRenderInTag: true,
+        content: optionNode.label
+      });
     }
 
     const contentWrapperCls = (0, _classnames.default)({
-      ["".concat(prefixcls, "-content-wrapper")]: true,
-      ["".concat(prefixcls, "-content-wrapper-one-line")]: maxTagCount,
-      ["".concat(prefixcls, "-content-wrapper-empty")]: !tags.length
+      [`${prefixcls}-content-wrapper`]: true,
+      [`${prefixcls}-content-wrapper-one-line`]: maxTagCount && !isOpen,
+      [`${prefixcls}-content-wrapper-empty`]: !selectedItems.length
     });
     const spanCls = (0, _classnames.default)({
-      ["".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,
-
+      [`${prefixcls}-selection-text`]: true,
+      [`${prefixcls}-selection-placeholder`]: !selectedItems.length,
+      [`${prefixcls}-selection-text-hide`]: selectedItems && selectedItems.length
     });
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
       className: spanCls
     }, placeholder) : null;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
+    const NotOneLine = !maxTagCount;
+    const oneLineTags = ellipsisTrigger ? this.renderCollapsedTags(selectedItems, n) : this.renderOneLineTags(selectedItems, n);
+    const tagContent = NotOneLine || expandRestTagsOnClick && isOpen ? selectedItems.map((item, i) => this.renderTag(item, i)) : oneLineTags;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: contentWrapperCls
-    }, tags && tags.length ? tagContent : placeholderText, !filterable ? null : this.renderInput()));
+    }, selectedItems && selectedItems.length ? tagContent : placeholderText, !filterable ? null : this.renderInput()));
   }
 
   onMouseEnter(e) {
@@ -955,9 +1132,9 @@ class Select extends _baseComponent.default {
       suffix
     } = this.props;
     const suffixWrapperCls = (0, _classnames.default)({
-      ["".concat(prefixcls, "-suffix")]: true,
-      ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
-      ["".concat(prefixcls, "-suffix-icon")]: (0, _utils2.isSemiIcon)(suffix)
+      [`${prefixcls}-suffix`]: true,
+      [`${prefixcls}-suffix-text`]: suffix && (0, _isString2.default)(suffix),
+      [`${prefixcls}-suffix-icon`]: (0, _utils2.isSemiIcon)(suffix)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: suffixWrapperCls,
@@ -973,10 +1150,10 @@ class Select extends _baseComponent.default {
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = (0, _classnames.default)({
-      ["".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)
+      [`${prefixcls}-prefix`]: true,
+      [`${prefixcls}-inset-label`]: insetLabel,
+      [`${prefixcls}-prefix-text`]: labelNode && (0, _isString2.default)(labelNode),
+      [`${prefixcls}-prefix-icon`]: (0, _utils2.isSemiIcon)(labelNode)
     });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefixWrapperCls,
@@ -1018,26 +1195,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, {
-      ["".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
+      [`${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
     });
     const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
     const arrowContent = showArrow ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-arrow"),
+      className: `${prefixcls}-arrow`,
       "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(prefixcls, "-arrow-empty")
+      className: `${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 +1232,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)("".concat(prefixcls, "-selection"))
+      className: (0, _classnames.default)(`${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)("".concat(prefixcls, "-clear")),
+      className: (0, _classnames.default)(`${prefixcls}-clear`),
       onClick: this.onClear
     }, clear) : arrowContent), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
       key: "suffix"
@@ -1082,7 +1259,7 @@ class Select extends _baseComponent.default {
         role: "combobox",
         "aria-disabled": disabled,
         "aria-expanded": isOpen,
-        "aria-controls": "".concat(prefixcls, "-").concat(this.selectOptionListID),
+        "aria-controls": `${prefixcls}-${this.selectOptionListID}`,
         "aria-haspopup": "listbox",
         "aria-label": selections.size ? 'selected' : '',
         "aria-invalid": this.props['aria-invalid'],
@@ -1096,7 +1273,7 @@ class Select extends _baseComponent.default {
         style: style,
         id: this.selectID,
         tabIndex: tabIndex,
-        "aria-activedescendant": focusIndex !== -1 ? "".concat(this.selectID, "-option-").concat(focusIndex) : '',
+        "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
         onMouseEnter: this.onMouseEnter,
         onMouseLeave: this.onMouseLeave,
         onFocus: e => this.foundation.handleTriggerFocus(e),
@@ -1130,7 +1307,7 @@ class Select extends _baseComponent.default {
     } = this.state;
     const optionList = this.renderOptions(children);
     const selection = this.renderSelection();
-    return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    return /*#__PURE__*/_react.default.createElement(_index4.default, {
       getPopupContainer: getPopupContainer,
       motion: motion,
       margin: dropdownMargin,
@@ -1169,6 +1346,7 @@ Select.propTypes = {
   children: _propTypes.default.node,
   clearIcon: _propTypes.default.node,
   defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
+  ellipsisTrigger: _propTypes.default.bool,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
   placeholder: _propTypes.default.node,
   onChange: _propTypes.default.func,
@@ -1185,6 +1363,7 @@ Select.propTypes = {
   size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
   disabled: _propTypes.default.bool,
   emptyContent: _propTypes.default.node,
+  expandRestTagsOnClick: _propTypes.default.bool,
   onDropdownVisibleChange: _propTypes.default.func,
   zIndex: _propTypes.default.number,
   position: _propTypes.default.oneOf(_constants.strings.POSITION_SET),
@@ -1279,7 +1458,9 @@ Select.defaultProps = {
     "aria-label": ''
   }),
   showRestTagsPopover: false,
-  restTagsPopoverProps: {} // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
+  restTagsPopoverProps: {},
+  expandRestTagsOnClick: false,
+  ellipsisTrigger: false // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
   // renderSelectedItem: (optionNode) => optionNode.label,
   // The default creator rendering is related to i18, so it is not declared here
   // renderCreateItem: (input) => input