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

package/lib/es/select/index.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isNumber from "lodash/isNumber";
 import _get from "lodash/get";
 import _noop from "lodash/noop";
@@ -17,6 +18,9 @@ import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/s
 import BaseComponent from '../_base/baseComponent';
 import Tag from '../tag/index';
 import TagGroup from '../tag/group';
+import OverflowList from '../overflowList/index';
+import Space from '../space/index';
+import Text from '../typography/text';
 import LocaleConsumer from '../locale/localeConsumer';
 import Popover from '../popover/index';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/lib/es/popover/constants';
@@ -111,7 +115,8 @@ class Select extends BaseComponent {
       optionGroups: [],
       isHovering: false,
       isFocusInContainer: false,
-      isFullTags: false
+      isFullTags: false,
+      overflowItemCount: 0
     };
     /* Generate random string */
 
@@ -335,6 +340,11 @@ class Select extends BaseComponent {
           isFocus
         });
       },
+      updateOverflowItemCount: overflowItemCount => {
+        this.setState({
+          overflowItemCount
+        });
+      },
       focusTrigger: () => {
         try {
           const {
@@ -365,13 +375,13 @@ class Select extends BaseComponent {
       },
       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
@@ -431,9 +441,9 @@ class Select extends BaseComponent {
 
     const inputPropsCls = _get(inputProps, 'className');
 
-    const inputcls = cls("".concat(prefixcls, "-input"), {
-      ["".concat(prefixcls, "-input-single")]: !multiple,
-      ["".concat(prefixcls, "-input-multiple")]: multiple
+    const inputcls = cls(`${prefixcls}-input`, {
+      [`${prefixcls}-input-single`]: !multiple,
+      [`${prefixcls}-input-multiple`]: multiple
     }, inputPropsCls);
     const {
       inputValue,
@@ -449,7 +459,7 @@ class Select extends BaseComponent {
 
     if (multiple) {
       style = {
-        width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
+        width: inputValue ? `${inputValue.length * 16}px` : '2px'
       };
       selectInputProps.style = style;
     }
@@ -457,7 +467,7 @@ class Select extends BaseComponent {
     return /*#__PURE__*/React.createElement(Input, 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
@@ -515,7 +525,7 @@ class Select extends BaseComponent {
   }
 
   renderLoading() {
-    const loadingWrapperCls = "".concat(prefixcls, "-loading-wrapper");
+    const loadingWrapperCls = `${prefixcls}-loading-wrapper`;
     return /*#__PURE__*/React.createElement("div", {
       className: loadingWrapperCls
     }, /*#__PURE__*/React.createElement(Spin, null));
@@ -556,7 +566,7 @@ class Select extends BaseComponent {
         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);
     }
 
@@ -580,7 +590,7 @@ class Select extends BaseComponent {
       }), /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Select"
       }, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: "".concat(prefixcls, "-create-tips")
+        className: `${prefixcls}-create-tips`
       }, locale.createText), option.value)));
       return defaultCreateItem;
     }
@@ -682,42 +692,42 @@ class Select extends BaseComponent {
       minWidth: dropdownMinWidth
     }, dropdownStyle);
     const optionListCls = cls({
-      ["".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.createElement("div", {
-        id: "".concat(prefixcls, "-").concat(this.selectOptionListID),
+        id: `${prefixcls}-${this.selectOptionListID}`,
         className: cls({
           // 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.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.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.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.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.createElement("div", {
-        className: "".concat(prefixcls, "-option-list-outer-bottom-slot"),
+        className: `${prefixcls}-option-list-outer-bottom-slot`,
         onMouseEnter: () => this.foundation.handleSlotMouseEnter()
       }, outerBottomSlot) : null)
     );
@@ -747,13 +757,13 @@ class Select extends BaseComponent {
     }
 
     const spanCls = cls({
-      ["".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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
     }, /*#__PURE__*/React.createElement("span", {
@@ -762,22 +772,171 @@ class Select extends BaseComponent {
     }, 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 && !_isFunction(this.props.renderSelectedItem) ? /*#__PURE__*/React.createElement(Text, {
+      size: 'small',
+      ellipsis: {
+        rows: 1,
+        showTooltip: {
+          type: 'popover',
+          opts: {
+            style: {
+              width: 'auto',
+              fontSize: 12
+            }
+          }
+        }
+      }
+    }, content) : content;
+
+    if (isRenderInTag) {
+      return /*#__PURE__*/React.createElement(Tag, Object.assign({}, basic, {
+        color: "white",
+        size: size || 'large',
+        key: value,
+        style: {
+          maxWidth: '100%'
+        }
+      }), realContent);
+    } else {
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: value
+      }, realContent);
+    }
+  }
+
+  renderNTag(n, restTags) {
+    const {
+      size,
+      showRestTagsPopover,
+      restTagsPopoverProps
+    } = this.props;
+    let nTag = /*#__PURE__*/React.createElement(Tag, {
+      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.createElement(Popover, Object.assign({
+        showArrow: true,
+        content: /*#__PURE__*/React.createElement(Space, {
+          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.createElement("div", {
+      className: `${prefixcls}-content-wrapper-collapse`
+    }, /*#__PURE__*/React.createElement(OverflowList, {
+      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 => ({
@@ -786,74 +945,87 @@ class Select extends BaseComponent {
       });
     }
 
-    let mapItems = [];
-    let tags = [];
-    let tagContent;
-
-    if (!_isNumber(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.createElement(TagGroup, {
+        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.createElement(TagGroup, {
-          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.createElement(TagGroup, {
-          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.createElement(TagGroup, {
+        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 = cls({
-      ["".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 = cls({
-      ["".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.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
-    }, tags && tags.length ? tagContent : placeholderText, !filterable ? null : this.renderInput()));
+    }, selectedItems && selectedItems.length ? tagContent : placeholderText, !filterable ? null : this.renderInput()));
   }
 
   onMouseEnter(e) {
@@ -909,9 +1081,9 @@ class Select extends BaseComponent {
       suffix
     } = this.props;
     const suffixWrapperCls = cls({
-      ["".concat(prefixcls, "-suffix")]: true,
-      ["".concat(prefixcls, "-suffix-text")]: suffix && _isString(suffix),
-      ["".concat(prefixcls, "-suffix-icon")]: isSemiIcon(suffix)
+      [`${prefixcls}-suffix`]: true,
+      [`${prefixcls}-suffix-text`]: suffix && _isString(suffix),
+      [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix)
     });
     return /*#__PURE__*/React.createElement("div", {
       className: suffixWrapperCls,
@@ -927,10 +1099,10 @@ class Select extends BaseComponent {
     } = this.props;
     const labelNode = prefix || insetLabel;
     const prefixWrapperCls = cls({
-      ["".concat(prefixcls, "-prefix")]: true,
-      ["".concat(prefixcls, "-inset-label")]: insetLabel,
-      ["".concat(prefixcls, "-prefix-text")]: labelNode && _isString(labelNode),
-      ["".concat(prefixcls, "-prefix-icon")]: isSemiIcon(labelNode)
+      [`${prefixcls}-prefix`]: true,
+      [`${prefixcls}-inset-label`]: insetLabel,
+      [`${prefixcls}-prefix-text`]: labelNode && _isString(labelNode),
+      [`${prefixcls}-prefix-icon`]: isSemiIcon(labelNode)
     });
     return /*#__PURE__*/React.createElement("div", {
       className: prefixWrapperCls,
@@ -972,26 +1144,26 @@ class Select extends BaseComponent {
     const filterable = Boolean(filter); // filter（boolean || function）
 
     const selectionCls = useCustomTrigger ? cls(className) : cls(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.createElement("div", {
-      className: "".concat(prefixcls, "-arrow"),
+      className: `${prefixcls}-arrow`,
       "x-semi-prop": "arrowIcon"
     }, arrowIcon) : /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixcls, "-arrow-empty")
+      className: `${prefixcls}-arrow-empty`
     });
     const clear = clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null);
     const inner = useCustomTrigger ? /*#__PURE__*/React.createElement(Trigger, {
@@ -1009,11 +1181,11 @@ class Select extends BaseComponent {
     }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/React.createElement(Fragment, {
       key: "selection"
     }, /*#__PURE__*/React.createElement("div", {
-      className: cls("".concat(prefixcls, "-selection"))
+      className: cls(`${prefixcls}-selection`)
     }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/React.createElement(Fragment, {
       key: "clearicon"
     }, showClear ? /*#__PURE__*/React.createElement("div", {
-      className: cls("".concat(prefixcls, "-clear")),
+      className: cls(`${prefixcls}-clear`),
       onClick: this.onClear
     }, clear) : arrowContent), /*#__PURE__*/React.createElement(Fragment, {
       key: "suffix"
@@ -1036,7 +1208,7 @@ class Select extends BaseComponent {
         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'],
@@ -1050,7 +1222,7 @@ class Select extends BaseComponent {
         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),
@@ -1123,6 +1295,7 @@ Select.propTypes = {
   children: PropTypes.node,
   clearIcon: PropTypes.node,
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
+  ellipsisTrigger: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
   placeholder: PropTypes.node,
   onChange: PropTypes.func,
@@ -1139,6 +1312,7 @@ Select.propTypes = {
   size: PropTypes.oneOf(strings.SIZE_SET),
   disabled: PropTypes.bool,
   emptyContent: PropTypes.node,
+  expandRestTagsOnClick: PropTypes.bool,
   onDropdownVisibleChange: PropTypes.func,
   zIndex: PropTypes.number,
   position: PropTypes.oneOf(strings.POSITION_SET),
@@ -1233,7 +1407,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

package/lib/es/select/option.js

@@ -82,13 +82,13 @@ class Option extends PureComponent {
           rest = __rest(_a, ["children", "disabled", "value", "selected", "label", "empty", "emptyContent", "onSelect", "focused", "showTick", "className", "style", "onMouseEnter", "prefixCls", "renderOptionItem", "inputValue", "id"]);
 
     const optionClassName = classNames(prefixCls, {
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      ["".concat(prefixCls, "-selected")]: selected,
-      ["".concat(prefixCls, "-focused")]: focused,
-      ["".concat(prefixCls, "-empty")]: empty,
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-selected`]: selected,
+      [`${prefixCls}-focused`]: focused,
+      [`${prefixCls}-empty`]: empty,
       [className]: className
     });
-    const selectedIconClassName = classNames(["".concat(prefixCls, "-icon")]);
+    const selectedIconClassName = classNames([`${prefixCls}-icon`]);
 
     if (empty) {
       if (emptyContent === null) {
@@ -126,7 +126,7 @@ class Option extends PureComponent {
       searchWords: inputValue,
       sourceString: children,
       option: {
-        highlightClassName: "".concat(prefixCls, "-keyword")
+        highlightClassName: `${prefixCls}-keyword`
       }
     };
     return (
@@ -150,7 +150,7 @@ class Option extends PureComponent {
       }, showTick ? /*#__PURE__*/React.createElement("div", {
         className: selectedIconClassName
       }, /*#__PURE__*/React.createElement(IconTick, null)) : null, _isString(children) ? /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-text")
+        className: `${prefixCls}-text`
       }, this.renderOptionContent({
         children,
         config,