@douyinfe/semi-ui/lib/es/select/index.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import _isFunction from "lodash/isFunction";
import _isNumber from "lodash/isNumber";
import _get from "lodash/get";
import _noop from "lodash/noop";
import _isString from "lodash/isString";
import _isEqual from "lodash/isEqual";
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import cls from 'classnames';
import PropTypes from 'prop-types';
import ConfigContext from '../configProvider/context';
import SelectFoundation from '@douyinfe/semi-foundation/lib/es/select/foundation';
import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/select/constants';
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';
import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
import { FixedSizeList as List } from 'react-window';
import { getOptionsFromGroup } from './utils';
import VirtualRow from './virtualRow';
import Input from '../input/index';
import Option from './option';
import OptionGroup from './optionGroup';
import Spin from '../spin';
import Trigger from '../trigger';
import { IconChevronDown, IconClear, IconSearch } from '@douyinfe/semi-icons';
import { isSemiIcon, getFocusableElements, getActiveElement, getDefaultPropsFromGlobalConfig } from '../_utils';
import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
import '@douyinfe/semi-foundation/lib/es/select/select.css';
const prefixcls = 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 {
  constructor(props) {
    super(props);
    this.setOptionContainerEl = node => this.optionContainerEl = {
      current: node
    };
    this.handleInputChange = (value, event) => this.foundation.handleInputChange(value, event);
    this.getTagItem = (item, i, renderSelectedItem) => {
      const {
        size,
        disabled: selectDisabled
      } = 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
        });
      };
      const {
        content,
        isRenderInTag
      } = renderSelectedItem(item[1], {
        index: i,
        disabled,
        onClose
      });
      const basic = {
        disabled,
        closable: !disabled,
        onClose
      };
      if (isRenderInTag) {
        return /*#__PURE__*/React.createElement(Tag, Object.assign({}, basic, {
          color: "white",
          size: size || 'large',
          key: value,
          tabIndex: -1
        }), content);
      } else {
        return /*#__PURE__*/React.createElement(Fragment, {
          key: value
        }, content);
      }
    };
    this.state = {
      isOpen: false,
      isFocus: false,
      options: [],
      selections: new Map(),
      dropdownMinWidth: null,
      optionKey: key,
      inputValue: '',
      showInput: false,
      focusIndex: props.defaultActiveFirstOption ? 0 : -1,
      keyboardEventSet: {},
      optionGroups: [],
      isHovering: false,
      isFocusInContainer: false,
      isFullTags: false,
      overflowItemCount: 0
    };
    /* Generate random string */
    this.selectOptionListID = '';
    this.selectID = '';
    this.virtualizeListRef = /*#__PURE__*/React.createRef();
    this.inputRef = /*#__PURE__*/React.createRef();
    this.dropdownInputRef = /*#__PURE__*/React.createRef(); // only work when searchPosition = 'dropdown'
    this.triggerRef = /*#__PURE__*/React.createRef();
    this.optionsRef = /*#__PURE__*/React.createRef();
    this.optionContainerEl = /*#__PURE__*/React.createRef();
    this.clickOutsideHandler = null;
    this.onSelect = this.onSelect.bind(this);
    this.onClear = this.onClear.bind(this);
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.renderOption = this.renderOption.bind(this);
    this.onKeyPress = this.onKeyPress.bind(this);
    this.eventManager = new Event();
    this.foundation = new SelectFoundation(this.adapter);
  }
  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
        });
      },
      scrollToFocusOption: () => {}
    };
    const filterAdapter = {
      updateInputValue: value => {
        this.setState({
          inputValue: value
        });
      },
      toggleInputShow: (showInput, cb) => {
        this.setState({
          showInput
        }, () => {
          cb();
        });
      },
      focusInput: () => {
        const {
          preventScroll
        } = this.props;
        if (this.inputRef && this.inputRef.current) {
          this.inputRef.current.focus({
            preventScroll
          });
        }
      },
      focusDropdownInput: () => {
        const {
          preventScroll
        } = this.props;
        if (this.dropdownInputRef && this.dropdownInputRef.current) {
          this.dropdownInputRef.current.focus({
            preventScroll
          });
        }
      }
    };
    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;
          const optionsDom = ReactDOM.findDOMNode(optionInstance);
          const target = e.target;
          const path = e.composedPath && e.composedPath() || [target];
          if (!(optionsDom && optionsDom.contains(target)) && !(triggerDom && triggerDom.contains(target)) && !(path.includes(triggerDom) || path.includes(optionsDom))) {
            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 Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, super.adapter), keyboardAdapter), filterAdapter), multipleAdapter), {
      on: (eventName, eventCallback) => this.eventManager.on(eventName, eventCallback),
      off: eventName => this.eventManager.off(eventName),
      once: (eventName, eventCallback) => this.eventManager.once(eventName, eventCallback),
      emit: eventName => this.eventManager.emit(eventName),
      // 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 = optionList.map((itemOpt, index) => Object.assign({
            _show: true,
            _selected: false,
            _scrollIndex: index
          }, itemOpt));
          optionGroups[0] = {
            children: options,
            label: ''
          };
        } else {
          const result = getOptionsFromGroup(children);
          optionGroups = result.optionGroups;
          options = result.options;
        }
        _this.setState({
          optionGroups
        });
        return options;
      },
      updateOptions: options => {
        this.setState({
          options
        });
      },
      openMenu: cb => {
        this.setState({
          isOpen: true
        }, () => {
          cb === null || cb === void 0 ? void 0 : cb();
        });
      },
      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(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, event) => {
        this.props.onSearch(input, event);
      },
      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
        });
      },
      updateOverflowItemCount: overflowItemCount => {
        this.setState({
          overflowItemCount
        });
      },
      focusTrigger: () => {
        try {
          const {
            preventScroll
          } = this.props;
          const el = this.triggerRef.current;
          el.focus({
            preventScroll
          });
        } catch (error) {}
      },
      getContainer: () => {
        return this.optionContainerEl && this.optionContainerEl.current;
      },
      getFocusableElements: node => {
        return getFocusableElements(node);
      },
      getActiveElement: () => {
        return getActiveElement();
      },
      setIsFocusInContainer: isFocusInContainer => {
        this.setState({
          isFocusInContainer
        });
      },
      getIsFocusInContainer: () => {
        return this.state.isFocusInContainer;
      },
      updateScrollTop: index => {
        let optionClassName;
        if ('renderOptionItem' in this.props) {
          optionClassName = `.${prefixcls}-option-custom-selected`;
          if (index !== undefined) {
            optionClassName = `.${prefixcls}-option-custom:nth-child(${index + 1})`;
          }
        } else {
          optionClassName = `.${prefixcls}-option-selected`;
          if (index !== undefined) {
            optionClassName = `.${prefixcls}-option:nth-child(${index + 1})`;
          }
        }
        let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`);
        if (Array.isArray(destNode)) {
          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();
    this.selectOptionListID = getUuidShort();
    this.selectID = this.props.id || getUuidShort();
  }
  componentWillUnmount() {
    this.foundation.destroy();
  }
  componentDidUpdate(prevProps, prevState) {
    const prevChildrenKeys = React.Children.toArray(prevProps.children).map(child => child.key);
    const nowChildrenKeys = React.Children.toArray(this.props.children).map(child => child.key);
    let isOptionsChanged = false;
    if (!_isEqual(prevChildrenKeys, nowChildrenKeys) || !_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 (!_isEqual(this.props.value, prevProps.value) || isOptionsChanged) {
      if ('value' in this.props) {
        this.foundation.handleValueChange(this.props.value);
      } else {
        this.foundation.handleOptionListChangeHadDefaultValue();
      }
    }
  }
  renderTriggerInput() {
    const {
      size,
      multiple,
      disabled,
      inputProps,
      filter
    } = this.props;
    const inputPropsCls = _get(inputProps, 'className');
    const inputcls = cls(`${prefixcls}-input`, {
      [`${prefixcls}-input-single`]: !multiple,
      [`${prefixcls}-input-multiple`]: multiple
    }, inputPropsCls);
    const {
      inputValue,
      focusIndex
    } = this.state;
    const selectInputProps = Object.assign({
      value: inputValue,
      disabled,
      className: inputcls,
      onChange: this.handleInputChange
    }, inputProps);
    let style = {};
    // Multiple choice mode
    if (multiple) {
      style = {
        width: inputValue ? `${inputValue.length * 16}px` : '2px'
      };
      selectInputProps.style = style;
    }
    return /*#__PURE__*/React.createElement(Input, Object.assign({
      ref: this.inputRef,
      size: size,
      "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
        if (multiple && Boolean(filter)) {
          this.setState({
            isFocus: true
          });
        }
        // prevent event bubbling which will fire trigger onFocus event
        e.stopPropagation();
        // e.nativeEvent.stopImmediatePropagation();
      },
      onBlur: e => this.foundation.handleInputBlur(e)
    }, selectInputProps));
  }
  renderDropdownInput() {
    const {
      size,
      multiple,
      disabled,
      inputProps,
      filter,
      searchPosition,
      searchPlaceholder
    } = this.props;
    const {
      inputValue,
      focusIndex
    } = this.state;
    const wrapperCls = cls(`${prefixcls}-dropdown-search-wrapper`, {});
    const inputPropsCls = _get(inputProps, 'className');
    const inputCls = cls(`${prefixcls}-dropdown-input`, {
      [`${prefixcls}-dropdown-input-single`]: !multiple,
      [`${prefixcls}-dropdown-input-multiple`]: multiple
    }, inputPropsCls);
    const selectInputProps = Object.assign(Object.assign({
      value: inputValue,
      disabled,
      className: inputCls,
      onChange: this.handleInputChange,
      placeholder: searchPlaceholder,
      showClear: true
    }, inputProps), {
      /**
       * When searchPosition is trigger, the keyboard events are bound to the outer trigger div, so there is no need to listen in input.
       * When searchPosition is dropdown, the popup and the outer trigger div are not parent- child relationships,
       * and bubbles cannot occur, so onKeydown needs to be listened in input.
       *  */
      onKeyDown: e => this.foundation._handleKeyDown(e)
    });
    return /*#__PURE__*/React.createElement("div", {
      className: wrapperCls
    }, /*#__PURE__*/React.createElement(Input, Object.assign({
      ref: this.dropdownInputRef,
      prefix: /*#__PURE__*/React.createElement(IconSearch, null),
      "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : ''
    }, selectInputProps)));
  }
  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);
  }
  search(value, event) {
    this.handleInputChange(value, event);
  }
  renderEmpty() {
    return /*#__PURE__*/React.createElement(Option, {
      empty: true,
      emptyContent: this.props.emptyContent
    });
  }
  renderLoading() {
    const loadingWrapperCls = `${prefixcls}-loading-wrapper`;
    return /*#__PURE__*/React.createElement("div", {
      className: loadingWrapperCls
    }, /*#__PURE__*/React.createElement(Spin, 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 = Object.assign(Object.assign({}, 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.createElement(Option, Object.assign({
        showTick: true
      }, option, {
        selected: option._selected,
        onSelect: (v, e) => this.onSelect(v, optionIndex, e),
        focused: isFocused,
        onMouseEnter: () => this.onOptionHover(optionIndex),
        style: optionStyle,
        key: option._keyInOptionList || option._keyInJsx || option.label + option.value + optionIndex,
        renderOptionItem: renderOptionItem,
        inputValue: inputValue,
        semiOptionId: `${this.selectID}-option-${optionIndex}`
      }), option.label);
    }
    return optionContent;
  }
  renderCreateOption(option, isFocused, optionIndex, style) {
    const {
      renderCreateItem
    } = this.props;
    // default render method
    if (typeof renderCreateItem === 'undefined') {
      const defaultCreateItem = /*#__PURE__*/React.createElement(Option, Object.assign({
        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.createElement(LocaleConsumer, {
        componentName: "Select"
      }, locale => (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
        className: `${prefixcls}-create-tips`
      }, locale.createText), option.value))));
      return defaultCreateItem;
    }
    const customCreateItem = renderCreateItem(option.value, isFocused, style);
    return (
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
      React.createElement("div", {
        role: "button",
        "aria-label": "Use the input box to create an optional item",
        onClick: e => this.onSelect(option, optionIndex, e),
        key: option.key || option.label
      }, customCreateItem)
    );
  }
  onOptionHover(optionIndex) {
    this.foundation.handleOptionMouseEnter(optionIndex);
  }
  renderWithGroup(visibleOptions) {
    const content = [];
    const groupStatus = new Map();
    visibleOptions.forEach((option, optionIndex) => {
      const parentGroup = option._parentGroup;
      const optionContent = this.renderOption(option, optionIndex);
      if (parentGroup && !groupStatus.has(parentGroup.label)) {
        const groupKey = typeof parentGroup.label === 'string' || typeof parentGroup.label === 'number' ? parentGroup.label : parentGroup.key;
        // when use with OptionGroup and group content not already insert
        const groupContent = /*#__PURE__*/React.createElement(OptionGroup, Object.assign({}, parentGroup, {
          key: groupKey
        }));
        groupStatus.set(parentGroup.label, true);
        content.push(groupContent);
      }
      content.push(optionContent);
    });
    return content;
  }
  renderVirtualizeList(visibleOptions) {
    const {
      virtualize
    } = this.props;
    const {
      direction
    } = this.context;
    const {
      height,
      width,
      itemSize
    } = virtualize;
    return /*#__PURE__*/React.createElement(List, {
      ref: this.virtualizeListRef,
      height: height || numbers.LIST_HEIGHT,
      itemCount: visibleOptions.length,
      itemSize: itemSize,
      itemData: {
        visibleOptions,
        renderOption: this.renderOption
      },
      width: width || '100%',
      style: {
        direction
      }
    }, VirtualRow);
  }
  renderOptions(children) {
    const {
      dropdownMinWidth,
      options,
      selections
    } = this.state;
    const {
      maxHeight,
      dropdownClassName,
      dropdownStyle,
      outerTopSlot,
      innerTopSlot,
      outerBottomSlot,
      innerBottomSlot,
      loading,
      virtualize,
      multiple,
      emptyContent,
      searchPosition,
      filter
    } = this.props;
    // Do a filter first, instead of directly judging in forEach, so that the focusIndex can correspond to
    const visibleOptions = options.filter(item => item._show);
    let listContent = this.renderWithGroup(visibleOptions);
    if (virtualize) {
      listContent = this.renderVirtualizeList(visibleOptions);
    }
    const style = Object.assign({
      minWidth: dropdownMinWidth
    }, dropdownStyle);
    const optionListCls = cls({
      [`${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: `${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
          [`${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: `${prefixcls}-option-list-outer-top-slot`,
        onMouseEnter: () => this.foundation.handleSlotMouseEnter()
      }, outerTopSlot) : null, searchPosition === strings.SEARCH_POSITION_DROPDOWN && filter ? this.renderDropdownInput() : null, /*#__PURE__*/React.createElement("div", {
        style: {
          maxHeight: `${maxHeight}px`
        },
        className: optionListCls,
        role: "listbox",
        "aria-multiselectable": multiple,
        onScroll: e => this.foundation.handleListScroll(e)
      }, innerTopSlot ? /*#__PURE__*/React.createElement("div", {
        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: `${prefixcls}-option-list-inner-bottom-slot`,
        onMouseEnter: () => this.foundation.handleSlotMouseEnter()
      }, innerBottomSlot) : null), outerBottomSlot ? /*#__PURE__*/React.createElement("div", {
        className: `${prefixcls}-option-list-outer-bottom-slot`,
        onMouseEnter: () => this.foundation.handleSlotMouseEnter()
      }, outerBottomSlot) : null)
    );
  }
  renderSingleSelection(selections, filterable) {
    let {
      renderSelectedItem,
      searchPosition
    } = 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 showInputInTrigger = searchPosition === strings.SEARCH_POSITION_TRIGGER;
    const spanCls = cls({
      [`${prefixcls}-selection-text`]: true,
      [`${prefixcls}-selection-placeholder`]: !renderText && renderText !== 0,
      [`${prefixcls}-selection-text-hide`]: inputValue && showInput && showInputInTrigger,
      [`${prefixcls}-selection-text-inactive`]: !inputValue && showInput && showInputInTrigger // Stack Input & RenderText(opacity 0.4)
    });
    const contentWrapperCls = `${prefixcls}-content-wrapper`;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: contentWrapperCls
    }, /*#__PURE__*/React.createElement("span", {
      className: spanCls,
      "x-semi-prop": "placeholder"
    }, renderText || renderText === 0 ? renderText : placeholder), filterable && showInput && showInputInTrigger ? this.renderTriggerInput() : null));
  }
  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 newOverFlowItemCount = selections.size - maxTagCount > 0 ? selections.size - maxTagCount + items.length - 1 : items.length - 1;
    if (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,
      key: String(selections.length),
      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,
      maxTagCount
    } = this.props;
    const {
      isFullTags
    } = this.state;
    let tagContent;
    if (typeof renderSelectedItem === 'undefined') {
      renderSelectedItem = optionNode => ({
        isRenderInTag: true,
        content: optionNode.label
      });
    }
    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 = /*#__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
      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,
      searchPosition
    } = 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({
      [`${prefixcls}-content-wrapper`]: true,
      [`${prefixcls}-content-wrapper-one-line`]: maxTagCount && !isOpen,
      [`${prefixcls}-content-wrapper-empty`]: !selectedItems.length
    });
    const spanCls = cls({
      [`${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;
    const showTriggerInput = filterable && searchPosition === strings.SEARCH_POSITION_TRIGGER;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: contentWrapperCls
    }, selectedItems && selectedItems.length ? tagContent : placeholderText, showTriggerInput ? this.renderTriggerInput() : null));
  }
  onMouseEnter(e) {
    this.foundation.handleMouseEnter(e);
  }
  onMouseLeave(e) {
    this.foundation.handleMouseLeave(e);
  }
  onKeyPress(e) {
    this.foundation.handleKeyPress(e);
  }
  /* Processing logic when popover visible changes */
  handlePopoverVisibleChange(status) {
    const {
      virtualize
    } = this.props;
    const {
      selections
    } = this.state;
    if (!status) {
      return;
    }
    if (virtualize) {
      let minItemIndex = -1;
      selections.forEach(item => {
        const itemIndex = _get(item, '_scrollIndex');
        /* When the itemIndex is legal */
        if (_isNumber(itemIndex) && itemIndex >= 0) {
          minItemIndex = minItemIndex !== -1 && minItemIndex < itemIndex ? minItemIndex : itemIndex;
        }
      });
      if (minItemIndex !== -1) {
        try {
          this.virtualizeListRef.current.scrollToItem(minItemIndex, 'center');
        } catch (error) {}
      }
    } else {
      this.foundation.updateScrollTop();
    }
  }
  renderSuffix() {
    const {
      suffix
    } = this.props;
    const suffixWrapperCls = cls({
      [`${prefixcls}-suffix`]: true,
      [`${prefixcls}-suffix-text`]: suffix && _isString(suffix),
      [`${prefixcls}-suffix-icon`]: isSemiIcon(suffix)
    });
    return /*#__PURE__*/React.createElement("div", {
      className: suffixWrapperCls,
      "x-semi-prop": "suffix"
    }, suffix);
  }
  renderPrefix() {
    const {
      prefix,
      insetLabel,
      insetLabelId
    } = this.props;
    const labelNode = prefix || insetLabel;
    const prefixWrapperCls = cls({
      [`${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,
      id: insetLabelId,
      "x-semi-prop": "prefix,insetLabel"
    }, labelNode);
  }
  renderSelection() {
    const _a = this.props,
      {
        disabled,
        multiple,
        filter,
        style,
        id,
        size,
        className,
        validateStatus,
        showArrow,
        suffix,
        prefix,
        insetLabel,
        placeholder,
        triggerRender,
        arrowIcon,
        clearIcon,
        borderless
      } = _a,
      rest = __rest(_a, ["disabled", "multiple", "filter", "style", "id", "size", "className", "validateStatus", "showArrow", "suffix", "prefix", "insetLabel", "placeholder", "triggerRender", "arrowIcon", "clearIcon", "borderless"]);
    const {
      selections,
      isOpen,
      keyboardEventSet,
      inputValue,
      isHovering,
      isFocus,
      showInput,
      focusIndex
    } = this.state;
    const useCustomTrigger = typeof triggerRender === 'function';
    const filterable = Boolean(filter); // filter（boolean || function）
    const selectionCls = useCustomTrigger ? cls(className) : cls(prefixcls, className, {
      [`${prefixcls}-borderless`]: borderless,
      [`${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: `${prefixcls}-arrow`,
      "x-semi-prop": "arrowIcon"
    }, arrowIcon)) : (/*#__PURE__*/React.createElement("div", {
      className: `${prefixcls}-arrow-empty`
    }));
    const clear = clearIcon ? clearIcon : /*#__PURE__*/React.createElement(IconClear, null);
    // semantics of onSearch are more in line with behavior, onChange is alias of onSearch, will be deprecate next major version
    const inner = useCustomTrigger ? (/*#__PURE__*/React.createElement(Trigger, {
      value: Array.from(selections.values()),
      inputValue: inputValue,
      onChange: this.handleInputChange,
      onSearch: this.handleInputChange,
      onRemove: item => this.foundation.removeTag(item),
      onClear: this.onClear,
      disabled: disabled,
      triggerRender: triggerRender,
      placeholder: placeholder,
      componentName: "Select",
      componentProps: Object.assign({}, this.props)
    })) : [/*#__PURE__*/React.createElement(Fragment, {
      key: "prefix"
    }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/React.createElement(Fragment, {
      key: "selection"
    }, /*#__PURE__*/React.createElement("div", {
      className: cls(`${prefixcls}-selection`)
    }, multiple ? this.renderMultipleSelection(selections, filterable) : this.renderSingleSelection(selections, filterable))), /*#__PURE__*/React.createElement(Fragment, {
      key: "suffix"
    }, suffix ? this.renderSuffix() : null), /*#__PURE__*/React.createElement(Fragment, {
      key: "clearicon"
    }, showClear ? (/*#__PURE__*/React.createElement("div", {
      className: cls(`${prefixcls}-clear`),
      onClick: this.onClear
    }, clear)) : arrowContent)];
    /**
     *
     * In disabled, searchable single-selection and display input, and searchable multi-selection
     * make combobox not focusable by tab key
     *
     * 在disabled，可搜索单选且显示input框，以及可搜索多选情况下
     * 让combobox无法通过tab聚焦
     */
    const tabIndex = disabled || filterable && showInput || filterable && multiple ? -1 : 0;
    return (
      /*#__PURE__*/
      /* eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex */
      React.createElement("div", Object.assign({
        role: "combobox",
        "aria-disabled": disabled,
        "aria-expanded": isOpen,
        "aria-controls": `${prefixcls}-${this.selectOptionListID}`,
        "aria-haspopup": "listbox",
        "aria-label": selections.size ? 'selected' : '',
        "aria-invalid": this.props['aria-invalid'],
        "aria-errormessage": this.props['aria-errormessage'],
        "aria-labelledby": this.props['aria-labelledby'],
        "aria-describedby": this.props['aria-describedby'],
        "aria-required": this.props['aria-required'],
        className: selectionCls,
        ref: ref => this.triggerRef.current = ref,
        onClick: e => this.foundation.handleClick(e),
        style: style,
        id: this.selectID,
        tabIndex: tabIndex,
        "aria-activedescendant": focusIndex !== -1 ? `${this.selectID}-option-${focusIndex}` : '',
        onMouseEnter: this.onMouseEnter,
        onMouseLeave: this.onMouseLeave,
        onFocus: e => this.foundation.handleTriggerFocus(e),
        onBlur: e => this.foundation.handleTriggerBlur(e),
        onKeyPress: this.onKeyPress
      }, keyboardEventSet, this.getDataAttr(rest)), inner)
    );
  }
  render() {
    const {
      direction
    } = this.context;
    const defaultPosition = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
    const {
      children,
      position = defaultPosition,
      zIndex,
      getPopupContainer,
      motion,
      autoAdjustOverflow,
      mouseLeaveDelay,
      mouseEnterDelay,
      spacing,
      stopPropagation,
      dropdownMargin
    } = this.props;
    const {
      isOpen,
      optionKey
    } = this.state;
    const selection = this.renderSelection();
    return /*#__PURE__*/React.createElement(Popover, {
      getPopupContainer: getPopupContainer,
      motion: motion,
      margin: dropdownMargin,
      autoAdjustOverflow: autoAdjustOverflow,
      mouseLeaveDelay: mouseLeaveDelay,
      mouseEnterDelay: mouseEnterDelay,
      zIndex: zIndex,
      ref: this.optionsRef,
      content: () => this.renderOptions(children),
      visible: isOpen,
      trigger: "custom",
      rePosKey: optionKey,
      position: position,
      spacing: spacing,
      stopPropagation: stopPropagation,
      disableArrowKeyDown: true,
      onVisibleChange: status => this.handlePopoverVisibleChange(status),
      afterClose: () => this.foundation.handlePopoverClose()
    }, selection);
  }
}
Select.contextType = ConfigContext;
Select.Option = Option;
Select.OptGroup = OptionGroup;
Select.propTypes = {
  'aria-describedby': PropTypes.string,
  'aria-errormessage': PropTypes.string,
  'aria-invalid': PropTypes.bool,
  'aria-labelledby': PropTypes.string,
  'aria-required': PropTypes.bool,
  autoFocus: PropTypes.bool,
  autoClearSearchValue: PropTypes.bool,
  borderless: PropTypes.bool,
  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,
  multiple: PropTypes.bool,
  // Whether to turn on the input box filtering function, when it is a function, it represents a custom filtering function
  filter: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
  // How many tags can you choose?
  max: PropTypes.number,
  // How many tabs are displayed at most, and the rest are displayed in + N
  maxTagCount: PropTypes.number,
  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  style: PropTypes.object,
  className: PropTypes.string,
  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),
  onSearch: PropTypes.func,
  getPopupContainer: PropTypes.func,
  dropdownClassName: PropTypes.string,
  dropdownStyle: PropTypes.object,
  dropdownMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  outerTopSlot: PropTypes.node,
  innerTopSlot: PropTypes.node,
  inputProps: PropTypes.object,
  outerBottomSlot: PropTypes.node,
  innerBottomSlot: PropTypes.node,
  optionList: PropTypes.array,
  dropdownMatchSelectWidth: PropTypes.bool,
  loading: PropTypes.bool,
  defaultOpen: PropTypes.bool,
  validateStatus: PropTypes.oneOf(strings.STATUS),
  defaultActiveFirstOption: PropTypes.bool,
  triggerRender: PropTypes.func,
  stopPropagation: PropTypes.bool,
  searchPosition: PropTypes.string,
  // motion doesn't need to be exposed
  motion: PropTypes.bool,
  onChangeWithObject: PropTypes.bool,
  suffix: PropTypes.node,
  prefix: PropTypes.node,
  insetLabel: PropTypes.node,
  insetLabelId: PropTypes.string,
  showClear: PropTypes.bool,
  showArrow: PropTypes.bool,
  renderSelectedItem: PropTypes.func,
  allowCreate: PropTypes.bool,
  renderCreateItem: PropTypes.func,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
  clickToHide: PropTypes.bool,
  onExceed: PropTypes.func,
  onCreate: PropTypes.func,
  remote: PropTypes.bool,
  onDeselect: PropTypes.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.func,
  autoAdjustOverflow: PropTypes.bool,
  mouseEnterDelay: PropTypes.number,
  mouseLeaveDelay: PropTypes.number,
  spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
  onBlur: PropTypes.func,
  onFocus: PropTypes.func,
  onClear: PropTypes.func,
  virtualize: PropTypes.object,
  renderOptionItem: PropTypes.func,
  onListScroll: PropTypes.func,
  arrowIcon: PropTypes.node,
  preventScroll: PropTypes.bool
  // open: PropTypes.bool,
  // tagClosable: PropTypes.bool,
};
Select.__SemiComponentName__ = "Select";
Select.defaultProps = getDefaultPropsFromGlobalConfig(Select.__SemiComponentName__, {
  stopPropagation: true,
  motion: true,
  borderless: false,
  zIndex: popoverNumbers.DEFAULT_Z_INDEX,
  // position: 'bottomLeft',
  filter: false,
  multiple: false,
  disabled: false,
  defaultOpen: false,
  allowCreate: false,
  placeholder: '',
  onDropdownVisibleChange: _noop,
  onChangeWithObject: false,
  onChange: _noop,
  onSearch: _noop,
  onMouseEnter: _noop,
  onMouseLeave: _noop,
  onDeselect: _noop,
  onSelect: _noop,
  onCreate: _noop,
  onExceed: _noop,
  onFocus: _noop,
  onBlur: _noop,
  onClear: _noop,
  onListScroll: _noop,
  maxHeight: numbers.LIST_HEIGHT,
  dropdownMatchSelectWidth: true,
  defaultActiveFirstOption: true,
  showArrow: true,
  showClear: false,
  searchPosition: strings.SEARCH_POSITION_TRIGGER,
  remote: false,
  autoAdjustOverflow: true,
  autoClearSearchValue: true,
  arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, {
    "aria-label": ''
  }),
  showRestTagsPopover: false,
  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
});
export default Select;