@ucloud-fe/react-components 1.4.5 → 1.5.1

package/lib/components/Select/Select.js

@@ -11,7 +11,7 @@ exports.default = exports.deprecatedLogForPopover = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,7 +19,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
 
@@ -27,15 +27,21 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Popover = _interopRequireDefault(require("../../components/Popover"));
 
-var _ConfigContext = _interopRequireDefault(require("../../components/ConfigProvider/ConfigContext"));
+var _Tag = _interopRequireDefault(require("../../components/Tag"));
+
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
+var _Search = require("../../sharedComponents/Search");
 
 var _useLocale = _interopRequireDefault(require("../../components/LocaleProvider/useLocale"));
 
-var _group3 = require("../../hooks/group");
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
 
-var _usePopoverConfig = require("../../hooks/usePopoverConfig");
+var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
 
 var _useUncontrolled5 = _interopRequireDefault(require("../../hooks/useUncontrolled"));
 
@@ -51,23 +57,32 @@ var _isObject = _interopRequireDefault(require("../../utils/isObject"));
 
 var _isEmpty = _interopRequireDefault(require("../../utils/isEmpty"));
 
+var _style = require("../../components/Input/style");
+
+var _VirtualScrollList = _interopRequireDefault(require("../../sharedComponents/VirtualScrollList"));
+
 var _Option = require("./Option");
 
 var _Group = _interopRequireDefault(require("./Group"));
 
 var _Extra = _interopRequireDefault(require("./Extra"));
 
-var _style = require("./style");
+var _style2 = require("./style");
 
 var _SelectContext = _interopRequireDefault(require("./SelectContext"));
 
 var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
 
-var _excluded = ["size", "disabled", "multiple", "placeholder", "renderContent", "renderSelector", "renderPopup", "value", "visible", "locale", "dataSource"],
-    _excluded2 = ["content"],
-    _excluded3 = ["size", "value", "defaultValue", "onChange", "onVisibleChange", "disabled", "search", "multiple", "renderContent", "renderSelector", "placeholder", "locale", "options", "children", "emptyContent", "showSelectAll", "extra", "customStyle", "popover", "popoverProps", "renderPopup", "virtualList"];
+var _Overflow = _interopRequireWildcard(require("./Overflow"));
 
-var _this = void 0;
+var _this7 = void 0;
+
+var _excluded = ["v1"],
+    _excluded2 = ["content"],
+    _excluded3 = ["content"],
+    _excluded4 = ["v1", "size", "disabled", "multiple", "placeholder", "renderContent", "renderSelector", "renderPopup", "value", "onChange", "visible", "locale", "dataSource", "search", "searchValue", "setSearchValue", "wrapRef", "clearable", "styleType", "block"],
+    _excluded5 = ["items", "onClose", "disabled"],
+    _excluded6 = ["size", "value", "defaultValue", "onChange", "onVisibleChange", "disabled", "search", "multiple", "renderContent", "renderSelector", "placeholder", "locale", "options", "children", "emptyContent", "showSelectAll", "extra", "clearable", "customStyle", "popover", "popoverProps", "renderPopup", "virtualList", "block", "styleType"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -82,6 +97,9 @@ exports.deprecatedLogForPopover = deprecatedLogForPopover;
 var warnLogForVirtualList = (0, _warning.onceWarning)('Select virtualList only valid when use options');
 var warnLogForCustomHeight = (0, _warning.onceWarning)('CustomStyle.optionListMaxHeight is invalid when use virtualList, please use virtualList.height');
 var warnLogForSearchProps = (0, _warning.onceWarning)("Don't use item.props in custom search, just use item as props.");
+var warnLogForSubGroup = (0, _deprecatedLog.default)('Select.Group', 'Cascader');
+var popoverStretch = ['minWidth'];
+var blockPopoverStretch = ['width'];
 var groupOptions = {
   itemTag: 'isMenuItem',
   subGroupTag: 'isMenuSubMenu',
@@ -93,227 +111,133 @@ var groupOptions = {
   SubGroupComponent: _Group.default
 };
 
-var Selector = function Selector(_ref) {
-  var _this2 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var size = _ref.size,
-      disabled = _ref.disabled,
-      multiple = _ref.multiple,
-      placeholder = _ref.placeholder,
-      renderContent = _ref.renderContent,
-      renderSelector = _ref.renderSelector,
-      renderPopup = _ref.renderPopup,
-      value = _ref.value,
-      visible = _ref.visible,
-      locale = _ref.locale,
-      dataSource = _ref.dataSource,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  placeholder = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    return placeholder || locale.placeholder;
-  }.bind(this), [locale.placeholder, placeholder]);
-  var defaultRenderContent = (0, _react.useCallback)(function (value, valueChild) {
-    (0, _newArrowCheck2.default)(this, _this2);
+var groupChildrenAsDataSource = function groupChildrenAsDataSource(children) {
+  var _this = this;
 
-    if (!multiple) {
-      if (value === undefined) {
-        return placeholder;
-      } else {
-        return valueChild;
-      }
-    } else {
-      if (value && value.length) {
-        return "".concat(locale.selected).concat(value.length).concat(locale.items);
-      } else {
-        return placeholder;
-      }
-    }
-  }.bind(this), [locale.items, locale.selected, multiple, placeholder]);
-  var getContent = (0, _react.useCallback)(function () {
-    var _this3 = this;
+  var globalDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-    (0, _newArrowCheck2.default)(this, _this2);
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    itemTag: 'isItem',
+    subGroupTag: 'isSubGroup',
+    itemKeyName: 'itemKey',
+    subGroupKeyName: 'subGroupKey'
+  },
+      itemTag = _ref.itemTag,
+      subGroupTag = _ref.subGroupTag,
+      itemKeyName = _ref.itemKeyName,
+      subGroupKeyName = _ref.subGroupKeyName;
 
-    var _dataSource = (0, _slicedToArray2.default)(dataSource, 5),
-        _dataSource$ = _dataSource[4],
-        childrenMap = _dataSource$ === void 0 ? new Map() : _dataSource$;
+  var searchValue = arguments.length > 3 ? arguments[3] : undefined;
+  var handleSearch = arguments.length > 4 ? arguments[4] : undefined;
+  var subGroupMap = new Map();
+  var childrenMap = new Map();
 
-    var valueChild;
+  var _group = function group(children, disabled, prefix) {
+    var _this2 = this;
 
-    var getValueChild = function getValueChild(v) {
-      (0, _newArrowCheck2.default)(this, _this3);
-      return childrenMap.has(v) ? childrenMap.get(v) : v;
-    }.bind(this);
+    (0, _newArrowCheck2.default)(this, _this);
+    var validKeys = [];
+    var disabledKeys = [];
 
-    if (!multiple) {
-      valueChild = getValueChild(value);
-    } else {
-      var _value = value ? (0, _toConsumableArray2.default)(value) : []; // only get the top twenty item child for better performance
+    var l = _react.default.Children.count(children);
 
+    var renderChildren = [];
 
-      if (_value.length > 20) {
-        _value.length = 20;
-      }
+    _react.default.Children.forEach(children, function (child, i) {
+      (0, _newArrowCheck2.default)(this, _this2);
+      var isFirst = i === 0;
+      var isLast = i === l - 1;
 
-      valueChild = _value.map(getValueChild);
-    }
+      if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+        var _child$type, _child$type2;
 
-    if (renderContent) {
-      return renderContent(value, valueChild);
-    } else {
-      return defaultRenderContent(value, valueChild);
-    }
-  }.bind(this), [dataSource, defaultRenderContent, multiple, renderContent, value]);
-  var content = (0, _react.useMemo)(getContent, [getContent]); // 自定义渲染弹层时，开发者可能不传入 options 和 children，导致 content memo deps 不触发变更，故强制更新
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if ((_child$type = child.type) !== null && _child$type !== void 0 && _child$type[itemTag]) {
+          var _props = child.props;
 
-  if (renderPopup) content = getContent();
+          var _key = _props[itemKeyName] === undefined ? child.key : _props[itemKeyName];
 
-  if (renderSelector) {
-    var selector = renderSelector(content, visible) || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+          var _visible = searchValue ? handleSearch(_key, child.props) : true;
 
-    return /*#__PURE__*/_react.default.isValidElement(selector) ? /*#__PURE__*/_react.default.cloneElement(selector, rest) : null;
-  }
+          if (_visible) {
+            var _ref2, _React$cloneElement;
 
-  var title = typeof content === 'string' ? content : undefined;
-  return /*#__PURE__*/_react.default.createElement(_style.SSelector, (0, _extends2.default)({
-    styleType: "border",
-    size: size,
-    disabled: disabled,
-    title: title
-  }, rest), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.selectorContentCls,
-    key: "content"
-  }, content), /*#__PURE__*/_react.default.createElement(_style.Arrow, {
-    key: "icon",
-    type: visible ? 'arrow-up' : 'arrow-down'
-  }));
-}.bind(void 0);
+            var isDisabled = disabled || _props.disabled;
 
-var Popup = function Popup(_ref2) {
-  var _this4 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var extra = _ref2.extra,
-      _ref2$customStyle = _ref2.customStyle,
-      customStyle = _ref2$customStyle === void 0 ? {} : _ref2$customStyle,
-      search = _ref2.search,
-      multiple = _ref2.multiple,
-      emptyContent = _ref2.emptyContent,
-      showSelectAll = _ref2.showSelectAll,
-      value = _ref2.value,
-      renderPopup = _ref2.renderPopup,
-      options = _ref2.options,
-      children = _ref2.children,
-      onChange = _ref2.onChange,
-      locale = _ref2.locale,
-      handleVisibleChange = _ref2.handleVisibleChange,
-      hidePopup = _ref2.hidePopup,
-      dataSource = _ref2.dataSource,
-      searchValue = _ref2.searchValue,
-      setSearchValue = _ref2.setSearchValue,
-      virtualList = _ref2.virtualList;
-  var handleChange = (0, _react.useCallback)(function (value) {
-    (0, _newArrowCheck2.default)(this, _this4);
+            if (isDisabled) {
+              disabledKeys.push(_key);
+            } else {
+              validKeys.push(_key);
+            }
 
-    if (!multiple) {
-      handleVisibleChange(false);
-      onChange(value[0]);
-    } else {
-      onChange(value);
-    }
-  }.bind(this), [multiple, onChange, handleVisibleChange]);
-  var handleSearchInput = (0, _react.useCallback)(function (e) {
-    (0, _newArrowCheck2.default)(this, _this4);
-    setSearchValue(e.target.value);
-  }.bind(this), [setSearchValue]);
-  var finalExtra = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this4);
+            var display = Array.isArray(_visible) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _visible[0], /*#__PURE__*/_react.default.createElement(_Search.Highlight, null, _visible[1]), _visible[2]) : (_ref2 = _props.children) !== null && _ref2 !== void 0 ? _ref2 : _key;
+            renderChildren.push( /*#__PURE__*/_react.default.cloneElement(child, (_React$cloneElement = {}, (0, _defineProperty2.default)(_React$cloneElement, itemKeyName, _key), (0, _defineProperty2.default)(_React$cloneElement, "disabled", globalDisabled || isDisabled), (0, _defineProperty2.default)(_React$cloneElement, "isFirst", isFirst), (0, _defineProperty2.default)(_React$cloneElement, "isLast", isLast), (0, _defineProperty2.default)(_React$cloneElement, "key", _key), (0, _defineProperty2.default)(_React$cloneElement, "children", display), _React$cloneElement)));
+            childrenMap.set(_key, display);
+          } else {
+            childrenMap.set(_key, _props.children);
+          } // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-    if (typeof extra === 'function') {
-      return /*#__PURE__*/_react.default.createElement(_Extra.default, null, extra(hidePopup));
-    } else if (!(0, _isEmpty.default)(extra)) {
-      if ( /*#__PURE__*/_react.default.isValidElement(extra)) {
-        return /*#__PURE__*/_react.default.createElement(_Extra.default, null, extra);
-      } else if ((0, _isObject.default)(extra)) {
-        var _ref3 = extra,
-            _content = _ref3.content,
-            rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-        return /*#__PURE__*/_react.default.createElement(_Extra.default, rest, _content);
-      }
-    }
-  }.bind(this), [extra, hidePopup]);
+        } else if (subGroupTag && subGroupKeyName && (_child$type2 = child.type) !== null && _child$type2 !== void 0 && _child$type2[subGroupTag]) {
+          var _React$cloneElement2;
 
-  if (renderPopup) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderPopup({
-      handleVisible: handleVisibleChange,
-      onChange: onChange,
-      value: value,
-      multiple: multiple,
-      extra: extra,
-      search: search,
-      children: children,
-      options: options
-    }));
-  }
+          var _props2 = child.props;
 
-  var maxWidth = customStyle.popupMaxWidth ? customStyle.popupMaxWidth : 'none';
+          var _key2 = _props2[subGroupKeyName] || child.key || "".concat(prefix, "-").concat(i);
 
-  var newCustomStyle = _objectSpread({}, customStyle);
+          var _isDisabled = disabled || _props2.disabled;
 
-  if (virtualList) {
-    newCustomStyle.optionListMaxHeight = 'none';
-    if ('optionListMaxHeight' in newCustomStyle) warnLogForCustomHeight();
-  }
+          var _group2 = _group(child.props.children, _isDisabled, _key2),
+              _group3 = (0, _slicedToArray2.default)(_group2, 3),
+              subValidKeys = _group3[0],
+              subDisabledKeys = _group3[1],
+              subRenderChildren = _group3[2];
+
+          subGroupMap.set(_key2, {
+            validKeys: subValidKeys,
+            disabledKeys: subDisabledKeys
+          });
+          validKeys.push.apply(validKeys, (0, _toConsumableArray2.default)(subValidKeys));
+          disabledKeys.push.apply(disabledKeys, (0, _toConsumableArray2.default)(subDisabledKeys));
+          renderChildren.push( /*#__PURE__*/_react.default.cloneElement(child, (_React$cloneElement2 = {
+            disabled: globalDisabled || _isDisabled
+          }, (0, _defineProperty2.default)(_React$cloneElement2, subGroupKeyName, _key2), (0, _defineProperty2.default)(_React$cloneElement2, "isFirst", isFirst), (0, _defineProperty2.default)(_React$cloneElement2, "isLast", isLast), (0, _defineProperty2.default)(_React$cloneElement2, "key", _key2), _React$cloneElement2), subRenderChildren));
+        } else {
+          renderChildren.push(child);
+        }
+      }
+    }.bind(this));
 
-  var renderEmptyContent = function renderEmptyContent() {
-    (0, _newArrowCheck2.default)(this, _this4);
-    return emptyContent || /*#__PURE__*/_react.default.createElement(_style.EmptyContentWrapper, null, locale.emptyTip);
+    return [validKeys, disabledKeys, renderChildren];
   }.bind(this);
 
-  return /*#__PURE__*/_react.default.createElement(_style.MenuWrap, null, search && /*#__PURE__*/_react.default.createElement(_style.SelectSearchInput, {
-    onChange: handleSearchInput,
-    value: searchValue,
-    status: "default"
-  }), children || options !== null && options !== void 0 && options.length ? /*#__PURE__*/_react.default.createElement(_style.BlockMenu, {
-    onChange: handleChange,
-    customStyle: newCustomStyle,
-    menuCustomStyle: {
-      maxWidth: maxWidth
-    },
-    dataSource: dataSource,
-    multiple: multiple,
-    showSelectAll: showSelectAll,
-    selectedKeys: multiple ? value : [value],
-    virtualList: options ? virtualList : false
-  }) : /*#__PURE__*/_react.default.createElement(_style.BlockMenu, null, renderEmptyContent()), finalExtra ? /*#__PURE__*/_react.default.createElement(_style.FooterWrap, null, finalExtra) : null);
-}.bind(void 0);
+  return [].concat((0, _toConsumableArray2.default)(_group(children, false, 'group-root')), [subGroupMap, childrenMap]);
+};
 
 var groupOptionsAsDataSource = function groupOptionsAsDataSource(options) {
-  var _this5 = this;
+  var _this3 = this;
 
   var globalDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-  var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+  var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     subGroupName: 'children',
     displayName: 'label',
     itemKeyName: 'itemKey',
     subGroupKeyName: 'subGroupKey',
     ItemComponent: function ItemComponent() {
-      (0, _newArrowCheck2.default)(this, _this5);
+      (0, _newArrowCheck2.default)(this, _this3);
       return null;
     }.bind(this),
     SubGroupComponent: function SubGroupComponent() {
-      (0, _newArrowCheck2.default)(this, _this5);
+      (0, _newArrowCheck2.default)(this, _this3);
       return null;
     }.bind(this)
   },
-      subGroupName = _ref4.subGroupName,
-      displayName = _ref4.displayName,
-      itemKeyName = _ref4.itemKeyName,
-      subGroupKeyName = _ref4.subGroupKeyName,
-      ItemComponent = _ref4.ItemComponent,
-      SubGroupComponent = _ref4.SubGroupComponent;
+      subGroupName = _ref3.subGroupName,
+      displayName = _ref3.displayName,
+      itemKeyName = _ref3.itemKeyName,
+      subGroupKeyName = _ref3.subGroupKeyName,
+      ItemComponent = _ref3.ItemComponent,
+      SubGroupComponent = _ref3.SubGroupComponent;
 
   var searchValue = arguments.length > 3 ? arguments[3] : undefined;
   var handleSearch = arguments.length > 4 ? arguments[4] : undefined;
@@ -321,12 +245,12 @@ var groupOptionsAsDataSource = function groupOptionsAsDataSource(options) {
   var childrenMap = new Map();
 
   var isValidKey = function isValidKey(v) {
-    (0, _newArrowCheck2.default)(this, _this5);
+    (0, _newArrowCheck2.default)(this, _this3);
     return typeof v === 'string' || typeof v === 'number';
   }.bind(this);
 
   var group = function group(options) {
-    var _this6 = this;
+    var _this4 = this;
 
     var disabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var prefixKey = arguments.length > 2 ? arguments[2] : undefined;
@@ -334,65 +258,67 @@ var groupOptionsAsDataSource = function groupOptionsAsDataSource(options) {
     var disabledKeys = [];
     var renderChildren = [];
     options.forEach(function (child, i) {
-      (0, _newArrowCheck2.default)(this, _this6);
+      (0, _newArrowCheck2.default)(this, _this4);
       var subChildren = child[subGroupName];
 
       if (subChildren) {
-        var _key = child[subGroupKeyName] || child.key || "".concat(prefixKey, "-").concat(i);
+        var _key3 = child[subGroupKeyName] || child.key || "".concat(prefixKey, "-").concat(i);
 
         var reactKey = child.key || isValidKey(child[subGroupKeyName]) ? child[subGroupKeyName] : "".concat(prefixKey, "-").concat(i);
         var isDisabled = disabled || child.disabled;
 
-        var _group = group(subChildren, isDisabled, _key),
-            _group2 = (0, _slicedToArray2.default)(_group, 3),
-            subValidKeys = _group2[0],
-            subDisabledKeys = _group2[1],
-            subRenderChildren = _group2[2];
+        var _group4 = group(subChildren, isDisabled, _key3),
+            _group5 = (0, _slicedToArray2.default)(_group4, 3),
+            subValidKeys = _group5[0],
+            subDisabledKeys = _group5[1],
+            subRenderChildren = _group5[2];
 
-        subGroupMap.set(_key, {
+        subGroupMap.set(_key3, {
           validKeys: subValidKeys,
           disabledKeys: subDisabledKeys
         });
         validKeys.push.apply(validKeys, (0, _toConsumableArray2.default)(subValidKeys));
         disabledKeys.push.apply(disabledKeys, (0, _toConsumableArray2.default)(subDisabledKeys));
 
-        var _visible = searchValue ? !!subRenderChildren.length : true;
+        var _visible2 = searchValue ? !!subRenderChildren.length : true;
 
-        if (_visible) {
+        if (_visible2) {
           renderChildren.push( /*#__PURE__*/_react.default.createElement(SubGroupComponent, (0, _extends2.default)({
             key: reactKey
           }, child, (0, _defineProperty2.default)({
             disabled: globalDisabled || isDisabled
-          }, subGroupKeyName, _key)), subRenderChildren));
+          }, subGroupKeyName, _key3)), subRenderChildren));
         }
       } else {
-        var _ref6;
-
-        var _key2 = child[itemKeyName] === undefined ? child.key : child[itemKeyName];
+        var _key4 = child[itemKeyName] === undefined ? child.key : child[itemKeyName];
 
         var _reactKey = child.key || isValidKey(child[itemKeyName]) ? child[itemKeyName] : "".concat(prefixKey, "-").concat(i);
 
-        var _isDisabled = disabled || child.disabled;
+        var _isDisabled2 = disabled || child.disabled;
 
-        if (_isDisabled) {
-          disabledKeys.push(_key2);
-        } else {
-          validKeys.push(_key2);
-        }
+        var _visible3 = searchValue ? handleSearch(_key4, child) : true;
 
-        var display = (_ref6 = child[displayName]) !== null && _ref6 !== void 0 ? _ref6 : _key2;
+        if (_visible3) {
+          var _ref5;
 
-        var _visible2 = searchValue ? handleSearch(_key2, child) : true;
+          if (_isDisabled2) {
+            disabledKeys.push(_key4);
+          } else {
+            validKeys.push(_key4);
+          }
 
-        if (_visible2) {
+          var display = Array.isArray(_visible3) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _visible3[0], /*#__PURE__*/_react.default.createElement(_Search.Highlight, null, _visible3[1]), _visible3[2]) : (_ref5 = child[displayName]) !== null && _ref5 !== void 0 ? _ref5 : _key4;
           renderChildren.push( /*#__PURE__*/_react.default.createElement(ItemComponent, (0, _extends2.default)({
             key: _reactKey
           }, child, (0, _defineProperty2.default)({
-            disabled: globalDisabled || _isDisabled
-          }, itemKeyName, _key2)), display));
-        }
+            disabled: globalDisabled || _isDisabled2
+          }, itemKeyName, _key4)), display));
+          childrenMap.set(_key4, display);
+        } else {
+          var _ref7;
 
-        childrenMap.set(_key2, display);
+          childrenMap.set(_key4, (_ref7 = child[displayName]) !== null && _ref7 !== void 0 ? _ref7 : child[itemKeyName]);
+        }
       }
     }.bind(this));
     return [validKeys, disabledKeys, renderChildren];
@@ -401,50 +327,892 @@ var groupOptionsAsDataSource = function groupOptionsAsDataSource(options) {
   return [].concat((0, _toConsumableArray2.default)(group(options, false, 'group-root')), [subGroupMap, childrenMap]);
 };
 
-var Select = function Select(_ref8) {
+var Popup = /*#__PURE__*/_react.default.memo(function Popup(_ref8) {
+  var v1 = _ref8.v1,
+      props = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
+  var PopupComponent = props.renderPopup ? CustomPopup : v1 ? PopupV1 : PopupV2;
+  return /*#__PURE__*/_react.default.createElement(PopupComponent, props);
+});
+
+var CustomPopup = /*#__PURE__*/_react.default.memo(function CustomPopup(props) {
+  var onChange = props.onChange,
+      value = props.value,
+      multiple = props.multiple,
+      extra = props.extra,
+      search = props.search,
+      children = props.children,
+      options = props.options,
+      handleVisibleChange = props.handleVisibleChange,
+      renderPopup = props.renderPopup;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderPopup === null || renderPopup === void 0 ? void 0 : renderPopup({
+    handleVisible: handleVisibleChange,
+    onChange: onChange,
+    value: value,
+    multiple: multiple,
+    extra: extra,
+    search: search,
+    children: children,
+    options: options
+  }));
+});
+
+var PopupV1 = /*#__PURE__*/_react.default.memo(function PopupV1(_ref9) {
+  var _this5 = this;
+
+  var extra = _ref9.extra,
+      _ref9$customStyle = _ref9.customStyle,
+      customStyle = _ref9$customStyle === void 0 ? {} : _ref9$customStyle,
+      search = _ref9.search,
+      multiple = _ref9.multiple,
+      _emptyContent = _ref9.emptyContent,
+      showSelectAll = _ref9.showSelectAll,
+      value = _ref9.value,
+      options = _ref9.options,
+      children = _ref9.children,
+      onChange = _ref9.onChange,
+      locale = _ref9.locale,
+      handleVisibleChange = _ref9.handleVisibleChange,
+      hidePopup = _ref9.hidePopup,
+      dataSource = _ref9.dataSource,
+      searchValue = _ref9.searchValue,
+      setSearchValue = _ref9.setSearchValue,
+      virtualList = _ref9.virtualList;
+  var handleChange = (0, _react.useCallback)(function (value) {
+    (0, _newArrowCheck2.default)(this, _this5);
+
+    if (!multiple) {
+      handleVisibleChange(false);
+      onChange(value[0]);
+    } else {
+      onChange(value);
+    }
+  }.bind(this), [multiple, onChange, handleVisibleChange]);
+  var handleSearchInput = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this5);
+    setSearchValue(e.target.value);
+  }.bind(this), [setSearchValue]);
+  var finalExtra = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this5);
+
+    if (typeof extra === 'function') {
+      return /*#__PURE__*/_react.default.createElement(_Extra.default, null, extra(hidePopup));
+    } else if (!(0, _isEmpty.default)(extra)) {
+      if ( /*#__PURE__*/_react.default.isValidElement(extra)) {
+        return /*#__PURE__*/_react.default.createElement(_Extra.default, null, extra);
+      } else if ((0, _isObject.default)(extra)) {
+        var _ref10 = extra,
+            _content = _ref10.content,
+            rest = (0, _objectWithoutProperties2.default)(_ref10, _excluded2);
+        return /*#__PURE__*/_react.default.createElement(_Extra.default, rest, _content);
+      }
+    }
+  }.bind(this), [extra, hidePopup]);
+  var maxWidth = customStyle.popupMaxWidth ? customStyle.popupMaxWidth : 'none';
+
+  var newCustomStyle = _objectSpread({}, customStyle);
+
+  if (virtualList) {
+    if ('optionListMaxHeight' in newCustomStyle) {
+      warnLogForCustomHeight();
+    }
+
+    newCustomStyle.optionListMaxHeight = 'none';
+  }
+
+  var emptyContent = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this5);
+    return _emptyContent || /*#__PURE__*/_react.default.createElement(_style2.EmptyContentWrapper, null, locale.emptyTip);
+  }.bind(this), [_emptyContent, locale]);
+  return /*#__PURE__*/_react.default.createElement(_style2.MenuWrap, {
+    maxWidth: maxWidth
+  }, search && /*#__PURE__*/_react.default.createElement(_style2.SelectSearchInput, {
+    block: true,
+    onChange: handleSearchInput,
+    value: searchValue,
+    status: "default"
+  }), children || options !== null && options !== void 0 && options.length ? /*#__PURE__*/_react.default.createElement(_style2.BlockMenu, {
+    onChange: handleChange,
+    customStyle: newCustomStyle,
+    menuCustomStyle: {
+      maxWidth: 'none'
+    },
+    dataSource: dataSource,
+    multiple: multiple,
+    showSelectAll: showSelectAll,
+    selectedKeys: multiple ? value : [value],
+    virtualList: options ? virtualList : false
+  }) : /*#__PURE__*/_react.default.createElement(_style2.BlockMenu, {
+    customStyle: newCustomStyle,
+    menuCustomStyle: {
+      maxWidth: 'none'
+    }
+  }, emptyContent), finalExtra ? /*#__PURE__*/_react.default.createElement(_style2.FooterWrap, null, finalExtra) : null);
+});
+
+var PopupV2 = /*#__PURE__*/_react.default.memo(function PopupV2(_ref11) {
+  var _this6 = this,
+      _dataSource$;
+
+  var extra = _ref11.extra,
+      _ref11$customStyle = _ref11.customStyle,
+      customStyle = _ref11$customStyle === void 0 ? {} : _ref11$customStyle,
+      multiple = _ref11.multiple,
+      _emptyContent = _ref11.emptyContent,
+      showSelectAll = _ref11.showSelectAll,
+      value = _ref11.value,
+      options = _ref11.options,
+      children = _ref11.children,
+      onChange = _ref11.onChange,
+      locale = _ref11.locale,
+      handleVisibleChange = _ref11.handleVisibleChange,
+      hidePopup = _ref11.hidePopup,
+      dataSource = _ref11.dataSource,
+      virtualList = _ref11.virtualList,
+      searchValue = _ref11.searchValue;
+  var menuRef = (0, _react.useRef)(null);
+  var handleChange = (0, _react.useCallback)(function (value) {
+    (0, _newArrowCheck2.default)(this, _this6);
+
+    if (!multiple) {
+      handleVisibleChange(false);
+      onChange(value[0]);
+    } else {
+      onChange(value);
+    }
+  }.bind(this), [multiple, onChange, handleVisibleChange]);
+  var handleSelectAll = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this6);
+    var validKeys = dataSource[0];
+    var newValue = Array.from(new Set([].concat((0, _toConsumableArray2.default)(value || []), (0, _toConsumableArray2.default)(validKeys))));
+    onChange(newValue);
+  }.bind(this), [dataSource, onChange, value]);
+  var emptyContent = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this6);
+    return _emptyContent || /*#__PURE__*/_react.default.createElement(_style2.EmptyContentWrapper, null, locale.emptyTip);
+  }.bind(this), [_emptyContent, locale]);
+  var finalExtra = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this6);
+
+    if (typeof extra === 'function') {
+      return /*#__PURE__*/_react.default.createElement(_Extra.default, null, extra(hidePopup));
+    } else if (!(0, _isEmpty.default)(extra)) {
+      if ( /*#__PURE__*/_react.default.isValidElement(extra)) {
+        return /*#__PURE__*/_react.default.createElement(_Extra.default, null, extra);
+      } else if ((0, _isObject.default)(extra)) {
+        var _ref12 = extra,
+            _content2 = _ref12.content,
+            rest = (0, _objectWithoutProperties2.default)(_ref12, _excluded3);
+        return /*#__PURE__*/_react.default.createElement(_Extra.default, rest, _content2);
+      }
+    }
+  }.bind(this), [extra, hidePopup]);
+  var maxWidth = customStyle.popupMaxWidth ? customStyle.popupMaxWidth : 'none';
+
+  var newCustomStyle = _objectSpread({}, customStyle);
+
+  if (virtualList) {
+    if ('optionListMaxHeight' in newCustomStyle) {
+      warnLogForCustomHeight();
+    }
+
+    newCustomStyle.optionListMaxHeight = 'none';
+  }
+
+  var hasContent = (children || (options === null || options === void 0 ? void 0 : options.length)) && (Array.isArray(dataSource[2]) ? (_dataSource$ = dataSource[2]) === null || _dataSource$ === void 0 ? void 0 : _dataSource$.length : dataSource[2]);
+  return /*#__PURE__*/_react.default.createElement(_style2.MenuWrap, {
+    maxWidth: maxWidth
+  }, hasContent ? /*#__PURE__*/_react.default.createElement(_style2.BlockMenu, {
+    showSelectAll: showSelectAll && multiple && /*#__PURE__*/_react.default.createElement("div", {
+      className: _style2.selectAllBtnWrapCls,
+      key: "__select_select_all",
+      onClick: handleSelectAll
+    }, locale.selectAll, searchValue ? " (".concat(searchValue, ")") : ''),
+    onChange: handleChange,
+    customStyle: newCustomStyle,
+    menuCustomStyle: {
+      maxWidth: 'none'
+    },
+    dataSource: dataSource,
+    multiple: multiple,
+    selectedKeys: multiple ? value : [value],
+    virtualList: options ? virtualList : false,
+    ref: menuRef,
+    _selectStyle: multiple
+  }) : /*#__PURE__*/_react.default.createElement(_style2.BlockMenu, {
+    customStyle: newCustomStyle,
+    menuCustomStyle: {
+      maxWidth: 'none'
+    }
+  }, emptyContent), finalExtra ? /*#__PURE__*/_react.default.createElement(_style2.FooterWrap, null, finalExtra) : null);
+});
+
+var Selector = /*#__PURE__*/_react.default.memo(function Selector(_ref13) {
+  var v1 = _ref13.v1,
+      size = _ref13.size,
+      disabled = _ref13.disabled,
+      multiple = _ref13.multiple,
+      placeholder = _ref13.placeholder,
+      renderContent = _ref13.renderContent,
+      renderSelector = _ref13.renderSelector,
+      renderPopup = _ref13.renderPopup,
+      value = _ref13.value,
+      onChange = _ref13.onChange,
+      visible = _ref13.visible,
+      locale = _ref13.locale,
+      dataSource = _ref13.dataSource,
+      search = _ref13.search,
+      searchValue = _ref13.searchValue,
+      setSearchValue = _ref13.setSearchValue,
+      wrapRef = _ref13.wrapRef,
+      clearable = _ref13.clearable,
+      styleType = _ref13.styleType,
+      block = _ref13.block,
+      _popupProps = (0, _objectWithoutProperties2.default)(_ref13, _excluded4);
+
+  var props = {
+    size: size,
+    disabled: disabled,
+    multiple: multiple,
+    placeholder: placeholder,
+    renderContent: renderContent,
+    renderSelector: renderSelector,
+    renderPopup: renderPopup,
+    value: value,
+    onChange: onChange,
+    visible: visible,
+    locale: locale,
+    dataSource: dataSource,
+    search: search,
+    searchValue: searchValue,
+    setSearchValue: setSearchValue,
+    wrapRef: wrapRef,
+    clearable: clearable,
+    block: block,
+    _popupProps: _popupProps
+  };
+  var SelectorComponent = renderSelector ? CustomSelector : v1 ? SelectorV1 : multiple ? styleType === 'list' ? MultipleListSelector : MultipleSelector : SingleSelector;
+  return /*#__PURE__*/_react.default.createElement(SelectorComponent, props);
+});
+
+var useOldContent = function useOldContent(_ref14) {
+  var _this8 = this;
+
+  (0, _newArrowCheck2.default)(this, _this7);
+  var locale = _ref14.locale,
+      placeholder = _ref14.placeholder,
+      multiple = _ref14.multiple,
+      dataSource = _ref14.dataSource,
+      value = _ref14.value,
+      renderContent = _ref14.renderContent,
+      renderPopup = _ref14.renderPopup;
+  placeholder = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this8);
+    return placeholder || locale.placeholder;
+  }.bind(this), [locale.placeholder, placeholder]);
+  var defaultRenderContent = (0, _react.useCallback)(function (value, valueChild) {
+    (0, _newArrowCheck2.default)(this, _this8);
+
+    if (!multiple) {
+      if (value === undefined) {
+        return placeholder;
+      } else {
+        return valueChild;
+      }
+    } else {
+      if (value && value.length) {
+        return "".concat(locale.selected).concat(value.length).concat(locale.items);
+      } else {
+        return placeholder;
+      }
+    }
+  }.bind(this), [locale.items, locale.selected, multiple, placeholder]);
+  var getContent = (0, _react.useCallback)(function () {
+    var _this9 = this;
+
+    (0, _newArrowCheck2.default)(this, _this8);
+
+    var _dataSource = (0, _slicedToArray2.default)(dataSource, 5),
+        _dataSource$2 = _dataSource[4],
+        childrenMap = _dataSource$2 === void 0 ? new Map() : _dataSource$2;
+
+    var valueChild;
+
+    var getValueChild = function getValueChild(v) {
+      (0, _newArrowCheck2.default)(this, _this9);
+      return childrenMap.has(v) ? childrenMap.get(v) : v;
+    }.bind(this);
+
+    if (!multiple) {
+      valueChild = getValueChild(value);
+    } else {
+      var _value = value ? (0, _toConsumableArray2.default)(value) : []; // only get the top twenty item child for better performance
+
+
+      if (_value.length > 20) {
+        _value.length = 20;
+      }
+
+      valueChild = _value.map(getValueChild);
+    }
+
+    if (renderContent) {
+      return renderContent(value, valueChild);
+    } else {
+      return defaultRenderContent(value, valueChild);
+    }
+  }.bind(this), [dataSource, defaultRenderContent, multiple, renderContent, value]);
+  var content = (0, _react.useMemo)(getContent, [getContent]); // 自定义渲染弹层时，开发者可能不传入 options 和 children，导致 content memo deps 不触发变更，故强制更新
+
+  if (renderPopup) content = getContent();
+  return content;
+}.bind(void 0);
+
+var CustomSelector = /*#__PURE__*/_react.default.memo(function CustomSelector(props) {
+  var content = useOldContent(props); // eslint-disable-next-line react/prop-types
+
+  var renderSelector = props.renderSelector,
+      visible = props.visible,
+      _popupProps = props._popupProps;
+
+  var selector = (renderSelector === null || renderSelector === void 0 ? void 0 : renderSelector(content, visible)) || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+
+  return /*#__PURE__*/_react.default.isValidElement(selector) ? /*#__PURE__*/_react.default.cloneElement(selector, _popupProps) : null;
+});
+
+var SelectorV1 = /*#__PURE__*/_react.default.memo(function SelectorV1(props) {
+  var size = props.size,
+      disabled = props.disabled,
+      visible = props.visible,
+      _popupProps = props._popupProps;
+  var content = useOldContent(props);
+  var title = typeof content === 'string' ? content : undefined;
+  return /*#__PURE__*/_react.default.createElement(_style2.SSelector, (0, _extends2.default)({
+    styleType: "border",
+    size: size,
+    disabled: disabled,
+    title: title
+  }, _popupProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style2.selectorContentCls,
+    key: "content"
+  }, content), /*#__PURE__*/_react.default.createElement(_style2.Arrow, {
+    key: "icon",
+    type: visible ? 'arrow-up' : 'arrow-down'
+  }));
+});
+
+var RestListItem = /*#__PURE__*/_react.default.memo(function RestListItem(_ref15) {
+  var _this10 = this;
+
+  var item = _ref15.item,
+      disabled = _ref15.disabled,
+      onClose = _ref15.onClose;
+  var handleClose = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this10);
+    onClose(item.key);
+  }.bind(this), [item.key, onClose]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: item.key,
+    className: _style2.restItemCls
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    "data-role": "label"
+  }, item.children), !disabled && /*#__PURE__*/_react.default.createElement("span", {
+    "data-role": "close",
+    onClick: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    type: "cross"
+  })));
+});
+
+var RestList = /*#__PURE__*/_react.default.memo(function RestList(_ref16) {
+  var _this11 = this;
+
+  var items = _ref16.items,
+      onClose = _ref16.onClose,
+      disabled = _ref16.disabled,
+      rest = (0, _objectWithoutProperties2.default)(_ref16, _excluded5);
+  var prevent = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this11);
+    e.preventDefault();
+    e.stopPropagation();
+  }.bind(this), []);
+  return /*#__PURE__*/_react.default.createElement(_style2.SRestList, (0, _extends2.default)({}, rest, {
+    onClick: prevent,
+    onContextMenu: prevent
+  }), /*#__PURE__*/_react.default.createElement(_VirtualScrollList.default, {
+    width: 160,
+    height: 180
+  }, items.map(function (item) {
+    (0, _newArrowCheck2.default)(this, _this11);
+    return /*#__PURE__*/_react.default.createElement(RestListItem, {
+      item: item,
+      key: item.key,
+      onClose: onClose,
+      disabled: disabled
+    });
+  }.bind(this))));
+});
+
+var TagItem = /*#__PURE__*/_react.default.memo(function TagItem(_ref17) {
+  var _this12 = this;
+
+  var item = _ref17.item,
+      disabled = _ref17.disabled,
+      onClose = _ref17.onClose;
+  var handleClose = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this12);
+    onClose(item.key);
+  }.bind(this), [item.key, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_Tag.default, {
+    key: item.key,
+    closable: true,
+    disabled: disabled,
+    onClose: handleClose
+  }, item.children);
+});
+
+var restAlign = {
+  points: ['tl', 'br'],
+  overflow: {
+    adjustX: 1,
+    adjustY: 1
+  },
+  offset: [10, 10],
+  targetOffset: [0, 0]
+};
+
+var MultipleListSelector = /*#__PURE__*/_react.default.memo(function MultipleSelector(props) {
+  var _this13 = this;
+
+  var size = props.size,
+      disabled = props.disabled,
+      visible = props.visible,
+      dataSource = props.dataSource,
+      value = props.value,
+      onChange = props.onChange,
+      placeholder = props.placeholder,
+      search = props.search,
+      _props$searchValue = props.searchValue,
+      searchValue = _props$searchValue === void 0 ? '' : _props$searchValue,
+      setSearchValue = props.setSearchValue,
+      clearable = props.clearable,
+      locale = props.locale,
+      block = props.block,
+      _popupProps = props._popupProps;
+
+  var _dataSource2 = (0, _slicedToArray2.default)(dataSource, 5),
+      _dataSource2$ = _dataSource2[4],
+      childrenMap = _dataSource2$ === void 0 ? new Map() : _dataSource2$;
+
+  var inputRef = (0, _react.useRef)(null);
+  var items = (0, _react.useMemo)(function () {
+    var _this14 = this;
+
+    (0, _newArrowCheck2.default)(this, _this13);
+    return (value || []).map(function (v) {
+      (0, _newArrowCheck2.default)(this, _this14);
+      return {
+        key: v,
+        children: childrenMap.has(v) ? childrenMap.get(v) : v
+      };
+    }.bind(this));
+  }.bind(this), [childrenMap, value]);
+  var handleClose = (0, _react.useCallback)(function (key) {
+    var _this15 = this;
+
+    (0, _newArrowCheck2.default)(this, _this13);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value.filter(function (v) {
+      (0, _newArrowCheck2.default)(this, _this15);
+      return v !== key;
+    }.bind(this)));
+  }.bind(this), [onChange, value]);
+  var renderItem = (0, _react.useCallback)(function (item) {
+    (0, _newArrowCheck2.default)(this, _this13);
+    return /*#__PURE__*/_react.default.createElement(TagItem, {
+      key: item.key,
+      disabled: disabled,
+      onClose: handleClose,
+      item: item
+    });
+  }.bind(this), [disabled, handleClose]);
+  var handleInput = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this13);
+    setSearchValue(e.target.value);
+  }.bind(this), [setSearchValue]);
+  (0, _react.useEffect)(function () {
+    var _inputRef$current;
+
+    (0, _newArrowCheck2.default)(this, _this13);
+    if (visible) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+  }.bind(this), [visible]);
+  var handleClear = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this13);
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!disabled) {
+      var _inputRef$current2;
+
+      onChange === null || onChange === void 0 ? void 0 : onChange([]);
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+    }
+  }.bind(this), [disabled, onChange]);
+  var empty = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this13);
+    return !(value !== null && value !== void 0 && value.length);
+  }.bind(this), [value]);
+  var handleSelectorClick = (0, _react.useCallback)(function (e) {
+    var _inputRef$current3, _popupProps$onClick;
+
+    (0, _newArrowCheck2.default)(this, _this13);
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
+    (_popupProps$onClick = _popupProps.onClick) === null || _popupProps$onClick === void 0 ? void 0 : _popupProps$onClick.call(_popupProps, e);
+  }.bind(this), [_popupProps]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_style2.SSelectorMultiple, (0, _extends2.default)({
+    focused: visible,
+    empty: empty
+  }, _popupProps, {
+    onClick: handleSelectorClick,
+    block: block,
+    size: size,
+    disabled: disabled
+  }), /*#__PURE__*/_react.default.createElement(_style.InputPart, {
+    stretch: true,
+    className: _style2.measureWrapCls
+  }, placeholder && empty && !searchValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style2.placeholderCls
+  }, placeholder), !searchValue && !empty && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style2.placeholderCls, _style2.contentCls)
+  }, locale.selected, items.length, locale.items), search ? /*#__PURE__*/_react.default.createElement("input", {
+    value: searchValue,
+    ref: inputRef,
+    onChange: handleInput,
+    disabled: disabled
+  }) : null), /*#__PURE__*/_react.default.createElement(_style.Clear, {
+    clearable: clearable && !empty,
+    onClick: handleClear
+  }), /*#__PURE__*/_react.default.createElement(_style.InputPart, null, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    type: visible ? search ? 'search' : 'arrow-up' : 'arrow-down'
+  }))), items.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style2.listCls
+  }, /*#__PURE__*/_react.default.createElement(_Tag.default.Group, null, items.map(renderItem))) : null);
+});
+
+var MultipleSelector = /*#__PURE__*/_react.default.memo(function MultipleSelector(props) {
+  var _this16 = this;
+
+  var size = props.size,
+      disabled = props.disabled,
+      visible = props.visible,
+      dataSource = props.dataSource,
+      value = props.value,
+      onChange = props.onChange,
+      placeholder = props.placeholder,
+      search = props.search,
+      _props$searchValue2 = props.searchValue,
+      searchValue = _props$searchValue2 === void 0 ? '' : _props$searchValue2,
+      setSearchValue = props.setSearchValue,
+      wrapRef = props.wrapRef,
+      clearable = props.clearable,
+      block = props.block,
+      _popupProps = props._popupProps;
+
+  var _dataSource3 = (0, _slicedToArray2.default)(dataSource, 5),
+      _dataSource3$ = _dataSource3[4],
+      childrenMap = _dataSource3$ === void 0 ? new Map() : _dataSource3$;
+
+  var inputRef = (0, _react.useRef)(null);
+  var items = (0, _react.useMemo)(function () {
+    var _this17 = this;
+
+    (0, _newArrowCheck2.default)(this, _this16);
+    return (value || []).map(function (v) {
+      (0, _newArrowCheck2.default)(this, _this17);
+      return {
+        key: v,
+        children: childrenMap.has(v) ? childrenMap.get(v) : v
+      };
+    }.bind(this));
+  }.bind(this), [childrenMap, value]);
+  var handleClose = (0, _react.useCallback)(function (key) {
+    var _this18 = this;
+
+    (0, _newArrowCheck2.default)(this, _this16);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value.filter(function (v) {
+      (0, _newArrowCheck2.default)(this, _this18);
+      return v !== key;
+    }.bind(this)));
+  }.bind(this), [onChange, value]);
+  var popoverConfigProps = (0, _usePopoverConfig.default)();
+  var renderItem = (0, _react.useCallback)(function (item) {
+    (0, _newArrowCheck2.default)(this, _this16);
+    return /*#__PURE__*/_react.default.createElement(TagItem, {
+      key: item.key,
+      disabled: disabled,
+      onClose: handleClose,
+      item: item
+    });
+  }.bind(this), [disabled, handleClose]);
+  var getRestPopupContainer = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this16);
+    return wrapRef === null || wrapRef === void 0 ? void 0 : wrapRef.current;
+  }.bind(this), [wrapRef]);
+  var renderRest = (0, _react.useCallback)(function (items) {
+    (0, _newArrowCheck2.default)(this, _this16);
+    if (!items.length) return null;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
+      key: "rest",
+      popup: /*#__PURE__*/_react.default.createElement(RestList, {
+        onClose: handleClose,
+        disabled: disabled,
+        items: items
+      }),
+      arrow: false,
+      getPopupContainer: getRestPopupContainer,
+      customStyle: {
+        popupWrapperPadding: '0'
+      },
+      align: restAlign
+    }, popoverConfigProps), /*#__PURE__*/_react.default.createElement(_Tag.default, {
+      disabled: disabled
+    }, "+", items.length));
+  }.bind(this), [disabled, getRestPopupContainer, handleClose, popoverConfigProps]);
+  var handleInput = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this16);
+    setSearchValue(e.target.value);
+  }.bind(this), [setSearchValue]);
+  (0, _react.useEffect)(function () {
+    var _inputRef$current4;
+
+    (0, _newArrowCheck2.default)(this, _this16);
+    if (visible) (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
+  }.bind(this), [visible]);
+  var handleClear = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this16);
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!disabled) {
+      var _inputRef$current5;
+
+      onChange === null || onChange === void 0 ? void 0 : onChange([]);
+      (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.focus();
+    }
+  }.bind(this), [disabled, onChange]);
+  var empty = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this16);
+    return !(value !== null && value !== void 0 && value.length);
+  }.bind(this), [value]);
+  var handleSelectorClick = (0, _react.useCallback)(function (e) {
+    var _inputRef$current6, _popupProps$onClick2;
+
+    (0, _newArrowCheck2.default)(this, _this16);
+    (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.focus();
+    (_popupProps$onClick2 = _popupProps.onClick) === null || _popupProps$onClick2 === void 0 ? void 0 : _popupProps$onClick2.call(_popupProps, e);
+  }.bind(this), [_popupProps]);
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      count = _useState2[0],
+      setCount = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_style2.SSelectorMultiple, (0, _extends2.default)({
+    focused: visible,
+    empty: empty
+  }, _popupProps, {
+    onClick: handleSelectorClick,
+    block: block,
+    size: size,
+    disabled: disabled
+  }), /*#__PURE__*/_react.default.createElement(_style.InputPart, {
+    stretch: true,
+    className: _style2.measureWrapCls
+  }, placeholder && empty && !searchValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style2.placeholderCls
+  }, placeholder), items.length ? /*#__PURE__*/_react.default.createElement(_Overflow.Static, (0, _extends2.default)({
+    items: items,
+    renderItem: renderItem,
+    renderRest: renderRest,
+    static: true,
+    count: count
+  }, _popupProps)) : null, search ? /*#__PURE__*/_react.default.createElement("input", {
+    value: searchValue,
+    ref: inputRef,
+    onChange: handleInput,
+    disabled: disabled
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style2.measureCls
+  }, items.length ? /*#__PURE__*/_react.default.createElement(_Overflow.default, {
+    items: items,
+    renderItem: renderItem,
+    renderRest: renderRest,
+    onMeasure: setCount,
+    changeContent: searchValue
+  }) : null, search ? /*#__PURE__*/_react.default.createElement("span", {
+    className: _style2.measureContentCls
+  }, searchValue) : null)), /*#__PURE__*/_react.default.createElement(_style.Clear, {
+    clearable: clearable && !empty,
+    onClick: handleClear
+  }), /*#__PURE__*/_react.default.createElement(_style.InputPart, null, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    type: visible ? 'arrow-up' : 'arrow-down'
+  }))));
+}); // 单选下的选择器
+
+
+var SingleSelector = /*#__PURE__*/_react.default.memo(function SingleSelector(_ref18) {
+  var _this19 = this;
+
+  var size = _ref18.size,
+      disabled = _ref18.disabled,
+      placeholder = _ref18.placeholder,
+      renderContent = _ref18.renderContent,
+      renderPopup = _ref18.renderPopup,
+      value = _ref18.value,
+      onChange = _ref18.onChange,
+      visible = _ref18.visible,
+      dataSource = _ref18.dataSource,
+      search = _ref18.search,
+      _ref18$searchValue = _ref18.searchValue,
+      searchValue = _ref18$searchValue === void 0 ? '' : _ref18$searchValue,
+      setSearchValue = _ref18.setSearchValue,
+      clearable = _ref18.clearable,
+      _popupProps = _ref18._popupProps;
+  var inputRef = (0, _react.useRef)(null);
+  var getContent = (0, _react.useCallback)(function () {
+    var _this20 = this;
+
+    (0, _newArrowCheck2.default)(this, _this19);
+
+    var _dataSource4 = (0, _slicedToArray2.default)(dataSource, 5),
+        _dataSource4$ = _dataSource4[4],
+        childrenMap = _dataSource4$ === void 0 ? new Map() : _dataSource4$;
+
+    var getValueChild = function getValueChild(v) {
+      (0, _newArrowCheck2.default)(this, _this20);
+      return childrenMap.has(v) ? childrenMap.get(v) : v;
+    }.bind(this);
+
+    var valueChild = getValueChild(value);
+
+    if (renderContent) {
+      return renderContent(value, valueChild);
+    }
+
+    return value === undefined ? undefined : valueChild;
+  }.bind(this), [dataSource, renderContent, value]);
+  var content = (0, _react.useMemo)(getContent, [getContent]); // 自定义渲染弹层时，开发者可能不传入 options 和 children，导致 content memo deps 不触发变更，故强制更新
+
+  if (renderPopup) content = getContent();
+  var handleInput = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this19);
+    setSearchValue(e.target.value);
+  }.bind(this), [setSearchValue]);
+  var empty = value === undefined;
+
+  var sharedProps = _objectSpread({
+    className: _style2.selectInputCls,
+    size: size,
+    disabled: disabled,
+    block: true,
+    cursor: search ? 'text' : 'pointer',
+    focused: visible,
+    empty: empty,
+    search: search
+  }, _popupProps);
+
+  (0, _react.useEffect)(function () {
+    var _inputRef$current7;
+
+    (0, _newArrowCheck2.default)(this, _this19);
+    if (visible) (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : _inputRef$current7.focus();
+  }.bind(this), [visible]);
+  var handleClear = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this19);
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!disabled) {
+      var _inputRef$current8;
+
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+      (_inputRef$current8 = inputRef.current) === null || _inputRef$current8 === void 0 ? void 0 : _inputRef$current8.focus();
+    }
+  }.bind(this), [disabled, onChange]);
+  return /*#__PURE__*/_react.default.createElement(_style2.SSelectorSingle, sharedProps, /*#__PURE__*/_react.default.createElement(_style.InputPart, {
+    stretch: true,
+    className: _style2.inputWrapCls
+  }, content ? /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_style2.placeholderCls, _style2.contentCls),
+    style: {
+      visibility: searchValue ? 'hidden' : 'visible'
+    }
+  }, content) : /*#__PURE__*/_react.default.createElement("span", {
+    className: _style2.placeholderCls,
+    style: {
+      visibility: searchValue ? 'hidden' : 'visible'
+    }
+  }, placeholder), search && /*#__PURE__*/_react.default.createElement("input", {
+    className: _style2.inputCls,
+    value: searchValue,
+    onChange: handleInput,
+    disabled: disabled,
+    ref: inputRef
+  })), /*#__PURE__*/_react.default.createElement(_style.Clear, {
+    clearable: clearable && !empty,
+    onClick: handleClear
+  }), /*#__PURE__*/_react.default.createElement(_style.InputPart, null, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    type: visible ? search ? 'search' : 'arrow-up' : 'arrow-down'
+  })));
+});
+
+var Select = function Select(_ref19) {
   var _search,
       _search2,
       _search3,
-      _this7 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var _ref8$size = _ref8.size,
-      size = _ref8$size === void 0 ? 'md' : _ref8$size,
-      _value = _ref8.value,
-      defaultValue = _ref8.defaultValue,
-      _onChange = _ref8.onChange,
-      _ref8$onVisibleChange = _ref8.onVisibleChange,
-      onVisibleChange = _ref8$onVisibleChange === void 0 ? _noop.default : _ref8$onVisibleChange,
-      disabled = _ref8.disabled,
-      search = _ref8.search,
-      multiple = _ref8.multiple,
-      renderContent = _ref8.renderContent,
-      renderSelector = _ref8.renderSelector,
-      placeholder = _ref8.placeholder,
-      _locale = _ref8.locale,
-      options = _ref8.options,
-      children = _ref8.children,
-      emptyContent = _ref8.emptyContent,
-      showSelectAll = _ref8.showSelectAll,
-      extra = _ref8.extra,
-      customStyle = _ref8.customStyle,
-      popover = _ref8.popover,
-      popoverProps = _ref8.popoverProps,
-      renderPopup = _ref8.renderPopup,
-      virtualList = _ref8.virtualList,
-      rest = (0, _objectWithoutProperties2.default)(_ref8, _excluded3);
+      _this21 = this;
+
+  (0, _newArrowCheck2.default)(this, _this7);
+  var _ref19$size = _ref19.size,
+      size = _ref19$size === void 0 ? 'md' : _ref19$size,
+      _value = _ref19.value,
+      defaultValue = _ref19.defaultValue,
+      _onChange = _ref19.onChange,
+      _ref19$onVisibleChang = _ref19.onVisibleChange,
+      onVisibleChange = _ref19$onVisibleChang === void 0 ? _noop.default : _ref19$onVisibleChang,
+      disabled = _ref19.disabled,
+      search = _ref19.search,
+      multiple = _ref19.multiple,
+      renderContent = _ref19.renderContent,
+      renderSelector = _ref19.renderSelector,
+      placeholder = _ref19.placeholder,
+      _locale = _ref19.locale,
+      options = _ref19.options,
+      children = _ref19.children,
+      emptyContent = _ref19.emptyContent,
+      showSelectAll = _ref19.showSelectAll,
+      extra = _ref19.extra,
+      clearable = _ref19.clearable,
+      customStyle = _ref19.customStyle,
+      popover = _ref19.popover,
+      popoverProps = _ref19.popoverProps,
+      renderPopup = _ref19.renderPopup,
+      virtualList = _ref19.virtualList,
+      block = _ref19.block,
+      styleType = _ref19.styleType,
+      htmlProps = (0, _objectWithoutProperties2.default)(_ref19, _excluded6);
+  if (multiple) clearable = true;
 
   var _useUncontrolled = (0, _useUncontrolled5.default)(_value, defaultValue, _onChange),
       _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
       value = _useUncontrolled2[0],
       onChange = _useUncontrolled2[1];
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
 
   var locale = (0, _useLocale.default)(_zh_CN.default, 'Select', _locale);
+  var wrapRef = (0, _react.useRef)(null);
   if (search === true) search = {};
 
   var _useUncontrolled3 = (0, _useUncontrolled5.default)((_search = search) === null || _search === void 0 ? void 0 : _search.searchValue, ((_search2 = search) === null || _search2 === void 0 ? void 0 : _search2.defaultSearchValue) || '', (_search3 = search) === null || _search3 === void 0 ? void 0 : _search3.onSearchValueChange),
@@ -453,14 +1221,14 @@ var Select = function Select(_ref8) {
       setSearchValue = _useUncontrolled4[1];
 
   (0, _useInitial.default)(function () {
-    (0, _newArrowCheck2.default)(this, _this7);
+    (0, _newArrowCheck2.default)(this, _this21);
     if (popover) deprecatedLogForPopover();
     if (virtualList && !options) warnLogForVirtualList();
   }.bind(this));
   var handleSearch = (0, _react.useCallback)(function (value, props) {
-    var _this8 = this;
+    var _this22 = this;
 
-    (0, _newArrowCheck2.default)(this, _this7);
+    (0, _newArrowCheck2.default)(this, _this21);
 
     if (!search || !searchValue) {
       return true;
@@ -479,7 +1247,7 @@ var Select = function Select(_ref8) {
       if (!('props' in itemInfo)) {
         Object.defineProperty(itemInfo, 'props', {
           get: function get() {
-            (0, _newArrowCheck2.default)(this, _this8);
+            (0, _newArrowCheck2.default)(this, _this22);
             warnLogForSearchProps();
             return beforeProps;
           }.bind(this)
@@ -488,88 +1256,143 @@ var Select = function Select(_ref8) {
 
       return search.handleSearch(searchValue, value, itemInfo);
     } else {
+      var _props$label;
+
       // use label for options case
-      var _children = options ? props.label : props.children;
+      var _children = options ? (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.value : props.children;
+
+      if (_children && typeof _children === 'string') {
+        var i = _children.indexOf(searchValue);
+
+        if (i >= 0) {
+          var l = searchValue.length;
+          return [_children.substring(0, i), _children.substring(i, i + l), _children.substring(i + l)];
+        }
+      }
 
-      return (value + '').indexOf(searchValue) >= 0 || _children && typeof _children === 'string' && _children.indexOf(searchValue) >= 0;
+      return (value + '').indexOf(searchValue) >= 0;
     }
   }.bind(this), [options, search, searchValue]);
   var childrenDataSource = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this7);
-    return options ? [] : (0, _group3.groupChildrenAsDataSource)(children, disabled, groupOptions);
-  }.bind(this), [children, disabled, options]);
+    (0, _newArrowCheck2.default)(this, _this21);
+    return options ? [] : groupChildrenAsDataSource(children, disabled, groupOptions, searchValue, handleSearch);
+  }.bind(this), [children, disabled, handleSearch, options, searchValue]);
   var optionsDataSource = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this7);
+    (0, _newArrowCheck2.default)(this, _this21);
     return options ? groupOptionsAsDataSource(options, disabled, groupOptions, searchValue, handleSearch) : [];
   }.bind(this), [disabled, handleSearch, options, searchValue]);
+  var dataSource = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this21);
+
+    if (options) {
+      return optionsDataSource;
+    }
+
+    return childrenDataSource;
+  }.bind(this), [options, childrenDataSource, optionsDataSource]);
   virtualList = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this7);
+    (0, _newArrowCheck2.default)(this, _this21);
     return options ? virtualList : false;
   }.bind(this), [options, virtualList]);
-  var dataSource = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this7);
-    return options ? optionsDataSource : childrenDataSource;
-  }.bind(this), [options, childrenDataSource, optionsDataSource]);
   var handleVisibleChange = (0, _react.useCallback)(function (open) {
-    (0, _newArrowCheck2.default)(this, _this7);
+    (0, _newArrowCheck2.default)(this, _this21);
+    if (disabled) return;
     setVisible(open);
     onVisibleChange(open);
-  }.bind(this), [onVisibleChange]);
+    if (!open) setSearchValue('');
+  }.bind(this), [disabled, onVisibleChange, setSearchValue]);
   var hidePopup = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this7);
+    (0, _newArrowCheck2.default)(this, _this21);
     return handleVisibleChange(false);
   }.bind(this), [handleVisibleChange]);
-  return /*#__PURE__*/_react.default.createElement(_ConfigContext.default.Consumer, null, function (configContext) {
-    (0, _newArrowCheck2.default)(this, _this7);
-    var popupConfigProps = (0, _usePopoverConfig.getPopoverConfigFromContext)(configContext);
-    return /*#__PURE__*/_react.default.createElement(_SelectContext.default.Provider, {
-      value: {
-        hidePopup: hidePopup,
-        handleSearch: handleSearch,
-        searchValue: searchValue
-      }
-    }, /*#__PURE__*/_react.default.createElement(_style.SelectWrap, rest, /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
-      onVisibleChange: handleVisibleChange,
-      placement: "bottomLeft",
+  var hasSubGroup = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this21);
+    var hasSubGroup = dataSource[3].size > 0;
+    warnLogForSubGroup();
+    return hasSubGroup;
+  }.bind(this), [dataSource]); // 多层数据/搜索且自定义 selector/自定义渲染内容时，无法兼容，回滚到老版本
+
+  var _useState5 = (0, _react.useState)(function () {
+    (0, _newArrowCheck2.default)(this, _this21);
+    return hasSubGroup || !!(search && (renderContent || renderSelector));
+  }.bind(this)),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 1),
+      v1 = _useState6[0];
+
+  var popup = /*#__PURE__*/_react.default.createElement(Popup, {
+    v1: v1,
+    extra: extra,
+    customStyle: customStyle,
+    search: search,
+    multiple: multiple,
+    emptyContent: emptyContent,
+    showSelectAll: showSelectAll,
+    value: value,
+    renderPopup: renderPopup,
+    handleVisibleChange: handleVisibleChange,
+    options: options,
+    onChange: onChange,
+    locale: locale,
+    hidePopup: hidePopup,
+    dataSource: dataSource,
+    searchValue: searchValue,
+    setSearchValue: setSearchValue,
+    virtualList: virtualList
+  }, children);
+
+  var selector = /*#__PURE__*/_react.default.createElement(Selector, {
+    v1: v1,
+    size: size,
+    disabled: disabled,
+    multiple: multiple,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : locale.placeholder,
+    renderContent: renderContent,
+    renderSelector: renderSelector,
+    renderPopup: renderPopup,
+    value: value,
+    onChange: onChange,
+    visible: visible,
+    locale: locale,
+    dataSource: dataSource,
+    clearable: clearable,
+    search: search,
+    searchValue: searchValue,
+    setSearchValue: setSearchValue,
+    styleType: styleType,
+    wrapRef: wrapRef,
+    block: block
+  });
+
+  var popoverTriggerAttrs = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this21);
+    return v1 ? {
       trigger: ['click']
-    }, popupConfigProps, {
-      visible: visible
-    }, popover, popoverProps, {
-      popup: /*#__PURE__*/_react.default.createElement(Popup, {
-        extra: extra,
-        customStyle: customStyle,
-        search: search,
-        multiple: multiple,
-        emptyContent: emptyContent,
-        showSelectAll: showSelectAll,
-        value: value,
-        renderPopup: renderPopup,
-        options: options,
-        children: children,
-        onChange: onChange,
-        locale: locale,
-        handleVisibleChange: handleVisibleChange,
-        hidePopup: hidePopup,
-        dataSource: dataSource,
-        searchValue: searchValue,
-        setSearchValue: setSearchValue,
-        virtualList: virtualList
-      }),
-      forceRender: false
-    }), /*#__PURE__*/_react.default.createElement(Selector, {
-      size: size,
-      disabled: disabled,
-      multiple: multiple,
-      placeholder: placeholder,
-      renderContent: renderContent,
-      renderSelector: renderSelector,
-      renderPopup: renderPopup,
-      value: value,
-      visible: visible,
-      locale: locale,
-      dataSource: dataSource
-    }))));
-  }.bind(this));
+    } : {
+      trigger: [],
+      showAction: ['click', 'contextMenu', 'focus']
+    };
+  }.bind(this), [v1]);
+  var popoverConfigProps = (0, _usePopoverConfig.default)();
+  return /*#__PURE__*/_react.default.createElement(_SelectContext.default.Provider, {
+    value: {
+      hidePopup: hidePopup,
+      handleSearch: handleSearch,
+      searchValue: searchValue
+    }
+  }, /*#__PURE__*/_react.default.createElement(_style2.SelectWrap, (0, _extends2.default)({
+    ref: wrapRef,
+    disabled: disabled,
+    multiple: multiple,
+    block: block
+  }, htmlProps), /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
+    visible: visible,
+    onVisibleChange: handleVisibleChange,
+    placement: "bottomLeft",
+    stretch: block ? blockPopoverStretch : popoverStretch
+  }, popoverTriggerAttrs, popoverConfigProps, popover, popoverProps, {
+    popup: popup,
+    forceRender: false
+  }), selector)));
 }.bind(void 0);
 
 Select.propTypes = {
@@ -584,6 +1407,7 @@ Select.propTypes = {
   multiple: _propTypes.default.bool,
   showSelectAll: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  styleType: _propTypes.default.oneOf(['list']),
   renderContent: _propTypes.default.func,
   renderSelector: _propTypes.default.func,
   renderPopup: _propTypes.default.func,
@@ -593,6 +1417,8 @@ Select.propTypes = {
     defaultSearchValue: _propTypes.default.string,
     onSearchValueChange: _propTypes.default.func
   })]),
+  block: _propTypes.default.bool,
+  clearable: _propTypes.default.bool,
   popover: _propTypes.default.any,
   popoverProps: _propTypes.default.any,
   onVisibleChange: _propTypes.default.func,
@@ -608,5 +1434,7 @@ Select.propTypes = {
     height: _propTypes.default.number
   })])
 };
-var _default = Select;
+
+var _default = /*#__PURE__*/_react.default.memo(Select);
+
 exports.default = _default;