@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/select/index.js

@@ -0,0 +1,1102 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _context12 = _interopRequireDefault(require("../configProvider/context"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/select/foundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/select/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _lodashEs = require("lodash-es");
+
+var _index = _interopRequireDefault(require("../tag/index"));
+
+var _group = _interopRequireDefault(require("../tag/group"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _index2 = _interopRequireDefault(require("../popover/index"));
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
+
+var _reactWindow = require("react-window");
+
+var _utils = require("./utils");
+
+var _virtualRow = _interopRequireDefault(require("./virtualRow"));
+
+var _index3 = _interopRequireDefault(require("../input/index"));
+
+var _option = _interopRequireDefault(require("./option"));
+
+var _optionGroup = _interopRequireDefault(require("./optionGroup"));
+
+var _spin = _interopRequireDefault(require("../spin"));
+
+var _trigger = _interopRequireDefault(require("../trigger"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _utils2 = require("../_utils");
+
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
+require("@douyinfe/semi-foundation/lib/cjs/select/select.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable max-len */
+
+/* eslint-disable max-lines-per-function */
+const prefixcls = _constants.cssClasses.PREFIX;
+const key = 0; // Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
+
+class Select extends _baseComponent.default {
+  constructor(props) {
+    var _context, _context2, _context3, _context4, _context5, _context6;
+
+    super(props);
+
+    this.handleInputChange = value => this.foundation.handleInputChange(value);
+
+    this.state = {
+      isOpen: false,
+      isFocus: false,
+      options: [],
+      selections: new _map.default(),
+      dropdownMinWidth: null,
+      optionKey: key,
+      inputValue: '',
+      showInput: false,
+      focusIndex: props.defaultActiveFirstOption ? 0 : -1,
+      keyboardEventSet: {},
+      optionGroups: [],
+      isHovering: false
+    };
+    /* Generate random string */
+
+    this.selectOptionListID = (0, _slice.default)(_context = Math.random().toString(36)).call(_context, 2);
+    this.virtualizeListRef = /*#__PURE__*/_react.default.createRef();
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.triggerRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
+    this.onSelect = (0, _bind.default)(_context2 = this.onSelect).call(_context2, this);
+    this.onClear = (0, _bind.default)(_context3 = this.onClear).call(_context3, this);
+    this.onMouseEnter = (0, _bind.default)(_context4 = this.onMouseEnter).call(_context4, this);
+    this.onMouseLeave = (0, _bind.default)(_context5 = this.onMouseLeave).call(_context5, this);
+    this.renderOption = (0, _bind.default)(_context6 = this.renderOption).call(_context6, this);
+    this.foundation = new _foundation.default(this.adapter);
+    (0, _warning.default)('optionLabelProp' in this.props, '[Semi Select] \'optionLabelProp\' has already been deprecated, please use \'renderSelectedItem\' instead.');
+    (0, _warning.default)('labelInValue' in this.props, '[Semi Select] \'labelInValue\' has already been deprecated, please use \'onChangeWithObject\' instead.');
+  }
+
+  get adapter() {
+    var _this = this;
+
+    const keyboardAdapter = {
+      registerKeyDown: cb => {
+        const keyboardEventSet = {
+          onKeyDown: cb
+        };
+        this.setState({
+          keyboardEventSet
+        });
+      },
+      unregisterKeyDown: () => {
+        this.setState({
+          keyboardEventSet: {}
+        });
+      },
+      updateFocusIndex: focusIndex => {
+        this.setState({
+          focusIndex
+        });
+      },
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      scrollToFocusOption: () => {}
+    };
+    const filterAdapter = {
+      updateInputValue: value => {
+        this.setState({
+          inputValue: value
+        });
+      },
+      toggleInputShow: (showInput, cb) => {
+        this.setState({
+          showInput
+        }, () => {
+          cb();
+        });
+      },
+      focusInput: () => {
+        if (this.inputRef && this.inputRef.current) {
+          this.inputRef.current.focus();
+        }
+      }
+    };
+    const multipleAdapter = {
+      notifyMaxLimit: option => this.props.onExceed(option),
+      getMaxLimit: () => this.props.max,
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const optionInstance = this.optionsRef && this.optionsRef.current;
+          const triggerDom = this.triggerRef && this.triggerRef.current; // eslint-disable-next-line react/no-find-dom-node
+
+          const optionsDom = _reactDom.default.findDOMNode(optionInstance); // let isInPanel = optionsDom && optionsDom.contains(e.target);
+          // let isInTrigger = triggerDom && triggerDom.contains(e.target);
+
+
+          if (optionsDom && !optionsDom.contains(e.target) && triggerDom && !triggerDom.contains(e.target)) {
+            cb(e);
+          }
+        };
+
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('mousedown', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        if (this.clickOutsideHandler) {
+          document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+          this.clickOutsideHandler = null;
+        }
+      },
+      rePositionDropdown: () => {
+        let {
+          optionKey
+        } = this.state;
+        optionKey = optionKey + 1;
+        this.setState({
+          optionKey
+        });
+      },
+      notifyDeselect: (value, option) => {
+        delete option._parentGroup;
+        this.props.onDeselect(value, option);
+      }
+    };
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), keyboardAdapter), filterAdapter), multipleAdapter), {
+      // Collect all subitems, each item is visible by default when collected, and is not selected
+      getOptionsFromChildren: function () {
+        let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.children;
+        let optionGroups = [];
+        let options = [];
+        const {
+          optionList
+        } = _this.props;
+
+        if (optionList && optionList.length) {
+          options = (0, _map2.default)(optionList).call(optionList, itemOpt => (0, _assign.default)({
+            _show: true,
+            _selected: false
+          }, itemOpt));
+          optionGroups[0] = {
+            children: options,
+            label: ''
+          };
+        } else {
+          const result = (0, _utils.getOptionsFromGroup)(children);
+          optionGroups = result.optionGroups;
+          options = result.options;
+        }
+
+        _this.setState({
+          optionGroups
+        });
+
+        return options;
+      },
+      updateOptions: options => {
+        this.setState({
+          options
+        });
+      },
+      openMenu: () => {
+        this.setState({
+          isOpen: true
+        });
+      },
+      closeMenu: () => {
+        this.setState({
+          isOpen: false
+        });
+      },
+      getTriggerWidth: () => {
+        const el = this.triggerRef.current;
+        return el && el.getBoundingClientRect().width;
+      },
+      setOptionWrapperWidth: width => {
+        this.setState({
+          dropdownMinWidth: width
+        });
+      },
+      updateSelection: selections => {
+        this.setState({
+          selections
+        });
+      },
+      // clone Map, important!!!, prevent unexpected modify on state
+      getSelections: () => new _map.default(this.state.selections),
+      notifyChange: value => {
+        this.props.onChange(value);
+      },
+      notifySelect: (value, option) => {
+        delete option._parentGroup;
+        this.props.onSelect(value, option);
+      },
+      notifyDropdownVisibleChange: visible => {
+        this.props.onDropdownVisibleChange(visible);
+      },
+      notifySearch: input => {
+        this.props.onSearch(input);
+      },
+      notifyCreate: input => {
+        this.props.onCreate(input);
+      },
+      notifyMouseEnter: e => {
+        this.props.onMouseEnter(e);
+      },
+      notifyMouseLeave: e => {
+        this.props.onMouseLeave(e);
+      },
+      notifyFocus: event => {
+        this.props.onFocus(event);
+      },
+      notifyBlur: event => {
+        this.props.onBlur(event);
+      },
+      notifyClear: () => {
+        this.props.onClear();
+      },
+      notifyListScroll: e => {
+        this.props.onListScroll(e);
+      },
+      updateHovering: isHovering => {
+        this.setState({
+          isHovering
+        });
+      },
+      updateFocusState: isFocus => {
+        this.setState({
+          isFocus
+        });
+      },
+      focusTrigger: () => {
+        try {
+          const el = this.triggerRef.current;
+          el.focus();
+        } catch (error) {}
+      },
+      updateScrollTop: () => {
+        var _context7, _context8;
+
+        // eslint-disable-next-line max-len
+        let destNode = document.querySelector((0, _concat.default)(_context7 = (0, _concat.default)(_context8 = "#".concat(prefixcls, "-")).call(_context8, this.selectOptionListID, " .")).call(_context7, prefixcls, "-option-selected"));
+
+        if ((0, _isArray.default)(destNode)) {
+          // eslint-disable-next-line prefer-destructuring
+          destNode = destNode[0];
+        }
+
+        if (destNode) {
+          /**
+           * Scroll the first selected item into view.
+           * The reason why ScrollIntoView is not used here is that it may cause page to move.
+           */
+          const destParent = destNode.parentNode;
+          destParent.scrollTop = destNode.offsetTop - destParent.offsetTop - destParent.clientHeight / 2 + destNode.clientHeight / 2;
+        }
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var _context9, _context10;
+
+    const prevChildrenKeys = (0, _map2.default)(_context9 = _react.default.Children.toArray(prevProps.children)).call(_context9, child => child.key);
+    const nowChildrenKeys = (0, _map2.default)(_context10 = _react.default.Children.toArray(this.props.children)).call(_context10, child => child.key);
+    let isOptionsChanged = false;
+
+    if (!(0, _lodashEs.isEqual)(prevChildrenKeys, nowChildrenKeys) || !(0, _lodashEs.isEqual)(prevProps.optionList, this.props.optionList)) {
+      isOptionsChanged = true;
+      this.foundation.handleOptionListChange();
+    } // Add isOptionChanged: There may be cases where the value is unchanged, but the optionList is updated. At this time, the label corresponding to the value may change, and the selected item needs to be updated
+
+
+    if (prevProps.value !== this.props.value || isOptionsChanged) {
+      if ('value' in this.props) {
+        this.foundation.handleValueChange(this.props.value);
+      } else {
+        this.foundation.handleOptionListChangeHadDefaultValue();
+      }
+    }
+  }
+
+  renderInput() {
+    const {
+      size,
+      multiple,
+      disabled
+    } = this.props;
+    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"), {
+      ["".concat(prefixcls, "-input-single")]: !multiple,
+      ["".concat(prefixcls, "-input-multiple")]: multiple
+    });
+    const {
+      inputValue
+    } = this.state;
+    const inputProps = {
+      value: inputValue,
+      disabled,
+      className: inputcls,
+      onChange: this.handleInputChange
+    };
+    let style = {}; // Multiple choice mode
+
+    if (multiple) {
+      style = {
+        width: inputValue ? "".concat(inputValue.length * 16, "px") : '2px'
+      };
+      inputProps.style = style;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_index3.default, (0, _assign.default)({
+      ref: this.inputRef,
+      size: size
+    }, inputProps, {
+      onFocus: e => {
+        // prevent event bubbling which will fire trigger onFocus event
+        e.stopPropagation(); // e.nativeEvent.stopImmediatePropagation();
+      }
+    }));
+  }
+
+  close() {
+    this.foundation.close();
+  }
+
+  open() {
+    this.foundation.open();
+  }
+
+  clearInput() {
+    this.foundation.clearInput();
+  }
+
+  selectAll() {
+    this.foundation.selectAll();
+  }
+
+  deselectAll() {
+    this.foundation.clearSelected();
+  }
+
+  focus() {
+    this.foundation.focus();
+  }
+
+  onSelect(option, optionIndex, e) {
+    this.foundation.onSelect(option, optionIndex, e);
+  }
+
+  onClear(e) {
+    e.nativeEvent.stopImmediatePropagation();
+    this.foundation.handleClearClick(e);
+  }
+
+  renderEmpty() {
+    return /*#__PURE__*/_react.default.createElement(_option.default, {
+      empty: true,
+      emptyContent: this.props.emptyContent
+    });
+  }
+
+  renderLoading() {
+    const loadingWrapperCls = "".concat(prefixcls, "-loading-wrapper");
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingWrapperCls
+    }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
+  }
+
+  renderOption(option, optionIndex, style) {
+    const {
+      focusIndex,
+      inputValue
+    } = this.state;
+    const {
+      renderOptionItem
+    } = this.props;
+    let optionContent;
+    const isFocused = optionIndex === focusIndex;
+    let optionStyle = style || {};
+
+    if (option.style) {
+      optionStyle = (0, _assign.default)((0, _assign.default)({}, optionStyle), option.style);
+    }
+
+    if (option._inputCreateOnly) {
+      optionContent = this.renderCreateOption(option, isFocused, optionIndex, style);
+    } else {
+      // use another name to make sure that 'key' in optionList still exist when we call onChange
+      if ('key' in option) {
+        option._keyInOptionList = option.key;
+      }
+
+      optionContent = /*#__PURE__*/_react.default.createElement(_option.default, (0, _assign.default)({
+        showTick: true
+      }, option, {
+        selected: option._selected,
+        onSelect: (v, e) => this.onSelect(v, optionIndex, e),
+        focused: isFocused,
+        onMouseEnter: () => this.onOptionHover(optionIndex),
+        style: optionStyle,
+        key: option.key || option.label + option.value + optionIndex,
+        renderOptionItem: renderOptionItem,
+        inputValue: inputValue
+      }), option.label);
+    }
+
+    return optionContent;
+  }
+
+  renderCreateOption(option, isFocused, optionIndex, style) {
+    const {
+      renderCreateItem
+    } = this.props; // default render method
+
+    if (typeof renderCreateItem === 'undefined') {
+      const defaultCreateItem = /*#__PURE__*/_react.default.createElement(_option.default, (0, _assign.default)({
+        key: option.key || option.label + option.value,
+        onSelect: (v, e) => this.onSelect(v, optionIndex, e),
+        onMouseEnter: () => this.onOptionHover(optionIndex),
+        showTick: true
+      }, option, {
+        focused: isFocused,
+        style: style
+      }), /*#__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")
+      }, locale.createText), option.value)));
+
+      return defaultCreateItem;
+    }
+
+    const customCreateItem = renderCreateItem(option.value, isFocused);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onClick: e => this.onSelect(option, optionIndex, e),
+      key: new Date().valueOf()
+    }, customCreateItem);
+  }
+
+  onOptionHover(optionIndex) {
+    this.foundation.handleOptionMouseEnter(optionIndex);
+  }
+
+  renderWithGroup(visibileOptions) {
+    const content = [];
+    const groupStatus = new _map.default();
+    (0, _forEach.default)(visibileOptions).call(visibileOptions, (option, optionIndex) => {
+      const parentGroup = option._parentGroup;
+      const optionContent = this.renderOption(option, optionIndex);
+
+      if (parentGroup && groupStatus.has(parentGroup.label)) {
+        // group content already insert
+        content.push(optionContent);
+      } else if (parentGroup) {
+        const groupContent = /*#__PURE__*/_react.default.createElement(_optionGroup.default, (0, _assign.default)({}, parentGroup, {
+          key: parentGroup.label
+        }));
+
+        groupStatus.set(parentGroup.label, true);
+        content.push(groupContent);
+        content.push(optionContent);
+      } else {
+        // when not use with OptionGroup
+        content.push(optionContent);
+      }
+    });
+    return content;
+  }
+
+  renderVirtualizeList(visibileOptions) {
+    const {
+      virtualize
+    } = this.props;
+    const {
+      direction
+    } = this.context;
+    const {
+      height,
+      width,
+      itemSize
+    } = virtualize;
+    return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+      ref: this.virtualizeListRef,
+      height: height || _constants.numbers.LIST_HEIGHT,
+      itemCount: visibileOptions.length,
+      itemSize: itemSize,
+      itemData: {
+        visibileOptions,
+        renderOption: this.renderOption
+      },
+      width: width || '100%',
+      style: {
+        direction
+      }
+    }, _virtualRow.default);
+  }
+
+  renderOptions(children) {
+    var _context11;
+
+    const {
+      dropdownMinWidth,
+      options,
+      selections
+    } = this.state;
+    const {
+      maxHeight,
+      dropdownClassName,
+      dropdownStyle,
+      outerTopSlot,
+      innerTopSlot,
+      outerBottomSlot,
+      innerBottomSlot,
+      loading,
+      virtualize
+    } = this.props; // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
+
+    const visibileOptions = (0, _filter.default)(options).call(options, item => item._show);
+    let listContent = this.renderWithGroup(visibileOptions);
+
+    if (virtualize) {
+      listContent = this.renderVirtualizeList(visibileOptions);
+    }
+
+    const style = (0, _assign.default)({
+      minWidth: dropdownMinWidth
+    }, dropdownStyle);
+    const optionListCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-option-list")]: true,
+      ["".concat(prefixcls, "-option-list-chosen")]: selections.size
+    });
+    const isEmpty = !options.length || !(0, _some.default)(options).call(options, item => item._show);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      id: (0, _concat.default)(_context11 = "".concat(prefixcls, "-")).call(_context11, this.selectOptionListID),
+      className: dropdownClassName,
+      style: style
+    }, outerTopSlot, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        maxHeight: "".concat(maxHeight, "px")
+      },
+      className: optionListCls,
+      role: "listbox",
+      onScroll: e => this.foundation.handleListScroll(e)
+    }, innerTopSlot, !loading ? listContent : this.renderLoading(), isEmpty && !loading ? this.renderEmpty() : null, innerBottomSlot), outerBottomSlot);
+  }
+
+  renderSingleSelection(selections, filterable) {
+    let {
+      renderSelectedItem
+    } = this.props;
+    const {
+      placeholder
+    } = this.props;
+    const {
+      showInput,
+      inputValue
+    } = this.state;
+    let renderText = '';
+    const selectedItems = [...selections];
+
+    if (typeof renderSelectedItem === 'undefined') {
+      renderSelectedItem = optionNode => optionNode.label;
+    }
+
+    if (selectedItems.length) {
+      const selectedItem = selectedItems[0][1];
+      renderText = renderSelectedItem(selectedItem);
+    }
+
+    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)
+
+    });
+    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", {
+      className: spanCls
+    }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput ? this.renderInput() : null));
+  }
+
+  renderMultipleSelection(selections, filterable) {
+    let {
+      renderSelectedItem
+    } = this.props;
+    const {
+      placeholder,
+      maxTagCount,
+      size
+    } = this.props;
+    const {
+      inputValue
+    } = this.state;
+    const selectDisabled = this.props.disabled;
+    const renderTags = [];
+    const selectedItems = [...selections];
+
+    if (typeof renderSelectedItem === 'undefined') {
+      renderSelectedItem = optionNode => ({
+        isRenderInTag: true,
+        content: optionNode.label
+      });
+    }
+
+    const tags = (0, _map2.default)(selectedItems).call(selectedItems, (item, i) => {
+      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
+        });
+      };
+
+      const {
+        content,
+        isRenderInTag
+      } = renderSelectedItem(item[1], {
+        index: i,
+        disabled,
+        onClose
+      });
+      const basic = {
+        disabled,
+        closable: !disabled,
+        onClose
+      };
+
+      if (isRenderInTag) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, basic, {
+          color: "white",
+          size: size || 'large',
+          key: value
+        }), content);
+      } else {
+        return content;
+      }
+    });
+    const contentWrapperCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-content-wrapper")]: true,
+      ["".concat(prefixcls, "-content-wrapper-one-line")]: maxTagCount,
+      ["".concat(prefixcls, "-content-wrapper-empty")]: !tags.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,
+
+    });
+    const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
+      className: spanCls
+    }, placeholder) : null;
+    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
+
+    const tagContent = NotOneLine ? tags : /*#__PURE__*/_react.default.createElement(_group.default, {
+      tagList: tags,
+      maxTagCount: n,
+      size: "large",
+      mode: "custom"
+    });
+    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()));
+  }
+
+  onMouseEnter(e) {
+    this.foundation.handleMouseEnter(e);
+  }
+
+  onMouseLeave(e) {
+    this.foundation.handleMouseLeave(e);
+  }
+  /* Processing logic when popover visible changes */
+
+
+  handlePopoverVisibleChange(status) {
+    const {
+      virtualize
+    } = this.props;
+    const {
+      selections
+    } = this.state;
+
+    if (!status) {
+      return;
+    }
+
+    if (virtualize) {
+      let minKey;
+      (0, _forEach.default)(selections).call(selections, (v, k) => {
+        const tempKey = Number(String(k).match(/option-(.*)/)[1]);
+        minKey = typeof minKey === 'number' && minKey < tempKey ? minKey : tempKey;
+      });
+
+      if (minKey) {
+        this.virtualizeListRef.current.scrollToItem(minKey, 'center');
+      }
+    } else {
+      this.foundation.updateScrollTop();
+    }
+  }
+
+  renderSuffix() {
+    const {
+      suffix
+    } = this.props;
+    const suffixWrapperCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-suffix")]: true,
+      ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _lodashEs.isString)(suffix),
+      ["".concat(prefixcls, "-suffix-icon")]: (0, _utils2.isSemiIcon)(suffix)
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: suffixWrapperCls
+    }, suffix);
+  }
+
+  renderPrefix() {
+    const {
+      prefix,
+      insetLabel
+    } = 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, _lodashEs.isString)(labelNode),
+      ["".concat(prefixcls, "-prefix-icon")]: (0, _utils2.isSemiIcon)(labelNode)
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixWrapperCls
+    }, labelNode);
+  }
+
+  renderSelection() {
+    const {
+      disabled,
+      multiple,
+      filter,
+      style,
+      size,
+      className,
+      validateStatus,
+      showArrow,
+      suffix,
+      prefix,
+      insetLabel,
+      placeholder,
+      triggerRender,
+      arrowIcon
+    } = this.props;
+    const {
+      selections,
+      isOpen,
+      keyboardEventSet,
+      inputValue,
+      isHovering,
+      isFocus
+    } = this.state;
+    const useCustomTrigger = typeof triggerRender === 'function';
+    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
+    });
+    const showClear = this.props.showClear && (selections.size || inputValue) && !disabled && (isHovering || isOpen);
+    const arrowContent = showArrow ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixcls, "-arrow")
+    }, arrowIcon) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixcls, "-arrow-empty")
+    });
+    const inner = useCustomTrigger ? /*#__PURE__*/_react.default.createElement(_trigger.default, {
+      value: (0, _from.default)((0, _values.default)(selections).call(selections)),
+      inputValue: inputValue,
+      onChange: this.handleInputChange,
+      onClear: this.onClear,
+      disabled: disabled,
+      triggerRender: triggerRender,
+      placeholder: placeholder,
+      componentName: "Select",
+      componentProps: (0, _assign.default)({}, this.props)
+    }) : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: "prefix"
+    }, 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"))
+    }, 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")),
+      onClick: this.onClear
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null)) : arrowContent), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: "suffix"
+    }, suffix ? this.renderSuffix() : null)];
+    const tabIndex = disabled ? null : 0;
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+      className: selectionCls,
+      ref: ref => this.triggerRef.current = ref,
+      onClick: e => this.foundation.handleClick(e),
+      style: style,
+      tabIndex: tabIndex,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      // onFocus={e => this.foundation.handleTriggerFocus(e)}
+      onBlur: e => this.foundation.handleTriggerBlur(e)
+    }, keyboardEventSet), inner);
+  }
+
+  render() {
+    const {
+      direction
+    } = this.context;
+    const defaultPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+    const {
+      children,
+      position = defaultPosition,
+      zIndex,
+      getPopupContainer,
+      motion,
+      autoAdjustOverflow,
+      mouseLeaveDelay,
+      mouseEnterDelay,
+      spacing,
+      stopPropagation
+    } = this.props;
+    const {
+      isOpen,
+      optionKey
+    } = this.state;
+    const optionList = this.renderOptions(children);
+    const selection = this.renderSelection();
+    return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      getPopupContainer: getPopupContainer,
+      motion: motion,
+      autoAdjustOverflow: autoAdjustOverflow,
+      mouseLeaveDelay: mouseLeaveDelay,
+      mouseEnterDelay: mouseEnterDelay,
+      // transformFromCenter TODO: check no such property
+      zIndex: zIndex,
+      ref: this.optionsRef,
+      content: optionList,
+      visible: isOpen,
+      trigger: "custom",
+      rePosKey: optionKey,
+      position: position,
+      spacing: spacing,
+      stopPropagation: stopPropagation,
+      onVisibleChange: status => this.handlePopoverVisibleChange(status)
+    }, selection);
+  }
+
+}
+
+Select.contextType = _context12.default;
+Select.Option = _option.default;
+Select.OptGroup = _optionGroup.default;
+Select.propTypes = {
+  autoFocus: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
+  placeholder: _propTypes.default.node,
+  onChange: _propTypes.default.func,
+  multiple: _propTypes.default.bool,
+  // Whether to turn on the input box filtering function, when it is a function, it represents a custom filtering function
+  filter: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  // How many tags can you choose?
+  max: _propTypes.default.number,
+  // How many tabs are displayed at most, and the rest are displayed in + N
+  maxTagCount: _propTypes.default.number,
+  maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
+  disabled: _propTypes.default.bool,
+  emptyContent: _propTypes.default.node,
+  onDropdownVisibleChange: _propTypes.default.func,
+  zIndex: _propTypes.default.number,
+  position: _propTypes.default.oneOf(_constants.strings.POSITION_SET),
+  onSearch: _propTypes.default.func,
+  getPopupContainer: _propTypes.default.func,
+  dropdownClassName: _propTypes.default.string,
+  dropdownStyle: _propTypes.default.object,
+  outerTopSlot: _propTypes.default.node,
+  innerTopSlot: _propTypes.default.node,
+  outerBottomSlot: _propTypes.default.node,
+  innerBottomSlot: _propTypes.default.node,
+  optionList: _propTypes.default.array,
+  dropdownMatchSelectWidth: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  defaultOpen: _propTypes.default.bool,
+  validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
+  defaultActiveFirstOption: _propTypes.default.bool,
+  triggerRender: _propTypes.default.func,
+  stopPropagation: _propTypes.default.bool,
+  // motion doesn't need to be exposed
+  motion: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool, _propTypes.default.object]),
+  onChangeWithObject: _propTypes.default.bool,
+  suffix: _propTypes.default.node,
+  prefix: _propTypes.default.node,
+  insetLabel: _propTypes.default.node,
+  showClear: _propTypes.default.bool,
+  showArrow: _propTypes.default.bool,
+  renderSelectedItem: _propTypes.default.func,
+  allowCreate: _propTypes.default.bool,
+  renderCreateItem: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  clickToHide: _propTypes.default.bool,
+  onExceed: _propTypes.default.func,
+  onCreate: _propTypes.default.func,
+  remote: _propTypes.default.bool,
+  onDeselect: _propTypes.default.func,
+  // The main difference between onSelect and onChange is that when multiple selections are selected, onChange contains all options, while onSelect only contains items for the current operation
+  onSelect: _propTypes.default.func,
+  autoAdjustOverflow: _propTypes.default.bool,
+  mouseEnterDelay: _propTypes.default.number,
+  mouseLeaveDelay: _propTypes.default.number,
+  spacing: _propTypes.default.number,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  virtualize: _propTypes.default.object,
+  renderOptionItem: _propTypes.default.func,
+  onListScroll: _propTypes.default.func,
+  arrowIcon: _propTypes.default.node // open: PropTypes.bool,
+  // tagClosable: PropTypes.bool,
+
+};
+Select.defaultProps = {
+  stopPropagation: true,
+  motion: true,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  // position: 'bottomLeft',
+  filter: false,
+  multiple: false,
+  disabled: false,
+  defaultOpen: false,
+  allowCreate: false,
+  placeholder: '',
+  onDropdownVisibleChange: _lodashEs.noop,
+  onChangeWithObject: false,
+  onChange: _lodashEs.noop,
+  onSearch: _lodashEs.noop,
+  onMouseEnter: _lodashEs.noop,
+  onMouseLeave: _lodashEs.noop,
+  onDeselect: _lodashEs.noop,
+  onSelect: _lodashEs.noop,
+  onCreate: _lodashEs.noop,
+  onExceed: _lodashEs.noop,
+  onFocus: _lodashEs.noop,
+  onBlur: _lodashEs.noop,
+  onClear: _lodashEs.noop,
+  onListScroll: _lodashEs.noop,
+  maxHeight: 300,
+  dropdownMatchSelectWidth: true,
+  defaultActiveFirstOption: false,
+  showArrow: true,
+  showClear: false,
+  remote: false,
+  autoAdjustOverflow: true,
+  arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null) // 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
+
+};
+var _default = Select;
+exports.default = _default;